Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Fullstack Day London - cross-platfor...

JavaScript Fullstack Day London - cross-platform with Capacitor

Max Schulte

June 07, 2022
Tweet

More Decks by Max Schulte

Other Decks in Programming

Transcript

  1. Web-Apps schneller entwickeln mit Ionic & Angular Good to know…

    Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant und Engeneer bei der Thinktecture AG. • Spezialisiert in Angular, Ionic / Capacitor und Babylon.js Workshop
  2. Ionic Capacitor & Hybrid-Apps Cross-Platform Ionic t Java, C++, C#,

    VB Swing, Qt, XAML JavaScript Fullstack Day
  3. 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 Cross-Platform JavaScript Fullstack Day
  4. • 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-Platform Open Source Enterprise • Premium Plugins (e.g. Offline Storage) • Appflow • Support • Encryption JavaScript Fullstack Day
  5. Layers WebView Capacitor UI (Ionic) HTML / CSS / JS

    Cross-Platform Plattform JavaScript Fullstack Day
  6. • 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-Platform JavaScript Fullstack Day
  7. • 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-Platform JavaScript Fullstack Day
  8. • 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-Platform JavaScript Fullstack Day
  9. 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 Cross-Platform JavaScript Fullstack Day
  10. 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