Schneller ans Ziel: Web-Apps mit Ionic

Webanwendungen können mitunter komplex werden. Täglich gibt es neue Anforderungen und am besten soll die App auch noch Cross-Platform verfügbar sein. Und natürlich darf die Entwicklung nicht zu lange dauern. Ionic versucht als opinionated Framework dieses Problem zu adressieren. In seinem Vortrag zeigt Max Schulte, was mit Ionic als SPA-Framework möglich ist und wie es dank seiner Tools, Production-Ready-Komponenten und APIs das Entwicklerleben für gewisse Anwendungsszenarien erleichtern kann.

Transcript

1. Schneller ans Ziel Web-Apps mit Ionic Max Schulte @MaxOSchulte Engineer / Consultant Session
2. Moderne Anforderungen an Business-Apps Schneller ans Ziel: Web-Apps mit Ionic Session
3. Ionic t Einordnung von Ionic Schneller ans Ziel: Web-Apps mit Ionic Java, C++, C#, VB Swing, Qt, XAML Session
4. 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
5. Schneller ans Ziel: Web-Apps mit Ionic UI-Elemente (Auszug) https://ionicframework.com/ Session
6. Ionic als Opinionated-Framework Schneller ans Ziel: Web-Apps mit Ionic https://ionicframework.com/docs Session
7. Schneller ans Ziel: Web-Apps mit Ionic https://jolly-coast-018f46b03.azurestaticapps.net Session
8. • 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
9. Open Source Community In den letzten 30 Tagen @ionic/core npm Installationen in 24 Monaten https://npm-stat.com/charts.html?package=%40ionic%2Fcore&from=2018-06-04&to=2021-01-31 https://github.com/ionic-team/ionic/pulse/monthly Schneller ans Ziel: Web-Apps mit Ionic Session
10. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Schneller ans Ziel: Web-Apps mit Ionic Plattform Session
11. • Web Components (Stencil) • Android- / iOS-like Look-And-Feel • Optimiert für mobile Plattformen UI-Elemente-Schicht UI (Ionic) HTML / CSS / JS WebView Capacitor Schneller ans Ziel: Web-Apps mit Ionic Session
12. • 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
13. • 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
14. 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
15. 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 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
16. $ 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
17. Schneller ans Ziel: Web-Apps mit Ionic 2. Eine Navigationsdefinition mehrfach verwenden 1. Navigation definieren Aufgepasst Session
18. Schneller ans Ziel: Web-Apps mit Ionic 1.. Definiere Input- Element und Trigger (Template) 2. Beziehe Bild- Input 3. Convertiere Bild-Input zu Base64 String Session
19. Schneller ans Ziel: Web-Apps mit Ionic Session
20. • 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 Schneller ans Ziel: Web-Apps mit Ionic • Custom-Design Look-And-Feel • High-Performance Apps – grafikintensiv • Perfekte Desktopanwendung • Komplexe Navigation 😀 🤔 Session
21. 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
22. Schneller ans Ziel: Web-Apps mit Ionic Session https://www.thinktecture.com/de/cheatsheet/ionic
23. Ja, durch fertige Komponenten und einen schlüssigen Workflow, wenn man bereit ist auf Freiheiten zu verzichten - mit neuster, zukunftssicherer Technologie. Schneller ans Ziel: Web-Apps mit Ionic Kommt man wirklich schneller ans Ziel? Session
24. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank