A guided tour to cross-platform mobile development Yassine Benabbas

• DevRel @Worldline • Teacher and trainer • @yostane • Some images generated by hotpot.ai The speaker Yassine BENABBAS 2 |

Agenda 1. Introduction 2. Cross platform categories • Web app / PWA • Hybrid web • Hybrid native 3. Which one to choose ? 4. Conclusion

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

(Too) many choices 5

Framework types Cross platform Web app / PWA Hybrid web 6 Hybrid native Official SDKs

Web app / PWA

• 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

What the web can do Today iOS 14 vs Android 9

• 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

Hybrid web

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

• 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

• 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

Hybrid native

• Any framework that generates native UI and / or native code for multiple targets Hybrid Native 16

• 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

No content

• Facebook • Discord • Uber eats • Skype Who uses RN ? 19

• 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

• 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

• 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

• 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

• 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

• 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

• 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

Choosing a framework

Different options for cross-platform dev 28 iOS and Android devs Care about native components Popular choice Web devs Bypass stores

29 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/

Conclusion

• Gap is narrowing between mobile, web and desktop development • Targeting iOS still requires a mac • Mobile app development is fun ! Conclusion 31

• 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

Thanks ☺ Any questions ?