JavaScript Fullstack Day Cross-Platform Max Marschall @MaxOSchulte Consultant

Good to know… Max Marschall max.schulte@thinktecture.com h2ps://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und Engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic / Capacitor und Babylon.js Cross-Pla)orm JavaScript Fullstack Day

Cross-Pla)orm JavaScript Fullstack Day

Ionic Capacitor & Hybrid-Apps Cross-Pla)orm Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day

Ionic Capacitor & Hybrid-Apps Cross-Platform Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day

Ionic Capacitor & Hybrid-Apps Cross-Pla)orm Ionic t Java, C++, C#, VB Swing, Qt, XAML JavaScript Fullstack Day

Cordova • Low-Level-APIs • Mobile-Plattform-Bridge • Plugin-Focused Capacitor vs Cordova Capacitor • Higher-Level-APIs • PlaPorm-Bridge • Includes commonly used plugins • Supports Cordova-Plugins Cross-Platform JavaScript Fullstack Day

Unsolved • SDK Management • Many different devices • Kotlin / Java Cross-Pla:orm • macOS • Swift / Objective-C • Speacial features (3D Touch, Radar) • Play Store & App Store access • Vendor policies • TesZng • Deployment / TesZng • Access Rights & Permissions Cross-Pla)orm JavaScript Fullstack Day

• 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-Pla)orm Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • EncrypZon JavaScript Fullstack Day

Layers WebView Capacitor UI (Ionic) HTML / CSS / JS Cross-Pla)orm PlaEorm JavaScript Fullstack Day

• 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 Cross-Pla)orm JavaScript Fullstack Day

• 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 Cross-Pla)orm JavaScript Fullstack Day

• 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 Cross-Pla)orm JavaScript Fullstack Day

Cross-Pla)orm JavaScript Fullstack Day

iOS – Xcode & Safari Remote Debugger Android – IDE & Chrome Remote Debugger (chrome://inspect/#devices) & VS Code (Plugin) Web – In Browser & IDE Cross-Platform Debugging JavaScript Fullstack Day

Main. Use Capacitor plugins with UI main.ts Usage

Get File Input Hidden DOM Read File & Convert

Electron, Cordova …. Cross-Pla)orm Cheat Sheets JavaScript Fullstack Day h2ps://www.thinktecture.com/digital-content/electron-cordova-pwa/

Ionic, Capacitor … Cross-Pla)orm Cheat Sheets JavaScript Fullstack Day h2ps://www.thinktecture.com/digital-content/ionic-fuer-web-apps/

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