$30 off During Our Annual Pro Sale. View Details »

Modern Mobile Development: Native vs Cross-Platform

Modern Mobile Development: Native vs Cross-Platform

A question every mobile app project has to ponder is: do we want to go native, or do we want to use a cross-platform framework? And if we go the cross-platform route, which framework better suits our needs?

The choice is never easy, and requires a holistic understanding of the project’s needs, and the specific strengths and weaknesses of each approach. No two products are alike, no two companies are alike, and as such, there is no absolutely right answer. On the other hand, there are potentially many “wrong” answers that we need to identify. So, how to choose? As the common refrain in software engineering goes, “it depends”.

This session aims to give you the knowledge and tools necessary to make the best possible choice for your product, not just from a technical point of view, but also considering the impacts on the teams and the company. By covering some of the history of cross-platform frameworks, and identifying the unique pros and cons of each potential approach, we’ll reach a better understanding of the question itself, and get ready to make one of the most impactful choices for your product.

---

You can find links to the recording and slides on the talk minisite: https://go.sebastiano.dev/qcon-2022

Sebastiano Poggi

April 04, 2022
Tweet

More Decks by Sebastiano Poggi

Other Decks in Programming

Transcript

  1. Sebastiano Poggi Modern mobile development Native vs cross-platform apps

  2. Scope ‣ Goal: help you choose ‣ Agenda ‣ Preconditions

    for success ‣ Understanding mobile ‣ Native or cross-platform ‣ Pick a cross-platform stack
  3. “It depends” ‣ Everything in this talk may or may

    not apply to you ‣ Apply common sense
  4. Terminology Native app Cross-platform app Uses native build tools Android:

    Kotlin/Java/C++ iOS: ObjC/Swi Non-native build tools Potentially uses web tech Same tech across OSes Neither runs in the browser
  5. Company dynamics

  6. Why are you here? ‣ You want a mobile app

    ‣ Greenfield vs The Big Rewrite™ ‣ Tech debt ‣ Pre-existing team ‣ Recovering from failure
  7. Teams ‣ No full-stack engineers in mobile ‣ Mobile devs

    dislike backend work ‣ …and vice versa ‣ Information/knowledge silos ‣ Misalignment and misunderstandings
  8. Product vs Tech ‣ Different chains: ‣ Mobile reports to

    CPO ‣ Web and backend report to CTO ‣ Mobile as nobody’s child ‣ Management doesn’t “get” it ‣ Tech not built for it
  9. Not all tech is created equal ‣ Web is almost

    always ahead ‣ Mobile comes later ‣ Web is straightforward ‣ Mobile can exacerbate org issues
  10. When things go wrong

  11. Nobody likes failure ‣ Failure causes management frustration ‣ Blaming

    games ‣ Tech stack as way to shi responsibility ‣ Wrong choices for the wrong reasons
  12. Bad apps exist… ‣ Bad choices —> bad apps ‣

    Don’t force choices, evaluate assumptions ‣ Tech stacks don’t always work 1:1 on mobile ‣ Reach outside comfort zone ‣ Ensure higher-ups’ buy-in
  13. Users don’t care about the tech

  14. They just want to get stuff done Users don’t care

    about the tech
  15. Help them, help your business Users don’t care about the

    tech They just want to get stuff done
  16. (Re)starting

  17. Before you (re)start ‣ Ask the tough questions

  18. Before you (re)start ‣ Ask the tough questions Do your

    users want, or need, a mobile app?
  19. Before you (re)start ‣ Ask the tough questions Can you

    satisfy your users with a high quality, responsive website?
  20. Before you (re)start ‣ Ask the tough questions Does your

    competition have an app?
  21. Before you (re)start ‣ Ask the tough questions Do their

    users use it?
  22. Before you (re)start ‣ Ask the tough questions How good

    is it?
  23. Before you (re)start ‣ Ask the tough questions ‣ Use

    data to drive decisions ‣ Focus groups, user studies, etc ‣ Trust the data ‣ Even when you don’t like it
  24. Scoping and responsibilities ‣ Who owns mobile? ‣ Align with

    rest of tech if possible ‣ Think about your users ‣ What do they want to do? ‣ Define app scope and what’s not in it
  25. Capability vs capacity ‣ What can your existing teams do?

    ‣ Any native mobile devs? ‣ Do they want to do cross-platform? ‣ Ensure platform-native capability ‣ You’ll need it
  26. Capability vs capacity ‣ Most apps require OS interactions ‣

    If your app doesn’t, consider a website ‣ “Website apps” waste resources ‣ E.g.: ReactJS dev team doing mobile? ‣ Somewhat different tech and tools ‣ Native knowledge required
  27. Team participation ‣ Involve your devs in the choice ‣

    Listen to their fears ‣ Provide safety ‣ Avoid chasing tech fads ‣ Spikes are good ‣ …but can deceive
  28. Commitment ‣ In for the long run ‣ Big investment

    ‣ Huge switching costs ‣ Tech and skill lock-in ‣ Change of tech means rewrite
  29. Native or cross-platform?

  30. The native advantage ‣ Native is always “be er” ‣

    Be er performance ‣ Be er integration and support ‣ More consistent with the OS ‣ More APIs/features ‣ Tooling is constantly improving
  31. Not all is rosy ‣ Native is more expensive ‣

    Dedicated team per OS ‣ Infrastructure & processes ‣ Different CI setups ‣ Different deploy and publishing
  32. The cross-platform pragmatism ‣ Native may not be the best

    for you ‣ Cross-platform may be “enough” ‣ Vastly improved over the years ‣ Some dev experience advantages ‣ Prefer strong, non-native design language
  33. A fictional app case study ‣ Wearables company ‣ Do

    they need an app?
  34. A fictional app case study ‣ Wearables company ‣ Do

    they need an app?
  35. A fictional app case study ‣ Wearables company ‣ Do

    they need an app? ‣ Do they need a native app?
  36. A fictional app case study ‣ Wearables company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily?
  37. A fictional app case study ‣ Wearables company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily?
  38. A fictional app case study ‣ Wearables company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily? ‣ Can users achieve their goals?
  39. A fictional app case study ‣ Wearables company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily? ‣ Can users achieve their goals?
  40. A fictional app case study ‣ Wearables company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily? ‣ Can users achieve their goals?
  41. The main choices React Native Xamarin Flu er Web-based Cordova

    Ionic PhoneGap Kotlin MP
  42. The main choices React Native Xamarin Flu er Web-based Cordova

    Ionic PhoneGap
  43. The main choices React Native Xamarin Flu er ‣ From

    Facebook ‣ Derived from ReactJS ‣ Share skills/code with web team ‣ Built on JavaScript and npm ‣ 3rd party supports desktop/wearables/tv/…
  44. The main choices React Native Xamarin Flu er ‣ You

    can make B2C apps with it ‣ Plenty of “big” RN apps ‣ Performance has some limitations ‣ Custom UI needs per-platform implementations ‣ Famous cases of apps abandoning it
  45. The main choices React Native Xamarin Flu er ‣ From

    Microso ‣ Used to be paid, now it’s free and OSS ‣ Uses C# tools and NuGet, “full stack” ‣ Unique UI approach ‣ Xamarin.Forms or native views
  46. The main choices React Native Xamarin Flu er ‣ Wraps

    and exposes platform-native APIs ‣ Limited support and tools ‣ Best for internal and unsophisticated apps ‣ Very enterprise-oriented ‣ Unsuitable for B2C apps?
  47. The main choices React Native Xamarin Flu er ‣ From

    Google ‣ Quickly rising in popularity ‣ Lots of investments & marketing ‣ Great 1st party integrations (Firebase) ‣ Uses Dart and Pub
  48. The main choices React Native Xamarin Flu er ‣ Mobile,

    desktop, web, embedded ‣ No WatchOS and tvOS ‣ Full-stack: backends in Dart ‣ Best-in-class testing capabilities ‣ Dev audience skewed to Android
  49. The main choices React Native Xamarin Flu er

  50. A sense of scale Cordova React Native Flu er Ionic

    Xamarin Titanium/Appcelerator 1% 5% 11% 14% 15% 20% 1% 4% 8% 6% 12% 17% iOS (App Store) Android (Google Play) Source: AppFigures.com RIP
  51. Numbers can deceive Source: Statista.com ~1/3rd of all mobile developers

    uses cross-platform tech
  52. Numbers can deceive Source: Statista.com Flu er React Native Cordova

    Ionic Xamarin PhoneGap Kotlin MP 2% 4% 11% 16% 16% 38% 42% 2% 6% 14% 18% 18% 42% 39% 0% 11% 26% 28% 29% 42% 30% 2019 2020 2021
  53. Numbers can deceive Source: Statista.com Flu er React Native Cordova

    Ionic Xamarin PhoneGap Kotlin MP 2% 4% 11% 16% 16% 38% 42% 2% 6% 14% 18% 18% 42% 39% 0% 11% 26% 28% 29% 42% 30% 2019 2020 2021
  54. Numbers can deceive Source: Statista.com Flu er React Native Cordova

    Ionic Xamarin PhoneGap Kotlin MP 2% 4% 11% 16% 16% 38% 42% 2% 6% 14% 18% 18% 42% 39% 0% 11% 26% 28% 29% 42% 30% 2019 2020 2021
  55. Numbers can deceive Source: Statista.com Flu er React Native Cordova

    Ionic Xamarin PhoneGap Kotlin MP 2% 4% 11% 16% 16% 38% 42% 2% 6% 14% 18% 18% 42% 39% 0% 11% 26% 28% 29% 42% 30% 2019 2020 2021
  56. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app?
  57. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app?
  58. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app? ‣ Do they need a native app?
  59. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily?
  60. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily?
  61. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily? ‣ Can users achieve their goals?
  62. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily? ‣ Can users achieve their goals?
  63. Another fictional case study ‣ Investment (fintech) company ‣ Do

    they need an app? ‣ Do they need a native app? ‣ Using the OS APIs heavily? ‣ Can users achieve their goals?
  64. Another fictional case study ‣ Which cross-platform framework?

  65. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team
  66. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team
  67. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team
  68. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team
  69. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team Using Firebase services
  70. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team Using Firebase services
  71. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team Using Firebase services Lots of custom UI
  72. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team Using Firebase services Lots of custom UI
  73. Another fictional case study ‣ Which cross-platform framework? Strong in-house

    ReactJS team Strong in-house .Net team Using Firebase services Lots of custom UI Flu er
  74. ‣ Unit testing ‣ More or less a solved problem

    ‣ UI testing ‣ Easier in Flu er (widget tests) ‣ Native, React Native use per-platform tools ‣ Xamarin too, but custom Testing on mobile
  75. ‣ Instrumented tests ‣ Slow, runs on virtual/physical devices ‣

    Cloud services exist, but expensive ‣ Complex to set up and maintain ‣ Workarounds: more unit testing ‣ Specialised mobile CI solutions Testing mobile UI on CI
  76. ‣ Bad choices will not be immediately clear ‣ RN

    apps abandoning RN a er years ‣ Flu er may turn out the same ‣ Keep an eye on the progress ‣ Failure will be expensive… ‣ …but stopping early will help Review decisions
  77. Takeaways

  78. Make data-driven decisions 1. Understand if mobile can work for

    you
  79. Sort out organisation and teams 2. Create the right environment

    Make data-driven decisions 1. Understand if mobile can work for you
  80. There is no silver bullet 3. Assess the compromises Sort

    out organisation and teams 2. Create the right environment Make data-driven decisions 1. Understand if mobile can work for you
  81. Hopefully this talk helped you 4. Make the right choice

    and GO! There is no silver bullet 3. Assess the compromises Sort out organisation and teams 2. Create the right environment Make data-driven decisions 1. Understand if mobile can work for you
  82. That’s all, folks! Questions? Illustrations courtesy of Irasutoya

  83. Sebastiano Poggi twi er.com/seebrock3r go.sebastiano.dev/qcon-2022