Web-Apps schneller entwickeln mit Ionic & Angular

by Max Schulte

Slide 1

Slide 1 text

Web-Apps schneller entwickeln mit Ionic & Angular Max Schulte @MaxOSchulte Engineer / Consultant

Slide 2

Slide 2 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Timeline 9:00 – 10:30 Teil I 10:30 – 11:00 Pause 11:00 – 12:30 Teil II

Slide 3

Slide 3 text

Web-Apps schneller entwickeln mit Ionic & Angular Good to know… Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic und BabylonJS Workshop

Slide 4

Slide 4 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA

Slide 5

Slide 5 text

Moderne Anforderungen an Business-Apps Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 6

Slide 6 text

Ionic t Einordnung von Ionic Workshop Web-Apps schneller entwickeln mit Ionic & Angular Java, C++, C#, VB Swing, Qt, XAML

Slide 7

Slide 7 text

Ionic als Opinionated-Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular Möglichkeiten Gefahren Leitplanken als ein “Feature” Nicht jede UI-Idee darstellbar Ready-To-Use Features Frameworkbeschränkung Vorgefertigte UI-Components Bestehender Code kann mit Framework-Funktionsweise kollidieren Zukunftssicher durch Web Components Tradeoff: Komplexität vs. Flexibilität

Slide 8

Slide 8 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop UI-Elemente (Auszug) https://ionicframework.com/

Slide 9

Slide 9 text

Ionic als Opinionated-Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://ionicframework.com/docs

Slide 10

Slide 10 text

Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://jolly-coast-018f46b03.azurestaticapps.net

Slide 11

Slide 11 text

• Open Source Cross-Plattform Framework • Production-Ready • Tooling für Entwicklung und Produktion • Capacitor (und Cordova und Electron) als Plattform-Bridge • Enterprise & Community Plugins für Capacitor and Cordova Ionic Framework Workshop Web-Apps schneller entwickeln mit Ionic & Angular Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption

Slide 12

Slide 12 text

Open Source Community In den letzten 30 Tagen @ionic/core npm Installierungen in 26 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2020-08-31 https://github.com/ionic-team/ionic/pulse/monthly Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 13

Slide 13 text

Open Source Community In den letzten 30 Tagen @capacitor/core npm installs in 26 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2020-05-30 https://github.com/ionic-team/capacitor/pulse/monthly Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 14

Slide 14 text

Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular Plattform

Slide 15

Slide 15 text

• Web Components (Stencil) • Android- / iOS-like Look-And-Feel • Optimiert für mobile Plattformen • Theme-Support mit CSS variablen UI-Elemente-Schicht UI (Ionic) HTML / CSS / JS WebView Capacitor Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 16

Slide 16 text

• iOS: WKWebView • Android: Chromium-based WebView for Android • Darstellung der Webinhalte in Apps • In App optimierter HTTPS-Server für App-Files • PWAs werden nicht in einer WebView dargestellt WebView-Schicht WebView Capacitor UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 17

Slide 17 text

• Bridge zu Plattform-Features • Toast & Camera für PWAs • Camera, Fingerprint, Storage • Eine API für alle Plattformen • Unterstützt Cordova Plugins • CLI Tooling lokal oder per npx • Auch standalone nutzbar Capacitor-Schicht Capacitor WebVIew UI (Ionic) HTML / CSS / JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 18

Slide 18 text

Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-fokussiert Capacitor vs Cordova Capacitor • Higher-Level-APIs • Plattform-Bridge • Direkte Nutzung der APIs mit fertigen Plugins • Löst Codova ab • Unterstützt Cordova-Plugins Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 19

Slide 19 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA

Slide 20

Slide 20 text

CLI Tooling Workshop Web-Apps schneller entwickeln mit Ionic & Angular Befehl Beschreibung npx ionic start Ein neuen Projekt anlegen - interaktiv npx ionic generate Eine Component / Page etc. generieren npx ionic capacitor add platform Eine Plattform hinzufügen (ios, android, electron) npx ionic capacitor run platform -l -- external Dev Server und Anwendung starten mit Live- Reload npm install some-plugin Installiere ein Plugin e.g. von Cordova npx cap update Update Capacitor – berücksichtigt neue Plugins npx cap copy Kopiere die die Sourcen in die Plattform npx cap sync Cap Update + Cap Sync

Slide 21

Slide 21 text

