Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web-Apps schneller entwickeln mit Ionic (Hands on workshop)

Web-Apps schneller entwickeln mit Ionic (Hands on workshop)

Webanwendungen werden schnell komplex. Neben den rapide wechselnden Anforderungen soll die App installierbar, performant und einfach zu warten sein – und die Entwicklungszeit ist kosteneffektiv knapp bestimmt. Genau diese und andere Herausforderungen versucht Ionic als Opinionated-Framework zu adressieren.

In diesem Workshop zeigt Max Schulte, was mit Ionic und Angluar möglich ist und wie Ionic dank seiner Tools, "Production Ready"-Komponenten und APIs das Entwicklerleben für gewisse Anwendungsszenarien erleichtern kann. Als Teilnehmer werden sie selbst Kernkomponenten umsetzten und Anpassungen vornehmen.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

October 07, 2021
Tweet

More Decks by Max Schulte

Other Decks in Programming

Transcript

  1. Web-Apps schneller entwickeln mit Ionic & Angular Hands on! Max

    Schulte @MaxOSchulte Engineer / Consultant
  2. Web-Apps schneller entwickeln mit Ionic & Angular Good to know…

    Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic und BabylonJS Workshop
  3. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  4. Moderne Anforderungen an Business-Apps Workshop Web-Apps schneller entwickeln mit Ionic

    & Angular
  5. Ionic t Einordnung von Ionic Workshop Web-Apps schneller entwickeln mit

    Ionic & Angular Java, C++, C#, VB Swing, Qt, XAML
  6. 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
  7. Web-Apps schneller entwickeln mit Ionic & Angular Workshop UI-Elemente (Auszug)

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

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

  10. • 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
  11. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS /

    JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular Plattform
  12. • 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
  13. • 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
  14. • 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
  15. 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
  16. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  17. 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
  18. $ 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
  19. 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
  20. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  21. • 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
  22. • 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
  23. optional Workshop Web-Apps schneller entwickeln mit Ionic & Angular AUFGEPASST!

    Definition Verwendung LAB #1 workshop/lab1 tabbed.page.html
  24. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Web Components

    - Ionic https://ionicframework.com/docs/api/badge
  25. 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
  26. • 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
  27. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Component Theming

    & Anpassung LAB #2 workshop/lab2
  28. • 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
  29. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Router Animation

    LAB #3 workshop/lab3 custom.animation.ts
  30. • 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
  31. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  32. • 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
  33. Workshop Web-Apps schneller entwickeln mit Ionic & Angular Get File

    Input Hidden DOM Read File & Convert
  34. Main. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor

    Plugins mit UI benutzten main.ts Verwendung LAB #4 workshop/lab4 picture.service.ts
  35. $ 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
  36. COD Workshop Web-Apps schneller entwickeln mit Ionic & Angular Ionic

    Native Plugins nutzen Verwendung LAB #5 workshop/lab5 auth.service.ts
  37. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  38. 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
  39. 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
  40. • 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
  41. • 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
  42. • 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
  43. navigator.storage.persist(); navigator.storage.persisted(); • Persistiert sonst temporären Storage (nicht iOS, iPadOS

    und 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
  44. 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
  45. Workshop Web-Apps schneller entwickeln mit Ionic & Angular https://storage.spec.whatwg.org/#example-3a7051a8 Persistent

    Storage Permission prompt
  46. Some Storage CODE Workshop Web-Apps schneller entwickeln mit Ionic &

    Angular IndexedDB mit Dexie.js LAB #6 workshop/lab6 picture-index-db.store.ts
  47. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  48. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Responsive Linkable

    Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  49. PWA - Service Worker Service Worker Internet Website HTML/JS Cache

    fetch Web-Apps schneller entwickeln mit Ionic & Angular Workshop
  50. 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
  51. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA Fazit
  52. • 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 😀 🤔
  53. 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
  54. 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?
  55. https://www.thinktecture.com/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank