Angular Talk - Compiler, PWA, Universal, Electron

Slide 1

Slide 1 text

Gregor Woiwode Front-End Engineer Talk … mein Ziel

Slide 2

Slide 2 text

Wir kämpfen uns durch den Dschungel. SCRIPTS TEMPLATES STYLES INFRASTRUKTUR PRODUKT

Slide 3

Slide 3 text

Wir kämpfen uns durch den Dschungel. SCRIPTS TEMPLATES STYLES

Slide 4

Slide 4 text

Wir kämpfen uns durch den Dschungel. INFRASTRUKTUR

Slide 5

Slide 5 text

Ohne Component Based UI Keine einheitlichen APIs ! Keine Austauschbarkeit ! Keine unmittelbaren Werkzeuge !

Slide 6

Slide 6 text

„Und was nun?“

Slide 7

Slide 7 text

Wenn Komponenten zu uns sprechen… Die Komponente ist die Abstraktion eines Templates. “

Slide 8

Slide 8 text

Component Based UI PRODUKT PRODUKT

Slide 9

Slide 9 text

Hallo Angular

Slide 10

Slide 10 text

Wieso Angular? Erstellung wiederverwendbarer Webkomponenten Orchestrierung zahlreicher Webkomponenten Tooling & Integration in die IDE Gut gepflegte Dokumentation auf https://angular.io Eine hilfsbereite Community

Slide 11

Slide 11 text

Angular & Friends

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Decorators - ES2015 ES2015 führt das @ als Kurzschreibweise ein. “ function Decorator(target) { target.decorated = true; } @Decorator class Component() { } console.log(Component.decorated) // -> true

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

-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/

Slide 17

Slide 17 text

Demo Referenzanwendung

Slide 18

Slide 18 text

Compiler

Slide 19

Slide 19 text

Motivation Performance Optimierungen durchführen Bundlesize reduzieren Fehleranalysen durchführen

Slide 20

Slide 20 text

Aufgaben des Compilers Parse Instantiate Inputs

Slide 21

Slide 21 text

Just in Time - Prozess

Slide 22

Slide 22 text

Ahead of Time - Prozess

Slide 23

Slide 23 text

Schnelleres Rendering Weniger asynchrone Requests Vorteile von AoT Reduktion der Größe des -Frameworks Weniger Fehler in Templates Höhere Sicherheit

Slide 24

Slide 24 text

COMPONENT Weniger Fehler in Templates createNewBook(form: NgForm) { this.create.emit(Object.assign({}, this.book)); form.reset(); } AoT schlägt fehl

Slide 25

Slide 25 text

Demo Source-Map-Explorer ± npm i -g source-map-explorer

Slide 26

Slide 26 text

Progressive Web Apps

Slide 27

Slide 27 text

Motivation HTML5 App Native App

Slide 28

Slide 28 text

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 “

Slide 29

Slide 29 text

Angular Service Worker Service Worker APIs Assets http://localhost/books Proxy

Slide 30

Slide 30 text

Angular Service Worker ± yarn add @angular/service-worker Der nächste Schritt “

Slide 31

Slide 31 text

{ "dynamic": { "group": [ "urls": { "https://www.googleapis.com": { "match": "prefix" } } ] }, "static": { "urls": { "/index.html": "...f03aea9", // ... } } ngsw-manifest.json APIs Assets Eigenes Manifest “

Slide 32

Slide 32 text

Erfahrung sammeln Demo ± yarn add -D ng-pwa-tools

Slide 33

Slide 33 text

Universal

Slide 34

Slide 34 text

Motivation Bessere Performance SEO Gutes Cache verhalten

Slide 35

Slide 35 text

Die Idee Web Server http://localhost/books HTML prerender Boot

Slide 36

Slide 36 text

Erfahrung sammeln Demo ± yarn add @angular/platform-server

Slide 37

Slide 37 text

Fazit Schneller Einstieg Probleme im Detail (siehe Routing) Integration mit Service Worker bisher nicht gelungen https://github.com/angular/universal-starter - Weiter forschen

Slide 38

Slide 38 text

Electron

Slide 39

Slide 39 text

Motivation Einschränkung der Browser im Unternehmen Zugriff auf OS via Electron-API Routinen für Setup, Update & Uninstall

Slide 40

Slide 40 text

Erfahrung sammeln Demo ± yarn add electron electron-packager

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Gregor Woiwode Front-End Engineer Vielen Dank @GregOnNet [email protected] https://goo.gl/p7mHF7 Demo