Cross-Platform mit Capacitor und deiner Web-App

by Max Schulte

Slide 1

Slide 1 text

Cross-Platform mit Capacitor und deiner Web-App Max Marschall @MaxOSchulte Consultant

Slide 2

Slide 2 text

enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 3

Slide 3 text

Cross-Platform mit Capacitor und deiner Web-App enterJS ➡

Slide 4

Slide 4 text

Max Marschall [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und Engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic / Capacitor und Babylon.js enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 5

Slide 5 text

Ionic Capacitor & Hybrid-Apps enterJS Java, C++, C#, VB Swing, Qt, XAML Cross-Platform mit Capacitor und deiner Web-App

Slide 6

Slide 6 text

Ionic Capacitor & Hybrid-Apps enterJS Java, C++, C#, VB Swing, Qt, XAML Cross-Platform mit Capacitor und deiner Web-App

Slide 7

Slide 7 text

Ionic Capacitor & Hybrid-Apps enterJS Ionic t Java, C++, C#, VB Swing, Qt, XAML Cross-Platform mit Capacitor und deiner Web-App

Slide 8

Slide 8 text

Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-Focused Capacitor vs Cordova Capacitor • Higher-Level-APIs • Plattform-Bridge • Includes commonly used plugins • Supports Cordova-Plugins enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 9

Slide 9 text

• 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 enterJS Open Source Enterprise • Premium Plugins (e.g. Ofﬂine Storage) • Appﬂow • Support • Encryption Cross-Platform mit Capacitor und deiner Web-App

Slide 10

Slide 10 text

Layers WebView Capacitor UI (Ionic) HTML / CSS / JS enterJS Plattform Cross-Platform mit Capacitor und deiner Web-App

Slide 11

Slide 11 text

• Web Components (Stencil) • Android- / iOS-like Look-And-Feel • Optimiert für mobile Plattformen • Theme-Support mit CSS variablen UI-Layer UI (Ionic) HTML / CSS / JS WebView Capacitor enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 12

Slide 12 text

• iOS: WKWebView • Android: Chromium-based WebView for Android • Displaying content in apps • Served by an in app optimised HTTPS-server • PWAs are not inside a WebView WebView-Layer WebView Capacitor UI (Ionic) HTML / CSS / JS enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 13

Slide 13 text

• Bridge to platform-features • Toast & Camera etc. • Camera, Fingerprint, Storage • One API for all platforms • Supports Cordova plugins • Standalone Capacitor-Layer Capacitor WebVIew UI (Ionic) HTML / CSS / JS enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 14

Slide 14 text

enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 15

Slide 15 text

iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE enterJS Debugging Cross-Platform mit Capacitor und deiner Web-App

Slide 16

Slide 16 text

Get File Input Hidden DOM Read File & Convert enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 17

Slide 17 text

Main. Use Capacitor plugins with UI main.ts Usage enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 18

Slide 18 text

Unsolved • SDK Management • Many different devices • Kotlin / Java Cross-Plattform • macOS • Swift / Objective-C • Speacial features (3D Touch, Radar) • Play Store & App Store access • Vendor policies • Testing • Deployment / Testing • Access Rights & Permissions enterJS Cross-Platform mit Capacitor und deiner Web-App

Slide 19

Slide 19 text

Electron, Cordova …. enterJS Cheat Sheets Cross-Platform mit Capacitor und deiner Web-App https://www.thinktecture.com/digital-content/electron-cordova- pwa/

Slide 20

Slide 20 text

Ionic, Capacitor … enterJS Cheat Sheets Cross-Platform mit Capacitor und deiner Web-App https://www.thinktecture.com/digital-content/ionic-fuer-web- apps/

Slide 21

Slide 21 text

https://www.thinktecture.com/max-marschall Max Marschall @MaxOSchulte Architect / Consultant Vielen Dank