Real Cross-Platform in Action: Angular, Progressive Web Apps, Electron & Cordova

Real Cross-Platform in Action: Angular, Progressive Web Apps, Electron & Cordova

Based on Angular, a Single-Page Application (SPA) framework developed by Google, we’re able to write beautiful and performant web applications based on components. TypeScript supports .NET developers with a C#-like syntax which helps to feel comfortable when entering web application development. But how can we use that knowledge to create real cross-platform applications, which run on any form factor, on any device and on any operating system? Which architecture do we need? Tools like Cordova and Electron enable to us to bring our single code base to mobile and desktop platforms, real .exe, .app & Co! And thanks to the recent developments with Progressive Web Apps we can participate in cool new features like offline availability. In this session Manuel Rauber from Thinkecture shows how you can use Angular as an application platform and how real cross-platform applications can be developed.

GitHub: https://github.com/thinktecture/dotnet-day-ch-2018-angular-demo

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

May 29, 2018
Tweet

Transcript

  1. Real Cross-Platform in Action Angular, Progressive Web Apps, Electron &

    Cordova Manuel Rauber @manuelrauber Consultant
  2. Consultant @ Thinktecture AG manuel.rauber@thinktecture.com @manuelrauber https://manuel-rauber.com Microsoft MVP The

    guy who’s talkin’ Manuel Rauber
  3. Cross-Platform Angular Cordova Electron Progressive Web Apps Deployment Talking Points

  4. Gotta catch’em all! Cross-Platform

  5. Single- vs. Multi- vs. Cross-Platform macOS Linux Windows iOS Windows

    Phone Android BlackBerry 10 FireOS Browser TV … Refrigerator
  6. None
  7. The web as a platform

  8. But it doesn’t look like a native application! Exactly.

  9. https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

  10. http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg

  11. Powered by

  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
  13. Single-Page Applications Angular

  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
  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
  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<HackathonModel>; } … <hackathon-form [hackathon]="currentHackathon" (onSubmitted)="saveHackathon($event)" ></hackathon-form> …
  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()
  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
  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); } }
  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<HackathonModel[]> { return ...; } }
  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) { } }
  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); } } <span>{{ model.date | date }}<span>
  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<Response> { return this._http.get(this._url.getEndpoint('hackathons')); } }
  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 });
  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 { }
  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);
  27. Native mobile applications Cordova

  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
  29. Native desktop applications Electron

  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
  31. BASTA! Spring 2017 macOS iOS Windows Mobile Android Windows Desktop

    Windows 10/UWP Linux Browser
  32. The Application Model of the Future Progressive Web Apps

  33. • 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
  34. “To be on cloud nine” Deployment

  35. • 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
  36. • Modern applications need a modern architecture • Web Technology

    Stack to achieve “real cross-platform” • Build tooling supports daily development and production workflow • Cordova & Electron for native platform integrations • Progressive Web Apps show an interesting future Summary
  37. https://entwickler.de/press/shortcuts/cross-plattform-579811835.html

  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
  39. Thank you! Questions? Repository Contact @manuelrauber manuel.rauber@thinktecture.com https://github.com/thinktecture/dotnet-day-ch-2018-angular-demo