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

Angular: Komponentenbasierte HTML5-Anwendungen für alle

Manuel Rauber
September 26, 2017

Angular: Komponentenbasierte HTML5-Anwendungen für alle

Mit Angular 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-Framework für Single-Page Applications (SPA) echte Cross-Platform-Businessanwendungen schreiben und dabei die aktuellen mächtigen Features des Browsers und des Webs nutzen kann.

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

Manuel Rauber

September 26, 2017
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Angular
    Komponentenbasierte HTML5-Anwendungen
    Manuel Rauber
    @manuelrauber
    Consultant

    View Slide

  2. Special Day “Modern Business Applications”
    BASTA! 2017
    Angular: Komponentenbasierte HTML5-Anwendungen für alle

    View Slide

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

    View Slide

  4. Cross-Platform
    Angular
    Cordova
    Electron
    Deployment
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Talking Points

    View Slide

  5. Gotta catch’em all!
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Cross-Platform

    View Slide

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

    Refrigerator

    View Slide

  7. Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017

    View Slide

  8. Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    The web as a platform

    View Slide

  9. Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    But it doesn’t look like a
    native application!
    Exactly.

    View Slide

  10. Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

    View Slide

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

    View Slide

  12. Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Powered by

    View Slide

  13. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    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. Single-Page Applications
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Angular

    View Slide

  15. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    TypeScript

    View Slide

  16. • 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: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Angular Overview

    View Slide

  17. Classes with metadata and a view-defining template.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    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 für alle
    BASTA! 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. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Change Detection

    View Slide

  20. Directives are used to attach behavior to elements.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    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. Services are classes with metadata but without a view. Services are normally
    singletons but can be constructed on demand.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Services
    @Injectable()
    export class HackathonService {
    constructor(private _http: HttpClient) {
    }
    public getHackathons(): Observable {
    return ...;
    }
    }

    View Slide

  22. 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).
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Dependency Injection
    @Injectable()
    export class HackathonService {
    constructor(private _http: HttpClient) {
    }
    }

    View Slide

  23. Pipes are used to transform displayed values within a template.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    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 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”.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    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

  25. 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.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    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 uses modules to organize an application into related blocks of
    functionality. A decorator is used to define a module.
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Modules
    @NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ HackathonService ]
    })
    export class AppModule {
    }

    View Slide

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

    View Slide

  28. Native mobile applications
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Cordova

    View Slide

  29. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Cordova

    View Slide

  30. Native desktop applications
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Electron

    View Slide

  31. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Electron

    View Slide

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

    View Slide

  33. “To be on cloud nine”
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Deployment

    View Slide

  34. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Deployment

    View Slide

  35. A glance across the border
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Progressive Web Apps

    View Slide

  36. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Overview

    View Slide

  37. • 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
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Summary

    View Slide

  38. “Cross-Plattform HTML5 Day”, Thursday, September, 28th
    Anfassen erlaubt: Mobile Apps mit Angular & Cordova
    Thomas Hilzendegen – 9 am, Gutenberg-Saal 4
    Fenster überall: Desktop-Anwendungen mit Angular & Electron
    Fabian Gosebrink – 10:45 am, Gutenberg-Saal 4
    Web goes native: Progressive Web Apps (PWA) – with Angular
    Shmuela Jacobs – 5 pm, Gutenberg-Saal 4
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Sessions

    View Slide

  39. Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    https://entwickler.de/press/shortcuts/cross-plattform-579811835.html

    View Slide

  40. • 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/
    Angular: Komponentenbasierte HTML5-Anwendungen für alle
    BASTA! 2017
    Resources

    View Slide

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

    View Slide