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

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
   ! manuel.rauber@thinktecture.com
   " @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
    manuel.rauber@thinktecture.com
    

    View Slide