Angular & Ionic Cross-Plattform aus einer Hand Max Schulte @MaxOSchulte Engineer / Consultant

The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. Special Day Cross-Plattform Applications Thema Sprecher Datum, Uhrzeit Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung Andreas Wissel DO, 23. September 2021, 09.15 bis 10.15 Realtime Cross-Plattform-Applikationen mit Angular, ASP.NET Core und SignalR Fabian Gosebrink DO, 23. September 2021, 10.45 bis 11.45 Angular & Ionic – Cross-Plattform aus einer Hand Max Schulte DO, 23. September 2021, 12.15 bis 13.15 Electron.NET – Neue Features, Tipps und Tricks Gregor Biswanger DO, 23. September 2021, 15.30 bis 16.30 Electron, Capacitor, PWA – was, wann, wie & warum? Christian Liebel DO, 23. September 2021, 17.00 bis 18.00

Good to know… Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic / Capacitor and BabylonJS Angular & Ionic Cross-Plattform aus einer Hand

Moderne Anforderungen an Business-Apps Cross-Plattform aus einer Hand Angular & Ionic

Ionic t Einordnung von Ionic Cross-Plattform aus einer Hand Angular & Ionic Java, C++, C#, VB Swing, Qt, XAML

Ionic als Opinionated-Framework Cross-Plattform aus einer Hand Angular & 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

Angular & Ionic Cross-Plattform aus einer Hand UI-Elemente (Auszug) https://ionicframework.com/

Ionic als Opinionated-Framework Cross-Plattform aus einer Hand Angular & Ionic https://ionicframework.com/docs

Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & Ionic Open Source Enterprise § Premium Plugins (e.g. Offline Storage) § Appflow § Support § Encryption

Ionic Architekturschichten WebView Capacitor UI (Ionic) HTML / CSS / JS Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & Ionic

CLI Tooling Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & Ionic

Cross-Plattform aus einer Hand Angular & Ionic AUFGEPASST! Definition Verwendung

Cross-Plattform aus einer Hand Angular & Ionic Get File Input Hidden DOM Read File & Convert

Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & 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 Cross-Plattform aus einer Hand Angular & Ionic

Angular & Ionic Cross-Plattform aus einer Hand https://www.thinktecture.com/de/cheatsheet/ionic/

Capacitorjs v3 Cross-Plattform aus einer Hand Angular & 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. Cross-Plattform aus einer Hand Angular & Ionic Kommt man wirklich schneller ans Ziel?

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