Schneller ans Ziel: Web-Apps mit Ionic Max Schulte @MaxOSchulte Engineer / Consultant

Schneller ans Ziel: Web-Apps mit Ionic https://green-water-09fdd2b03.1.azurestaticapps.net/ Session

Moderne Anforderungen an Business-Apps Schneller ans Ziel: Web-Apps mit Ionic Session

Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic und BabylonJS

Einordnung von Ionic Schneller ans Ziel: Web-Apps mit Ionic Ionic t Java, C++, C#, VB Swing, Qt, XAML Session

Ionic als Opinionated-Framework Schneller ans Ziel: Web-Apps mit Ionic 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 Session

Schneller ans Ziel: Web-Apps mit Ionic UI-Elemente (Auszug) https://ionicframework.com/ Session

Ionic als Opinionated-Framework Schneller ans Ziel: Web-Apps mit Ionic https://ionicframework.com/docs Session

• 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 Schneller ans Ziel: Web-Apps mit Ionic Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption Session

Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Schneller ans Ziel: Web-Apps mit Ionic Plattform Session

• 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 Schneller ans Ziel: Web-Apps mit Ionic Session

• 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 Schneller ans Ziel: Web-Apps mit Ionic Session

• 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 Schneller ans Ziel: Web-Apps mit Ionic Session

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 Schneller ans Ziel: Web-Apps mit Ionic Session

CLI Tooling Schneller ans Ziel: Web-Apps mit Ionic 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 Session

$ npx ionic capacitor run ios –l --external “Serve & Run” die App auf verfügbaren Plattformen mit Live-Reload Schneller ans Ziel: Web-Apps mit Ionic Session

iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE Schneller ans Ziel: Web-Apps mit Ionic Debugging Session

• 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/ Schneller ans Ziel: Web-Apps mit Ionic Web Components Session

• 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 Schneller ans Ziel: Web-Apps mit Ionic Web Components - Ionic Session

Schneller ans Ziel: Web-Apps mit Ionic Web Components - Ionic https://ionicframework.com/docs/api/badge Session

optional Schneller ans Ziel: Web-Apps mit Ionic AUFGEPASST! Definition Verwendung Session

Schneller ans Ziel: Web-Apps mit Ionic Router Animation Session

• Einheitliche API für diverse Plattformen • Keine Abhängigkeiten zu Ionic (außer UI Elemente) • Teilweise mit UI (Web Components) Schneller ans Ziel: Web-Apps mit Ionic Capacitor Plugins Session

Schneller ans Ziel: Web-Apps mit Ionic Get File Input Hidden DOM Read File & Convert Session

Main. Schneller ans Ziel: Web-Apps mit Ionic Capacitor Plugins mit UI benutzten main.ts Verwendung Session

• 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 Schneller ans Ziel: Web-Apps mit Ionic • Custom-Design Look-And-Feel • High-Performance Apps – grafikintensiv • Perfekte Desktopanwendung • Komplexe Navigation ! ! Session

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 Schneller ans Ziel: Web-Apps mit Ionic Session

Als eine Alternative und Ergänzung zu anderen Frameworks mit dem Vorteil der Framework Agnostik und Web-Components. Schneller ans Ziel: Web-Apps mit Ionic Wie hilft Ionic und Capacitor? Session

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