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.

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

December 07, 2016
Tweet

Transcript

  1. 1.
  2. 4.
  3. 5.

    macOS Linux Windows iOS Windows Phone Android BlackBerry 10 FireOS

    Browser TV … Refrigerator Single- vs. Multi- vs. Cross-Platform
  4. 6.
  5. 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
  6. 13.
  7. 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
  8. 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
  9. 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<HackathonModel>; } … <hackathon-form [hackathon]="currentHackathon" (onSubmitted)="saveHackathon($event)" ></hackathon-form> …
  10. 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); } }
  11. 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<Array<HackathonModel>> { return ...; } }
  12. 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) { } }
  13. 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]); } } <span>{{ model.date | date }}<span>
  14. 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<Response> { return this._http.get(this._url.getEndpoint('hackathons')); } }
  15. 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 });
  16. 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 { }
  17. 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);
  18. 25.
  19. 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
  20. 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
  21. 28.
  22. 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
  23. 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
  24. 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
  25. 33.

    • Christian Weyer • Floor 2.1 • Room 2 •

    2 pm Progressive Web Apps: Das Web wird nativ(er)
  26. 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
  27. 35.