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.

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 [email protected] 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. Ionic t Einordnung von Ionic Workshop Web-Apps schneller entwickeln mit

    Ionic & Angular Java, C++, C#, VB Swing, Qt, XAML
  5. 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
  6. • 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
  7. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS /

    JS Workshop Web-Apps schneller entwickeln mit Ionic & Angular Plattform
  8. • 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
  9. • 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
  10. • 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
  11. 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
  12. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  13. 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
  14. $ 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
  15. 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
  16. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

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

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

    - Ionic https://ionicframework.com/docs/api/badge
  21. 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
  22. • 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
  23. • 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
  24. • 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
  25. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Agenda Einordnung

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  26. • 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
  27. Main. Web-Apps schneller entwickeln mit Ionic & Angular Workshop Capacitor

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

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

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA
  31. 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
  32. 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
  33. • 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
  34. • 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
  35. • 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
  36. 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
  37. 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
  38. Some Storage CODE Workshop Web-Apps schneller entwickeln mit Ionic &

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

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

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

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

    Ionic Ionic Framework (UI) Capacitor Tooling Storage PWA Fazit
  44. • 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 😀 🤔
  45. 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
  46. 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?