A_guided_tour_of_cross-platform_mobile_dev-12-2022.pdf

Transcript

1. A guided tour to cross-platform mobile development Yassine Benabbas
2. • DevRel @Worldline • Teacher and trainer • @yostane • Some images generated by hotpot.ai The speaker Yassine BENABBAS 2 |
3. Agenda 1. Introduction 2. Cross platform categories • Web app / PWA • Hybrid web • Hybrid native 3. Which one to choose ? 4. Conclusion
4. 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
5. (Too) many choices 5
6. Framework types Cross platform Web app / PWA Hybrid web 6 Hybrid native Official SDKs
7. Web app / PWA
8. • 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
9. What the web can do Today iOS 14 vs Android 9
10. • 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
11. Hybrid web
12. 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
13. • 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
14. • 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
15. Hybrid native
16. • Any framework that generates native UI and / or native code for multiple targets Hybrid Native 16
17. • 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
19. • Facebook • Discord • Uber eats • Skype Who uses RN ? 19
20. • 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
21. • 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
22. • 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
23. • 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
24. • 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
25. • 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
26. • 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
27. Choosing a framework
28. Different options for cross-platform dev 28 iOS and Android devs Care about native components Popular choice Web devs Bypass stores
29. 29 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
30. Conclusion
31. • Gap is narrowing between mobile, web and desktop development • Targeting iOS still requires a mac • Mobile app development is fun ! Conclusion 31
32. • 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
33. Thanks ☺ Any questions ?