Web-Apps mit Ionic Auf Schienen schneller ans Ziel? Max Schulte @MaxOSchulte Engineer / Consultant 

Web-Apps mit Ionic Auf Schienen schneller ans Ziel? Good to know… Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 

Moderne Anforderungen an Business-Apps Auf Schienen schneller ans Ziel? Web-Apps mit Ionic 

Ionic t Einordnung von Ionic Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Java, C++, C#, VB Swing, Qt, XAML 

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 

Web-Apps mit Ionic Auf Schienen schneller ans Ziel? UI-Elemente (Auszug) https://ionicframework.com/ 

Ionic als Opinionated-Framework Auf Schienen schneller ans Ziel? Web-Apps mit Ionic https://ionicframework.com/docs 

Auf Schienen schneller ans Ziel? Web-Apps mit Ionic https://jolly-coast-018f46b03.azurestaticapps.net 

§ 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 

Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Plattform 

§ 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 

§ 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 

§ 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 

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 

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 

$ 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 

Auf Schienen schneller ans Ziel? Web-Apps mit Ionic AUFGEPASST! Definition Verwendung 

Auf Schienen schneller ans Ziel? Web-Apps mit Ionic Get File Input Hidden DOM Read File & Convert 

Auf Schienen schneller ans Ziel? Web-Apps mit Ionic main.ts Verwendung picture.service.ts 

§ 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 😀 🤔 

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 

Web-Apps mit Ionic Auf Schienen schneller ans Ziel? https://www.thinktecture.com/de/cheatsheet/ionic/ 

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 

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? 

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