$30 off During Our Annual Pro Sale. View Details »

Angular 2: Komponentenbasierte HTML5-Anwendungen – die Plattform

Angular 2: Komponentenbasierte HTML5-Anwendungen – die Plattform

Mit Angular 2 als Webanwendungsframework können wir nun Anwendungen auf Komponentenbasis entwickeln und dadurch immer mehr in Windows- und desktopähnlichen Programmiermustern denken und agieren. Zusätzlich bietet sich die Integration von Angular mit TypeScript als Programmiersprache auch und vor allem für den .NET-verwöhnten Entwickler an. In dieser Session zeigt Manuel Rauber von Thinktecture, wie man mit Googles neuem Open-Source-SPA-Projekt echte Cross-Plattform-Businessanwendungen schreiben und dabei die aktuellen mächtigen Features des Browsers und des Webs nutzen kann.

GitHub: https://github.com/thinktecture/basta-spring-2017-angular-demo

Manuel Rauber

February 21, 2017
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Manuel Rauber
    @manuelrauber
    Software Architect
    Angular 2: Komponentenbasierte
    HTML5-Anwendungen

    View Slide

  2. View Slide

  3. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Manuel Rauber
    Software Architect @ Thinktecture AG
    ! [email protected]
    " @manuelrauber
    # https://manuel-rauber.com
    Microsoft MVP
    The guy who’s talkin’

    View Slide

  4. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Cross-Platform
    Angular 2
    Cordova
    Electron
    Talking Points

    View Slide

  5. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Gotta catch’em all!
    Cross-Platform

    View Slide

  6. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Single- vs. Multi- vs. Cross-Platform
    macOS
    Linux
    Windows iOS
    Windows Phone
    Android
    BlackBerry 10
    FireOS
    Browser
    TV

    Refrigerator

    View Slide

  7. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017

    View Slide

  8. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    The web as a platform

    View Slide

  9. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    But it doesn’t look like a
    native application!
    Exactly.

    View Slide

  10. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

    View Slide

  11. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg

    View Slide

  12. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Powered by

    View Slide

  13. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Lightweight service-based architecture
    • Functional services with dedicated interfaces
    • Use other services, like database or file system
    • (JSON-based) Web APIs
    • Application push services via WebSocket
    • SignalR
    • Socket.io
    Architecture
    HTTP HTTPS WebSocket
    Service A Service B Service C
    Web APIs
    (ASP.NET, Node.js, …)
    HTML5-Application
    (Single-Page Application)
    Web Cordova Electron

    View Slide

  14. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Single-Page Applications
    Angular 2

    View Slide

  15. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Designed by Anders Hejlsberg, who also designed C#
    • Typed superset of JavaScript that transpiles to plain JavaScript
    • Types are optional, but useful metadata for tooling
    • Static Code Analysis
    • Linting
    • IntelliSense
    TypeScript

    View Slide

  16. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Angular 2? Just Angular! Uses semantic versioning, like Google Chrome
    • Angular Universal: Client- and server-side rendering possibilities
    • MV* architecture
    • Components, Views, View Models
    • Modules, Services, dependency injection
    • Data binding, Routing, HTTP, Animations
    • Unit-testable
    • First class IDE support
    • JetBrains WebStorm
    • Visual Studio Code
    • Build tooling with Angular CLI
    Angular Overview

    View Slide

  17. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Classes with metadata and a view-defining template.
    Components, Components, Components, …
    @Component({
    selector: 'hackathon-form',
    templateUrl: 'hackathonForm.html'
    })
    export class HackathonFormComponent {
    @Input()
    public hackathon: HackathonModel;
    @Output()
    public onSubmitted: EventEmitter;
    }

    [hackathon]="currentHackathon"
    (onSubmitted)="saveHackathon($event)"
    >

    View Slide

  18. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Data flow
    Parent -> Child
    Application
    Hackathons
    Users
    Hackathon Hackathon
    [hackathons]=“someExp”
    [hackathon]=“someExp”
    Child-> Parent
    Application
    Hackathons
    Users
    Hackathon Hackathon
    (rate)=“onRate()”
    (rate)=“onRate()”
    via @Input() via @Output()

    View Slide

  19. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Change Detection
    • Change Detection is done “automagically” via a library named zone.js
    • Overwrites all asynchronous browser APIs with an own implementation
    • Implementation used to trigger an Angular change detection cycle
    • Asynchronous APIs like
    • Events: clicks, mouse movement, input, submit, …
    • XMLHttpRequests, fetch
    • setTimeout(), setInterval()

    View Slide

  20. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Directives are used to attach behavior to elements.
    Directives
    @Directive({
    selector: '[non-empty]',
    host: {
    '[class.non-empty]': 'nonEmpty'
    }
    })
    export class NonEmptyDirective {
    public nonEmpty: boolean;
    constructor(@Host() ngModel: NgModel) {
    ngModel.valueChanges.subscribe(change => this.nonEmpty = !!change);
    }
    }

    View Slide

  21. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Services are classes with metadata but without a view. Services are normally
    singletons but can be constructed on demand.
    Services
    @Injectable()
    export class HackathonService {
    constructor(private _http: Http) {
    }
    public getHackathons(): Observable> {
    return ...;
    }
    }

    View Slide

  22. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Angular has an hierarchical constructor dependency injection system. All types are
    registered explicitly. Either globally (for singleton registrations) or on a component
    level (every component gets their own instance).
    Dependency Injection
    @Injectable()
    export class HackathonService {
    constructor(private _http: Http) {
    }
    }

    View Slide

  23. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Pipes are used to transform displayed values within a template.
    Pipes
    @Pipe({
    name: 'date'
    })
    export class DatePipe implements PipeTransform {
    public transform(value: Date, format?: string): string {
    if (!value) {
    return 'n/a';
    }
    return Moment(value).format(format);
    }
    }
    {{ model.date | date }}

    View Slide

  24. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Angular offers a unit-test-mockable HTTP service based on observables. Observables
    are built on top of RxJS and represent ”an API for asynchronous programming with
    observable streams”.
    HTTP & Observables
    @Injectable()
    export class HackathonService {
    constructor(private _http: Http, private _url: UrlService) {
    }
    public getHackathons(): Observable {
    return this._http.get(this._url.getEndpoint('hackathons'));
    }
    }

    View Slide

  25. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Angular’s routing system interprets a browser URL to navigate to a view/component. It
    supports features like child routing or loading complete modules asynchronously.
    Routing
    export class CreateHackathonComponent {
    constructor(private _router: Router) {
    }
    public saveHackathon() {
    // Save the model...
    this._router.navigate(['/dashboard’]);
    }
    }
    const appRoutes: Routes = [{
    path: 'dashboard',
    component: DashboardComponent
    }];
    const AppRoutes = RouterModule
    .forRoot(appRoutes, {
    useHash: true
    });

    View Slide

  26. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Angular uses modules to organize an application into related blocks of functionality. A
    decorator is used to define a module.
    Modules
    @NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ HackathonService ]
    })
    export class AppModule {
    }

    View Slide

  27. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Angular can either be bootstrapped with Just-In-Time compilation or by using
    Ahead-Of-Time compilation.
    Bootstrap
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './appModule';
    platformBrowserDynamic().bootstrapModule(AppModule);

    View Slide

  28. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Native mobile applications
    Cordova

    View Slide

  29. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Native application shell with integrated web browser
    • Android: Android specific browser / CrossWalk
    • iOS: UIWebView / WKWebView
    • Windows Mobile: Internet Explorer / Edge
    • HTML5 app is hosted within an integrated web browser
    • Provides access to the underlying native platforms via plugins
    • Native SDKs to build the apps are needed
    Cordova

    View Slide

  30. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    Native desktop applications
    Electron

    View Slide

  31. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Allows creating of real desktop applications (.exe, .app)
    • Combines a full-blown Chromium browser with Node.js
    • Does not rely on the target machine’s installed browsers
    • No need to install native SDKs for building
    • Access native platform APIs
    • Electron API
    • Node.js modules
    • Advanced features like auto updates & crash reporter
    Electron

    View Slide

  32. Angular 2: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    macOS
    iOS
    Windows Mobile
    Android
    Windows Desktop
    Windows 10/UWP
    Linux
    Browser

    View Slide

  33. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Thorsten Hans
    • Platinum Ballsaal II
    • 21.02. @ 18:30
    • Real native platform integrations
    Mobile und Desktop: Echte Anwendungen mit Cordova & Electron

    View Slide

  34. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    A glance across the border
    Progressive Web Apps

    View Slide

  35. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Basic idea: Remove the App Stores!
    • Bring native experience directly to the browser
    • Platform push services
    • Offline
    • Installable
    • Initiate led by Google since 2015
    • PWA is not a technology but a collection of features
    • Backwards compatible
    Overview

    View Slide

  36. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Modern applications need a modern architecture
    • Web Technology Stack to achieve “real cross-platform”
    • Cordova & Electron for native platform integrations
    • Build tooling supports daily development and production workflow
    • Progressive Web Apps show an interesting future
    Summary

    View Slide

  37. Angular: Komponentenbasierte HTML5-Anwendungen
    BASTA! Spring 2017
    • Angular: https://angular.io
    • Apache Cordova: https://cordova.apache.org/
    • Electron: http://electron.atom.io/
    • Gulp: http://gulpjs.com/
    • Webpack: https://webpack.github.io/
    • Rollup: http://rollupjs.org/
    • Angular CLI: https://cli.angular.io/
    • PWA: https://developers.google.com/web/progressive-web-apps/
    Resources

    View Slide

  38. Thank you! Questions?
    Repository
    https://github.com/thinktecture/basta-spring-2017-angular-demo
    Contact
    @manuelrauber
    [email protected]

    View Slide