$ npx ionic capacitor run ios –l --external “Serve & Run” die App auf verfügbaren Plattformen mit Live-Reload Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 22

Slide 22 text

iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE Web-Apps schneller entwickeln mit Ionic & Angular Workshop Debugging

Slide 23

Slide 23 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA

Slide 24

Slide 24 text

• Shadow DOM • Custom Elements API window.customElements.define('my-element', MyElementClass) • HTML Templates • Slots: Ein slot-Tag gibt einem die Möglichkeit, Elemente aus dem Template zu ersetzten (ähnlich wie ng-content • CSS Parts: CSS Styling, welches von außen gesetzt werden kann, um dem Nutzer eine gewisse Möglichkeit zu geben die Component anzupassen https://www.thinktecture.com/de/articles/web-components/ https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/ Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components

Slide 25

Slide 25 text

• Ionic Components fast wie normale Angular-Components • Proxies - Anuglar Wrapper um Web-Components • Dokumentation genau lesen https://github.com/ionic-team/ionic-framework/blob/master/angular/src/directives/proxies.ts Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic

Slide 26

Slide 26 text

Workshop Web-Apps schneller entwickeln mit Ionic & Angular AUFGEPASST! Definition Verwendung

Slide 27

Slide 27 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic https://ionicframework.com/docs/api/badge

Slide 28

Slide 28 text

Shadow Dom • Internes CSS nicht überschreibbar • Liest CSS-Variablen aus • Nimmt keinen einfluss auf externen Style Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Ionic Component Scoped • CSS überschreibbar mit specifiziertem Selektor • Liest CSS-Variablen aus • Kann externen Style beeinflussen und davon beinflusst werden

Slide 29

Slide 29 text

• CSS Custom Properties & CSS Variables • :root als EntryPoint • Component Attributes • CSS Parts • Global CSS Variablen Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components - Theming

Slide 30

Slide 30 text

Workshop Web-Apps schneller entwickeln mit Ionic & Angular Component Theming & Anpassung

Slide 31

Slide 31 text

• Seiten bleiben im DOM, ”versteckt” • OnInit & OnDestroy anders als “erwartet” • State und Data bleiben über Navigation hinweg • Scroll-Position bleibt erhalten • Router Animations • Seiten können mit UI, programmatisch und via “zurück“ Navigation vom DOM entfernt werden Web-Apps schneller entwickeln mit Ionic & Angular Workshop Ionic Routing

Slide 32

Slide 32 text

Workshop Web-Apps schneller entwickeln mit Ionic & Angular Router Animation

Slide 33

Slide 33 text

• Ionic fügt einer Seite neue Events & Callbacks hinzu • Ausgleich für abgeändertes verhalten von OnInit & OnDestroy • ionViewWillEnter • ionViewDidEnter • ionViewWillLeave • ionViewDidLeave Web-Apps schneller entwickeln mit Ionic & Angular Workshop Ionic Page Events

Slide 34

Slide 34 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA

Slide 35

Slide 35 text

• Einheitliche API für diverse Plattformen • Keine Abhängigkeiten zu Ionic (außer UI Elemente) • Teilweise mit UI (Web Components) Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor Plugins

Slide 36

Slide 36 text

Workshop Web-Apps schneller entwickeln mit Ionic & Angular Get File Input Hidden DOM Read File & Convert

Slide 37

Slide 37 text

Main. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor Plugins mit UI benutzten main.ts Verwendung

Slide 38

Slide 38 text

$ npm install cordova-plugin-fingerprint-aio $ npm install @ionic-native/fingerprint-aio $ ionic cap sync Web-Apps schneller entwickeln mit Ionic & Angular Workshop Ionic Native Plugins installieren

Slide 39

Slide 39 text

COD Workshop Web-Apps schneller entwickeln mit Ionic & Angular Ionic Native Plugins nutzen

Slide 40

Slide 40 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA

Slide 41

Slide 41 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Offline Storage Varianten für Web-Apps Local Storage (& Session Storage) IndexedDB Coockie Web SQL (Application Cache) (File System) ( Native File System API – Project Fugu) Hybrid-App: SQLite

Slide 42

Slide 42 text

const { quota, usage } = await navigator.storage.estimate(); • Angaben sind nur Schätzwerte • Schätzung erschwert Fingerprinting • Kompression, De-Duplication und andere Einflüsse auf die ”physische Größe” • Konservative Schätzung verhindert Datenverlust • Prüft Cache, Cookies, File System (Browser provided & sandboxed), IndexedDB • Error: QuotaExceededError • Nicht im Safari Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Quota

Slide 43

Slide 43 text

• Chrome: 60% des freien Festplatten-Speicherplatz • Chromium-based können abweichen • Internet Explorer > 10: 250MB + User-Prompt nach 10 MB • Firefox: 50% des freien Speicherplatz, weitere Einschränkung Gruppenlimit 2GB • (Not Official: Safari Desktop & Mobile: 1GB + User-Prompt für mehr Kapazität) Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Quota

Slide 44

Slide 44 text

• Schafft Speicherplatz • Löscht alle gespeicherten Ressourcen zu einer Quelle (Full Qualified Domain Name) • Firefox und Chromium-Based löschen nach dem LRU – Last Recently Used - Prinzip • https://developer.mozilla.org/de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_ eviction_criteria • https://developer.chrome.com/apps/offline_storage Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Eviction

Slide 45

Slide 45 text

• Chromium-Based Browser & Firefox löschen bis die Nutzung unter dem Limit ist • Safari löscht nach 7 Tagen Inaktivität auf der Ursprungsseite (nicht iOS Home Screen Apps) • https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/ Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Eviction

Slide 46

Slide 46 text

navigator.storage.persist(); navigator.storage.persisted(); • Persistiert sonst temporären Storage (nicht iOS, nicht iPadOS, Safari) • https://developer.mozilla.org/en-US/docs/Web/API/Storage_API • https://developer.chrome.com/apps/offline_storage#persistent Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Persist

Slide 47

Slide 47 text

navigator.permissions.query({name: "persistent-storage"}) • Nur im Secure-Context (HTTPS) • Benötigt Nutzererlaubnis und Interaktion • Kann nicht deaktiviert werden Web-Apps schneller entwickeln mit Ionic & Angular Workshop Storage Persist Permission

Slide 48

Slide 48 text

Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://storage.spec.whatwg.org/#example-3a7051a8 Persistent Storage Permission prompt

Slide 49

Slide 49 text

Some Storage CODE Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 50

Slide 50 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA

Slide 51

Slide 51 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive

Slide 52

Slide 52 text

PWA - Service Worker Service Worker Internet Website HTML/JS Cache fetch Web-Apps schneller entwickeln mit Ionic & Angular Workshop

Slide 53

Slide 53 text

manifest.webmanifest { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } PWA - Web App Manifest Title Icons Start URL Display Type Age Rating Additional Config Description Related Apps Web-Apps schneller entwickeln mit Ionic & Angular Workshop

Slide 54

Slide 54 text

Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA Fazit

Slide 55

Slide 55 text

• Datengetriebene Anwendungen • Schnelle Entwicklung mit fertigen Komponenten • Corporate-Identity mittels Theming • Native-like Look-and-Feel (Android & iOS) • Eine Basis für alle Plattformen • Integration / Erweiterung bestehendender Anwendungen mit Capacitor & Ionic Framework • Angular-CLI Schematics Einsatzszenarien für Ionic Workshop Web-Apps schneller entwickeln mit Ionic & Angular • Custom-Design Look-And-Feel • High-Performance Apps – grafikintensiv • Perfekte Desktopanwendung • Komplexe Navigation

Slide 56

Slide 56 text

Ungelöste Herausforderungen • SDK Management • Gerätevielfalt • Kotlin / Java Cross-Plattform • macOS notwendig • Swift / Objective-C • Besondere Features (3D Touch, Radar) • Play Store & App Store Access • Vendor Policies • Testing • Deployment / Testing • Access Rights & Permissions Workshop Web-Apps schneller entwickeln mit Ionic & Angular

Slide 57

Slide 57 text

Als eine Alternative und Ergänzung zu anderen Frameworks mit dem Vorteil der Framework Agnostik und Web-Components. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Wie hilft Ionic und Capacitor?

Slide 58

Slide 58 text

https://www.thinktecture.com/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank

Slide 59

Slide 59 text

Capacitor 3.0 (Announced) • Plugins ES2017 / ES8 (Vorher ES5) • Plugin Imports • Entfernt Permissions und Photos Plugin • Dynamic-Capacitor-Configs • CLI Release-Builds https://github.com/ionic-team/capacitor/issues/3133 Workshop Web-Apps schneller entwickeln mit Ionic & Angular