Sebastiano Poggi
Modern mobile
development
Native vs cross-platform apps
Slide 2
Slide 2 text
Scope
‣ Goal: help you choose
‣ Agenda
‣ Preconditions for success
‣ Understanding mobile
‣ Native or cross-platform
‣ Pick a cross-platform stack
Slide 3
Slide 3 text
“It depends”
‣ Everything in this talk may or may not apply to you
‣ Apply common sense
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Company dynamics
Slide 6
Slide 6 text
Why are you here?
‣ You want a mobile app
‣ Greenfield vs The Big Rewrite™
‣ Tech debt
‣ Pre-existing team
‣ Recovering from failure
Slide 7
Slide 7 text
Teams
‣ No full-stack engineers in mobile
‣ Mobile devs dislike backend work
‣ …and vice versa
‣ Information/knowledge silos
‣ Misalignment and misunderstandings
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
Not all tech is created equal
‣ Web is almost always ahead
‣ Mobile comes later
‣ Web is straightforward
‣ Mobile can exacerbate org issues
Slide 10
Slide 10 text
When things go wrong
Slide 11
Slide 11 text
Nobody likes failure
‣ Failure causes management frustration
‣ Blaming games
‣ Tech stack as way to shi responsibility
‣ Wrong choices for the wrong reasons
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
Users don’t care
about the tech
Slide 14
Slide 14 text
They just want
to get stuff done
Users don’t care
about the tech
Slide 15
Slide 15 text
Help them,
help your business
Users don’t care
about the tech
They just want
to get stuff done
Slide 16
Slide 16 text
(Re)starting
Slide 17
Slide 17 text
Before you (re)start
‣ Ask the tough questions
Slide 18
Slide 18 text
Before you (re)start
‣ Ask the tough questions
Do your users want,
or need, a mobile app?
Slide 19
Slide 19 text
Before you (re)start
‣ Ask the tough questions
Can you satisfy your users with
a high quality, responsive website?
Slide 20
Slide 20 text
Before you (re)start
‣ Ask the tough questions
Does your competition
have an app?
Slide 21
Slide 21 text
Before you (re)start
‣ Ask the tough questions
Do their users use it?
Slide 22
Slide 22 text
Before you (re)start
‣ Ask the tough questions
How good is it?
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
Team participation
‣ Involve your devs in the choice
‣ Listen to their fears
‣ Provide safety
‣ Avoid chasing tech fads
‣ Spikes are good
‣ …but can deceive
Slide 28
Slide 28 text
Commitment
‣ In for the long run
‣ Big investment
‣ Huge switching costs
‣ Tech and skill lock-in
‣ Change of tech means rewrite
Slide 29
Slide 29 text
Native or cross-platform?
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Not all is rosy
‣ Native is more expensive
‣ Dedicated team per OS
‣ Infrastructure & processes
‣ Different CI setups
‣ Different deploy and publishing
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
A fictional app case study
‣ Wearables company
‣ Do they need an app?
Slide 34
Slide 34 text
A fictional app case study
‣ Wearables company
‣ Do they need an app?
Slide 35
Slide 35 text
A fictional app case study
‣ Wearables company
‣ Do they need an app?
‣ Do they need a native app?
Slide 36
Slide 36 text
A fictional app case study
‣ Wearables company
‣ Do they need an app?
‣ Do they need a native app?
‣ Using the OS APIs heavily?
Slide 37
Slide 37 text
A fictional app case study
‣ Wearables company
‣ Do they need an app?
‣ Do they need a native app?
‣ Using the OS APIs heavily?
Slide 38
Slide 38 text
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?
Slide 39
Slide 39 text
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?
Slide 40
Slide 40 text
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?
Slide 41
Slide 41 text
The main choices
React Native Xamarin Flu er
Web-based
Cordova Ionic PhoneGap
Kotlin MP
Slide 42
Slide 42 text
The main choices
React Native Xamarin Flu er
Web-based
Cordova Ionic PhoneGap
Slide 43
Slide 43 text
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/…
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
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?
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
The main choices
React Native Xamarin Flu er
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
Numbers can deceive
Source: Statista.com
~1/3rd of all mobile developers
uses cross-platform tech
Another fictional case study
‣ Investment (fintech) company
‣ Do they need an app?
Slide 57
Slide 57 text
Another fictional case study
‣ Investment (fintech) company
‣ Do they need an app?
Slide 58
Slide 58 text
Another fictional case study
‣ Investment (fintech) company
‣ Do they need an app?
‣ Do they need a native app?
Slide 59
Slide 59 text
Another fictional case study
‣ Investment (fintech) company
‣ Do they need an app?
‣ Do they need a native app?
‣ Using the OS APIs heavily?
Slide 60
Slide 60 text
Another fictional case study
‣ Investment (fintech) company
‣ Do they need an app?
‣ Do they need a native app?
‣ Using the OS APIs heavily?
Slide 61
Slide 61 text
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?
Slide 62
Slide 62 text
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?
Slide 63
Slide 63 text
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?
Slide 64
Slide 64 text
Another fictional case study
‣ Which cross-platform framework?
Slide 65
Slide 65 text
Another fictional case study
‣ Which cross-platform framework?
Strong in-house ReactJS team
Slide 66
Slide 66 text
Another fictional case study
‣ Which cross-platform framework?
Strong in-house ReactJS team
Slide 67
Slide 67 text
Another fictional case study
‣ Which cross-platform framework?
Strong in-house ReactJS team
Strong in-house .Net team
Slide 68
Slide 68 text
Another fictional case study
‣ Which cross-platform framework?
Strong in-house ReactJS team
Strong in-house .Net team
Slide 69
Slide 69 text
Another fictional case study
‣ Which cross-platform framework?
Strong in-house ReactJS team
Strong in-house .Net team
Using Firebase services
Slide 70
Slide 70 text
Another fictional case study
‣ Which cross-platform framework?
Strong in-house ReactJS team
Strong in-house .Net team
Using Firebase services
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
‣ 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
Slide 75
Slide 75 text
‣ 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
Slide 76
Slide 76 text
‣ 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
Slide 77
Slide 77 text
Takeaways
Slide 78
Slide 78 text
Make data-driven decisions
1. Understand if mobile can work for you
Slide 79
Slide 79 text
Sort out organisation and teams
2. Create the right environment
Make data-driven decisions
1. Understand if mobile can work for you
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
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
Slide 82
Slide 82 text
That’s all, folks!
Questions?
Illustrations courtesy of Irasutoya