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 Framework versucht als opinionated Framework dieses Problem zu adressieren.

In seinem Vortrag zeigt Max Schulte, was mit dem Ionic Framework und Angular 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
2. Schneller ans Ziel: Web-Apps mit Ionic https://green-water-09fdd2b03.1.azurestaticapps.net/ Session
3. Moderne Anforderungen an Business-Apps Schneller ans Ziel: Web-Apps mit Ionic Session
4. 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
5. Einordnung von Ionic Schneller ans Ziel: Web-Apps mit Ionic Ionic t Java, C++, C#, VB Swing, Qt, XAML Session
6. 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
7. Schneller ans Ziel: Web-Apps mit Ionic UI-Elemente (Auszug) https://ionicframework.com/ Session
8. Ionic als Opinionated-Framework Schneller ans Ziel: Web-Apps mit Ionic https://ionicframework.com/docs Session
9. • 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
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 • Theme-Support mit CSS variablen 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 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
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. 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
18. • 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
19. • 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
20. Schneller ans Ziel: Web-Apps mit Ionic Web Components - Ionic https://ionicframework.com/docs/api/badge Session
21. optional Schneller ans Ziel: Web-Apps mit Ionic AUFGEPASST! Definition Verwendung Session
22. Schneller ans Ziel: Web-Apps mit Ionic Router Animation Session
23. • 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
24. Schneller ans Ziel: Web-Apps mit Ionic Get File Input Hidden DOM Read File & Convert Session
25. Main. Schneller ans Ziel: Web-Apps mit Ionic Capacitor Plugins mit UI benutzten main.ts Verwendung Session
26. • 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
27. 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
28. 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
29. https://www.thinktecture.com/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank