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

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