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
Tweet

More Decks by Max Schulte

Other Decks in Programming

Transcript

  1. JavaScript Fullstack Day
    Cross-Platform
    Max Marschall
    @MaxOSchulte
    Consultant

    View Slide

  2. 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

    View Slide

  3. Cross-Pla)orm
    JavaScript Fullstack Day

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 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

    View Slide

  8. 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

    View Slide

  9. • 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

    View Slide

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

    View Slide

  11. • 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

    View Slide

  12. • 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

    View Slide

  13. • 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

    View Slide

  14. Cross-Pla)orm
    JavaScript Fullstack Day

    View Slide

  15. 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

    View Slide

  16. Main.
    Use Capacitor plugins with UI
    main.ts
    Usage

    View Slide

  17. Get File Input
    Hidden DOM
    Read File & Convert

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide