Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Manuel Rauber

December 07, 2016
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Software Architect @ Thinktecture AG
    ! [email protected]
    " @manuelrauber
    # https://manuel-rauber.com
    Manuel Rauber

    View full-size slide

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

    View full-size slide

  3. macOS
    Linux
    Windows iOS
    Windows Phone
    Android
    BlackBerry 10
    FireOS
    Browser
    TV

    Refrigerator
    Single- vs. Multi- vs. Cross-Platform

    View full-size slide

  4. The web as a platform

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Real applications

    View full-size slide

  9. 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 full-size slide

  10. • 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 full-size slide

  11. • 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. • 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 full-size slide

  22. 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 full-size slide

  23. • 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 full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. • 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 full-size slide

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

    View full-size slide

  28. • 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 full-size slide