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

Cross-platform with Capacitor - Javascript Fullstack Day IJS Munich 2022

Cross-platform with Capacitor - Javascript Fullstack Day IJS Munich 2022

This talk is part of the “JavaScript Fullstack Day” Workshop at the International JavaScript Conference 2021 in Munich – a collaboration of different Speakers to cover the modern full programming stack. Each talk, provided by an expert, covers particular tooling or part of the stack.

In this part, you will learn about hybrid apps and the cross-platform approach.
Learn how to create android, ios and electron apps using Capacitor and your existing web app.

Max Schulte

October 27, 2022

More Decks by Max Schulte

Other Decks in Programming


  1. 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
  2. Ionic Capacitor & Hybrid-Apps Cross-Pla)orm Ionic t Java, C++, C#,

    VB Swing, Qt, XAML JavaScript Fullstack Day
  3. 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
  4. 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
  5. • 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
  6. Layers WebView Capacitor UI (Ionic) HTML / CSS / JS

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