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. 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
  2. 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
  3. • 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
  4. • 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
  5. • 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
  6. 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<HackathonModel>; } … <hackathon-form [hackathon]="currentHackathon" (onSubmitted)="saveHackathon($event)" ></hackathon-form> …
  7. 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()
  8. • 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
  9. 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); } }
  10. 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<HackathonModel[]> { return ...; } }
  11. 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) { } }
  12. 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); } } <span>{{ model.date | date }}<span>
  13. 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<Response> { return this._http.get(this._url.getEndpoint('hackathons')); } }
  14. 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 });
  15. 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 { }
  16. 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);
  17. • 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
  18. • 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
  19. Angular: Komponentenbasierte HTML5-Anwendungen für alle BASTA! 2017 BASTA! Spring 2017

    macOS iOS Windows Mobile Android Windows Desktop Windows 10/UWP Linux Browser
  20. • 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
  21. • 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
  22. • 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
  23. “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
  24. • 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