Angular 2 - Moderne HTML5-Anwendungen für alle Plattformen

Mit dem Einzug von Single-Page Application Frameworks steht modernen HTML5-Anwendungen nichts mehr im Wege. Bekannte Windows- und Desktop-ähnliche Programmiermuster können im Web verwendet werden, um große und moderne Anwendungen zu entwickeln: komponentenbasierte Entwicklung, Zwei-Wege-Datenbindung oder Dependency Injection - das alles und viel mehr bietet ein Framework wie Angular 2. Durch die Nutzung von Microsofts TypeScript, eine an C# angelehnte Programmiersprache, sind auch statische Code-Analysen, Refactorings und IntelliSense möglich. In dieser Session zeigt Ihnen Manuel Rauber, wie man mit dem Open-Source Framework die modernen Browser- und Web-Features nutzen kann, um echte Cross-Plattform-Business-Anwendungen für Desktop und mobile Endgeräte entwickeln.

Transcript

1. View Slide

2. Software Architect @ Thinktecture AG
   ! manuel.rauber@thinktecture.com
   " @manuelrauber
   # https://manuel-rauber.com
   Manuel Rauber
   

   View Slide

3. • Cross-Platform
   • Angular 2
   • Cordova
   • Electron
   Talking Points
   

   View Slide

4. View Slide

5. macOS
   Linux
   Windows iOS
   Windows Phone
   Android
   BlackBerry 10
   FireOS
   Browser
   TV
   …
   Refrigerator
   Single- vs. Multi- vs. Cross-Platform
   

   View Slide

6. View Slide

7. The web as a platform
   

   View Slide

8. But it doesn’t look like a
   native application!
   Exactly.
   

   View Slide

9. https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
   

   View Slide

10. http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
    

    View Slide

11. Real applications
    

    View Slide

12. HTTP HTTPS WebSocket
    Service A Service B Service C
    Web APIs
    (ASP.NET, Node.js, …)
    HTML5-Application
    (Single-Page Application)
    Web Cordova Electron
    • Lightweight service-based architecture
    • Functional services with dedicated interfaces
    • Uses other services, like database or file system
    • (JSON-based) Web APIs
    • Application push services via WebSocket
    • SignalR
    • Socket.io
    Architecture
    

    View Slide

13. View Slide

14. • 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

15. • 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
    Angular Overview
    

    View Slide

16. Components are 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

17. 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

18. 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

19. 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

20. Pipes are used to transform displayed values within a template.
    Pipes
    @Pipe({
    name: 'date'
    })
    export class DatePipe implements PipeTransform {
    public transform(value: Date, ...args: any[]): string {
    if (!value) {
    return 'n/a';
    }
    return Moment(value).format(args[0]);
    }
    }
    {{ model.date | date }}
    

    View Slide

21. 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

22. 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

23. 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

24. 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

25. View Slide

26. • 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

27. Architecture
    Mobile OS iOS Android
    Windows 10
    UWP
    and more
    Cordova Application
    Cordova Plugins
    Geolocation
    Notifications
    Media
    Camera
    Custom Plugins
    HTML Rendering Engine
    (WebView)
    Single-Page Application
    HTML JS CSS Assets
    HTML APIs
    Cordova APIs
    OS APIs
    OS APIs
    Cordova Native APIs
    

    View Slide

28. View Slide

29. • 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 updater & crash reporter
    Electron
    

    View Slide

30. Architecture
    Desktop OS
    Electron Renderer Process
    (technically Chromium)
    Electron Main Process
    (technically Node.js)
    macOS Windows Linux
    Single-Page Application
    Electron API
    Custom Node.js modules
    IPC
    Remote
    Node.js
    

    View Slide

31. macOS
    iOS
    Windows Mobile
    Android
    Windows Desktop
    Windows 10/UWP
    Linux
    Browser
    

    View Slide

32. • 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
    Summary
    

    View Slide

33. • Christian Weyer
    • Floor 2.1
    • Room 2
    • 2 pm
    Progressive Web Apps: Das Web wird nativ(er)
    

    View Slide

34. • 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

35. View Slide