Angular Talk - Compiler, PWA, Universal, Electron

Dies ist ein Vortrag der einen Überblick gibt, wie Angular auf verschiedenen Zielsystemen zur Verfügung gestellt werden kann.

Transcript

1. Gregor Woiwode Front-End Engineer Talk … mein Ziel
2. Wir kämpfen uns durch den Dschungel. SCRIPTS TEMPLATES STYLES INFRASTRUKTUR PRODUKT
3. Wir kämpfen uns durch den Dschungel. SCRIPTS TEMPLATES STYLES
4. Wir kämpfen uns durch den Dschungel. INFRASTRUKTUR
5. Ohne Component Based UI Keine einheitlichen APIs ! Keine Austauschbarkeit ! Keine unmittelbaren Werkzeuge !
6. „Und was nun?“
7. Wenn Komponenten zu uns sprechen… <fb-state-box message="I am happy to be here." location="Berlin" on-sent="post()"/> Die Komponente ist die Abstraktion eines Templates. “
8. Component Based UI PRODUKT PRODUKT
9. Hallo Angular
10. Wieso Angular? Erstellung wiederverwendbarer Webkomponenten Orchestrierung zahlreicher Webkomponenten Tooling & Integration in die IDE Gut gepflegte Dokumentation auf https://angular.io Eine hilfsbereite Community
11. Angular & Friends
12. ES2015 Module // models/book.ts export class Book { } // enum // interface // function Jede Datei ist ein Modul. “ // components/book.component.ts import { Book } from '../models/book'; lädt
13. Decorators - Klassen erweitern In ES5 sind Decorators leicht erklärt. “ function Decorator(target) { target.decorated = true; } function Component() { } Decorator(Component); console.log(Component.decorated) // -> true
14. Decorators - ES2015 ES2015 führt das @ als Kurzschreibweise ein. “ function Decorator(target) { target.decorated = true; } @Decorator class Component() { } console.log(Component.decorated) // -> true
15. Decorators - Parametrisierung mit HOF Decorators lassen sich parametrisieren. “ function Decorator(isDecorated) { return function (target) { target.decorated = isDecorated; } } @Decorator(true) class Component() { } console.log(Component.decorated) // -> true
16. -CLI Erzeugt Projektstruktur Code-Generation Erzeugt Code-Coverage-Report Bietet Development-Workflow an Stellt Test-Setup zur Verfügung Development Server Build-Process https://cli.angular.io/
17. Demo Referenzanwendung
18. Compiler
19. Motivation Performance Optimierungen durchführen Bundlesize reduzieren Fehleranalysen durchführen
20. Aufgaben des Compilers Parse Instantiate Inputs
21. Just in Time - Prozess
22. Ahead of Time - Prozess
23. Schnelleres Rendering Weniger asynchrone Requests Vorteile von AoT Reduktion der Größe des -Frameworks Weniger Fehler in Templates Höhere Sicherheit
24. COMPONENT Weniger Fehler in Templates createNewBook(form: NgForm) { this.create.emit(Object.assign({}, this.book)); form.reset(); } <form #bookForm="ngForm" (ngSubmit)="createNewBook(title, authors)"> <!-- formular --> </form> AoT schlägt fehl
25. Demo Source-Map-Explorer ± npm i -g source-map-explorer
26. Progressive Web Apps
27. Motivation HTML5 App Native App
28. manifest.json { // Required "manifest_version": 2, "name": "My Extension", "version": "versionString", // Recommended "default_locale": "en", "description": "A plain text description", "icons": {...}, // ... } https://developer.chrome.com/extensions/manifest “
29. Angular Service Worker Service Worker APIs Assets http://localhost/books Proxy
30. Angular Service Worker ± yarn add @angular/service-worker Der nächste Schritt “
31. { "dynamic": { "group": [ "urls": { "https://www.googleapis.com": { "match": "prefix" } } ] }, "static": { "urls": { "/index.html": "...f03aea9", // ... } } ngsw-manifest.json APIs Assets Eigenes Manifest “
32. Erfahrung sammeln Demo ± yarn add -D ng-pwa-tools
33. Universal
34. Motivation Bessere Performance SEO Gutes Cache verhalten
35. Die Idee Web Server http://localhost/books HTML prerender Boot
36. Erfahrung sammeln Demo ± yarn add @angular/platform-server
37. Fazit Schneller Einstieg Probleme im Detail (siehe Routing) Integration mit Service Worker bisher nicht gelungen https://github.com/angular/universal-starter - Weiter forschen
38. Electron
39. Motivation Einschränkung der Browser im Unternehmen Zugriff auf OS via Electron-API Routinen für Setup, Update & Uninstall
40. Erfahrung sammeln Demo ± yarn add electron electron-packager
41. Backup Kaum Code-Changes für Server-Side-Rendering oder Electron Komplexität im Build-Prozess nimmt zu Das Tooling ist noch experimentell Dokumentation gibt es in Form von Blog-Artikeln und Repos
42. Gregor Woiwode Front-End Engineer Vielen Dank @GregOnNet gw@co-it.eu https://goo.gl/p7mHF7 Demo