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. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? Max Schulte @MaxOSchulte Engineer / Consultant
2. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? Good to know… Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS
3. Moderne Anforderungen an Business-Apps Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
4. Ionic t Einordnung von Ionic Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Java, C++, C#, VB Swing, Qt, XAML
5. Ionic als Opinionated-Framework Auf Schienen 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
6. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? UI-Elemente (Auszug) https://ionicframework.com/
7. Ionic als Opinionated-Framework Auf Schienen schneller ans Ziel? Web-Apps mit Ionic https://ionicframework.com/docs
8. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic https://jolly-coast-018f46b03.azurestaticapps.net
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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Open Source Enterprise § Premium Plugins (e.g. Offline Storage) § Appflow § Support § Encryption
10. Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Plattform
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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
15. CLI Tooling Auf Schienen 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
16. $ npx ionic capacitor run ios –l --external “Serve & Run” die App auf verfügbaren Plattformen mit Live-Reload Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
17. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic AUFGEPASST! Definition Verwendung
18. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Get File Input Hidden DOM Read File & Convert
19. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic main.ts Verwendung picture.service.ts
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 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic § Custom-Design Look-And-Feel § High-Performance Apps – grafikintensiv § Perfekte Desktopanwendung § Komplexe Navigation 😀 🤔
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 § Deployment / Testing § Testing § Access Rights & Permissions Auf Schienen schneller ans Ziel? Web-Apps mit Ionic
22. Web-Apps mit Ionic Auf Schienen schneller ans Ziel? https://www.thinktecture.com/de/cheatsheet/ionic/
23. Capacitorjs v3 Auf Schienen schneller ans Ziel? Web-Apps mit Ionic § Einfachere Plugin-Imports § Plugins als eigene NPM-Packages § Plugin Schnittstelle für Permissions § Ein neuer “npx cap run” befehl § Config in TS & Env. Variables § Besserer CLI Output
24. Ja, durch fertige Komponenten und einen schlüssigen Workflow, wenn man bereit ist auf Freiheiten zu verzichten - mit neuster, zukunftssicherer Technologie. Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Kommt man wirklich schneller ans Ziel?
25. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank