Slide 1

Slide 1 text

JavaScript Fullstack Day Cross-Platform Max Marschall @MaxOSchulte Consultant

Slide 2

Slide 2 text

Good to know… Max Marschall [email protected] 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

Slide 3

Slide 3 text

Cross-Pla)orm JavaScript Fullstack Day

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

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

Slide 10

Slide 10 text

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

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

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

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

Slide 14

Slide 14 text

Cross-Pla)orm JavaScript Fullstack Day

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 Cross-Platform Debugging JavaScript Fullstack Day

Slide 16

Slide 16 text

Main. Use Capacitor plugins with UI main.ts Usage

Slide 17

Slide 17 text

Get File Input Hidden DOM Read File & Convert

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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