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

A_guided_tour_of_cross-platform_mobile_dev-12-2...

yostane
December 11, 2022
29

 A_guided_tour_of_cross-platform_mobile_dev-12-2022.pdf

yostane

December 11, 2022
Tweet

Transcript

  1. • DevRel @Worldline • Teacher and trainer • @yostane •

    Some images generated by hotpot.ai The speaker Yassine BENABBAS 2 |
  2. Agenda 1. Introduction 2. Cross platform categories • Web app

    / PWA • Hybrid web • Hybrid native 3. Which one to choose ? 4. Conclusion
  3. Context 📱 Mobiles are everywhere 💻 Browsers and desktops are

    still largely used 🔧 App dev with a single codebase ? 5.48 billion unique mobile users as of October 2022 https://datareportal.com/global-digital-overview 4
  4. • Browsers support many features nowadays such as : •

    Geolocation and notifications • PWA adds: • Offline mode • Setup to homescreen • No browser header • Many powerful frameworks available: Angular, React, Vue.js, and more • Alternative to store limitations: Amazon Luna and xCloud use PWA on iOS Web app / PWA 8
  5. • No visibility on Apple App Store • Browsers do

    not implement the same level of APIs as native SDKs • Safari iOS is behind • PWA support in iOS is generally lacking • The “feeling” is somewhat different than native apps • Works on any platform that has a modern web browser • Accessible using a URL • Can be installed and added to the app list • Can publish PWA in Android and Windows Store • We can bypass App Store limitations PROS / CONS Web apps 10
  6. Hybrid web • A PWA / web app embedded in

    a native app (using a webview) • Native APIs available through a JS bridge • Also called plugins • Can be seen as a web app with access to native APIs 12
  7. • Developed by the Ionic team • Many plugins available

    + compatible with Cordova plugins • The tooling can easily turn a web app into a hybrid mobile app • Agnostic to the UI framework • Ionic UI Toolkit works well with Capacitor Capacitor New webview runtime 13
  8. • Webview drawbacks • Performance • The UX feels somewhat

    different than native apps • Capacitor app size: Cordova still better • Can build and debug on the browser • Live reload • Lots of plugins • Possibility to mix Capacitor and native views PROS / CONS IONIC + capacitor 14
  9. • Any framework that generates native UI and / or

    native code for multiple targets Hybrid Native 16
  10. • Based on the React framework from Meta • JS

    engine that run business code • A bridge allows to access native API and components • UI rendered using native components • One of the first major hybrid native frameworks • Can also target the web and Windows 10 React native 17
  11. • Version still < 1 • May still get breaking

    changes • JS Bridge is the slowest Native Hybrid method • Airbnb and Udacity abandoned it • JS runtime inconsistencies • Hard to fix crashes • Has a big community • Architecture of React apps (ex. redux) • Gaining more and more maturity since 2015 • Hot reload PROS / CONS REACT Native 20
  12. • Developed by the Chrome team • Targets iOS, Android,

    web and Desktop • Compilation to native code • UI drawn on a canvas: platform components not used • Dart language for UI and logic • IDEs: Android Studio or VSCode Flutter 21
  13. • Native UX is emulated • Still complex to have

    native design with a single codebase • Dart runtime adds overhead to binary size • Very efficient Hot reload • Very fast UI and animations • Fast adoption and growing community • Great choice to have the same UX across platforms PROS / CONS Flutter 22
  14. • Targets iOS, Android, Windows and macOS • Cross platform

    UI toolkit that uses native components • All done in Visual Studio and C# + XAML • Code translated into native code MAUI / Xamarin C# Cross Platform 23 https://github.com/naweed/MauiPlanets
  15. • Seems not mature compared to other frameworks • .net

    runtime adds overhead to app size • No Linux nor web support • Blazor can be used for web • Power of C# and .net ecosystem • Visual Studio tooling • Ex. Embedded Android SDK manager • Can debug on iOS without a mac ! • Hot reload PROS / CONS MAUI / Xamarin 24
  16. • Idea: Common business logic with Kotlin • Generates an

    Android module and iOS framework • Currently, UI is developed using native SDKs (such as Compose and SwiftUI) • Cross-platform UI with Compose maybe the next step KMM Kotlin Mobile multiplatform 25
  17. • Entered the beta stage on October 10, 2022 •

    Architecture of the app must carefully thought from the ground up • Best environment for native Android developers • Takes the best advantage of native UI • Encourages a clean architecture • Fast adoption and growing community PROS / CONS KMM 26
  18. Different options for cross-platform dev 28 iOS and Android devs

    Care about native components Popular choice Web devs Bypass stores
  19. • Gap is narrowing between mobile, web and desktop development

    • Targeting iOS still requires a mac • Mobile app development is fun ! Conclusion 31
  20. • https://mobidev.biz/blog/how-react-native-app- development-works • https://github.com/jondot/awesome-react-native • https://github.com/xinthink/react-native-material- kit.git • https://github.com/passbase/react-native-demo-

    app • https://www.netguru.com/blog/react-native-apps • https://github.com/microsoft/react-native- windows • https://www.dizzain.com/blog/insights/pwa- examples/ Links 32