Angular 2: Komponentenbasierte HTML5-Anwendungen – die Plattform

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

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

February 21, 2017
Tweet

Transcript

  1. Manuel Rauber @manuelrauber Software Architect Angular 2: Komponentenbasierte HTML5-Anwendungen

  2. None
  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’
  4. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 Cross-Platform Angular 2

    Cordova Electron Talking Points
  5. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 Gotta catch’em all!

    Cross-Platform
  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
  7. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017

  8. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 The web as

    a platform
  9. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 But it doesn’t

    look like a native application! Exactly.
  10. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

  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

  12. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 Powered by

  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
  14. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 Single-Page Applications Angular

    2
  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
  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
  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<HackathonModel>; } … <hackathon-form [hackathon]="currentHackathon" (onSubmitted)="saveHackathon($event)" ></hackathon-form> …
  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()
  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()
  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); } }
  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<Array<HackathonModel>> { return ...; } }
  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) { } }
  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); } } <span>{{ model.date | date }}<span>
  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<Response> { return this._http.get(this._url.getEndpoint('hackathons')); } }
  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 });
  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 { }
  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);
  28. Angular: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 Native mobile applications Cordova

  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
  30. Angular: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 Native desktop applications Electron

  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
  32. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 macOS iOS Windows

    Mobile Android Windows Desktop Windows 10/UWP Linux Browser
  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
  34. Angular: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 A glance across the

    border Progressive Web Apps
  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
  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
  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
  38. Thank you! Questions? Repository https://github.com/thinktecture/basta-spring-2017-angular-demo Contact @manuelrauber manuel.rauber@thinktecture.com