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

Echte Cross-Plattform-Anwendungen mit Angular, Cordova und Electron: Volle Power im Frontend

Echte Cross-Plattform-Anwendungen mit Angular, Cordova und Electron: Volle Power im Frontend

Mit Angular als Webanwendungsframework lassen sich komponentenorientierte Anwendungen entwickeln, wie wir es von Windows- und desktopähnlichen Programmiermustern bereits kennen. Dank TypeScript als Programmiersprachen erhalten wir Features, wie Generics, Lambda-Ausdrücke oder statische Typisierung, um uns auch in der Webwelt schnell wohlzufühlen. Durch Cordova können wir unsere Anwendung als native mobile App für Android, iOS und Windows verpacken und auf Plattformfeatures, wie die Kamera des mobilen Geräts, zugreifen. Electron erlaubt das Verpacken der Anwendung in eine echte native Desktopanwendung: .exe, .app und Co. In dieser Session zeigt Manuel Rauber von Thinktecture, wie mit dem Open-Source-Framework für Single-Page Applications von Google echte Cross-Plattform-Businessanwendungen entwickelt werden können und dabei das Web als zukunftsfähige Anwendungsplattform nutzt.

GitHub: https://github.com/thinktecture/jax-2018-angular-demo

Manuel Rauber

April 26, 2018
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Echte Cross-Plattform-Anwendungen
    Angular, Cordova, Electron: Volle Power im Frontend
    Manuel Rauber
    @manuelrauber
    Consultant

    View Slide

  2. Consultant @ Thinktecture AG
    ! [email protected]
    " @manuelrauber
    # https://manuel-rauber.com
    Microsoft MVP
    The guy who’s talkin’
    Manuel Rauber

    View Slide

  3. Cross-Platform
    Angular
    Cordova
    Electron
    Deployment
    Talking Points

    View Slide

  4. Gotta catch’em all!
    Cross-Platform

    View Slide

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

    Refrigerator

    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. Powered by

    View Slide

  12. • Lightweight service-based architecture
    • Functional services with dedicated interfaces
    • Use other services, like database or file system
    • (JSON-based) Web APIs
    • Secured by tokens
    • Consumable by every HTTPS speaking client
    • 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

  13. Single-Page Applications
    Angular

    View Slide

  14. • Designed by Andres 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
    • Refactoring
    • Linting
    • IntelliSense
    TypeScript

    View Slide

  15. • Angular 2, 4, 5?! Just Angular! Semantic versioning, just 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 via Angular CLI
    Angular Overview

    View Slide

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

  18. • 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, …
    • XMLHttpRequest, fetch
    • setTimeout, setInterval
    Change Detection

    View Slide

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

  20. 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: HttpClient) {
    }
    public getHackathons(): Observable {
    return ...;
    }
    }

    View Slide

  21. 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: HttpClient) {
    }
    }

    View Slide

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

  23. 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: HttpClient, private _url: UrlService) {
    }
    public getHackathons(): Observable {
    return this._http.get(this._url.getEndpoint('hackathons'));
    }
    }

    View Slide

  24. Angular’s routing system interprets a browser URL to navigate to a
    view/component. It supports features like child routing or loading compete
    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

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

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

  27. Native mobile applications
    Cordova

    View Slide

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

  29. Native desktop applications
    Electron

    View Slide

  30. • Allows creation of real desktop application (.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

  31. BASTA! Spring 2017
    macOS
    iOS
    Windows Mobile
    Android
    Windows Desktop
    Windows 10/UWP
    Linux
    Browser

    View Slide

  32. “To be on cloud nine”
    Deployment

    View Slide

  33. • Dockerize it!
    • Deployable via Docker containers on
    • Microsoft Azure: Container Registry, Container Services, Container
    Instances
    • IBM Bluemix Container Services
    • Amazon EC2 Container Services
    • Google Cloud Platform
    • Runnable via
    • Simple Azure Linux-based Web Apps
    • Docker Swarm
    • Kubernetes
    Deployment

    View Slide

  34. The Application Model of the Future
    Progressive Web Apps

    View Slide

  35. • Basic idea: Get rid of 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 characteristics
    • Backwards compatible
    Overview

    View Slide

  36. • 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. https://entwickler.de/press/shortcuts/cross-plattform-579811835.html

    View Slide

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

  39. Thank you! Questions?
    Contact
    @manuelrauber
    [email protected]

    View Slide