Choosing your Mobile App Strategy for 2024

In this talk we’ll look at the different ways a business can approach building mobile applications in 2023. We’ll start by outlining what modern mobile apps are capable of, and what problems they can solve for customers. We’ll then look at the available tools and discuss which are the most applicable in different business situations. We’ll finish with a case study of a business deciding to move from one technology platform to another in order to deliver a higher quality mobile experience for its customers. We’ll share what problems were encountered along with some solutions and advice for undertaking mobile application re-platforms in the future.

This talk pairs with a blog post on AND Digital's website.

Presented at
• AND Digital in association with the British Computer Society on June 8th 2023
• University of Sheffield on December 7th 2023

Transcript

1. © AND Digital 2023 1 © AND Digital 2022 1 Choosing your Mobile App Strategy for 2024 Luke Stringer, Tech Principal
2. © AND Digital 2023 3 Hi everyone, great to meet you 👋 I’m Luke Stringer Tech Principal @ AND Digital @lukestringer90, stringer.dev I’ve been building mobile apps since 2010 Today I will be talking about Mobile Strategy I studied at UoS 2008 - 2012 MEng in Software Engineering
3. © AND Digital 2023 5 HTC Dream & Android September 2008 Apple iPhone & iPhone OS June 2007
4. © AND Digital 2023 6 $336 billion in 2022 💰 14% year on year growth 📈 7x more time spent on apps vs browsers ⏱ 6x faster loads vs browsers ⚡ $318,00 spent per minute on the App Store 🤑 225 Million iPhones sold in 2022 1 Billion Android devices sold in 2022 Source: data.ia ⅓ of waking hours spent on phones 🤳 485,000 apps downloaded per minute 📲
5. © AND Digital 2023 7 © AND Digital 2022 7 What makes a great mobile app? 1
6. © AND Digital 2023 8 Choose the right Platform(s)
7. © AND Digital 2023 9 Mobile Specific Capabilities Cameras Augmented Reality Virtual Reality Image Capture Object Recognition with AI
8. © AND Digital 2023 10 Mobile Specific Capabilities Biometrics for Security Touch ID Face ID Location Awareness
9. © AND Digital 2023 11 Mobile Specific Capabilities Payments Apple Pay Google Pay Fitness & Health Sensors wearOS watchOS
10. © AND Digital 2023 12 Mobile Specific Capabilities Push Notifications Speech and Language Processing Google Assistant Siri
11. © AND Digital 2023 13 Non-functional Considerations Accessibility Dynamic Text Size Screen Readers Mobility Support
12. © AND Digital 2023 14 Non-functional Considerations Localisation Translation Static & Dynamic Language Direction Units & Measures Time & Date Currency Idioms
13. © AND Digital 2023 15 Non-functional Considerations Remote Configuration Feature Flags Running A/B Experiments Customisation
14. © AND Digital 2023 16 Device Support OS Version Support Security Distribution Approach Beta Testing Phased Rollout Web Server Interactions Offline Capabilities New Platform Features In App Purchases Subscriptions Power Consumption Localisation UI Fidelity Speed to Release AR/VR Apple Pay Google Pay watchOS wearOS Tablet Support Location Awareness Which Build Approach?
15. © AND Digital 2023 17 © AND Digital 2022 17 How can we build a great mobile app? 2
16. © AND Digital 2023 18 Native Cross Platform Write once for each platform Write once for all platforms React Native Flutter Swift Kotlin Build Approaches
17. © AND Digital 2023 19 Swift + Kotlin Native Native development, done in two teams, two languages. Owner: Apple & Google & Jetbrains Language: Swift & Kotlin Age: 12+ years Each platform uses native components, and layouts to produce apps that can be distributed onto the App Store and Google Play Store. Production ready - Largest apps in the world are written natively.
18. © AND Digital 2023 20 React Native Cross Platform solution. Write once, ship twice. iOS and Android. Owner: Open Source & Meta (formerly Facebook) Language: Javascript / Typescript Age: 7 years Logic and layout written in Javascript, then using a bridge this renders native iOS / Android UI components onto the screen. Production ready - Heavily used in utilitarian apps and e-commerce.
19. © AND Digital 2023 21 Flutter Cross Platform solution. Write once, ship multiple. iOS, Android, Web, Desktop. Owner: Open Source & Google Language: Dart Age: 5 years Logic and layouts written in Dart. Renders its own components rather than using Native components Production ready - Used in many indie apps, Google Ads, and other Google apps.
20. © AND Digital 2023 22 Android Operating System Android Native Frameworks iOS Operating System iOS Native Frameworks iOS UI Components Android UI Components Mobile Architecture Software-hardware interface Bluetooth, Location, Motion, Audio, Video, Data Persistence etc Standardised user interface controls Custom App Custom App
21. © AND Digital 2023 23 Swift App Android Operating System Kotlin App Android Native Frameworks iOS Operating System iOS Native Frameworks iOS UI Components Android UI Components Native Swift & Kotlin
22. © AND Digital 2023 24 Swift App Android Operating System Kotlin App Android Native Frameworks iOS Operating System iOS Native Frameworks iOS UI Components Android UI Components React Native App JavaScript Bridge Android Operating System Android Native Frameworks iOS Operating System iOS Native Frameworks iOS UI Components Android UI Components Native Swift & Kotlin Cross Platform React Native
23. © AND Digital 2023 25 Swift App Android Operating System Kotlin App Android Native Frameworks iOS Operating System iOS Native Frameworks iOS UI Components Android UI Components React Native App JavaScript Bridge Android Operating System Android Native Frameworks iOS Operating System iOS Native Frameworks iOS UI Components Android UI Components Android Operating System Android Native Frameworks iOS Operating System iOS Native Frameworks Flutter App Flutter UI Components Flutter UI Components Native Swift & Kotlin Cross Platform React Native Cross Platform Flutter
24. © AND Digital 2023 26 React Native App (JS) Swift App Flutter App (Dart)
25. © AND Digital 2023 27 Swift App
26. © AND Digital 2023 28 Swift App
27. © AND Digital 2023 29 React Native App (JS)
28. © AND Digital 2023 30 React Native App (JS)
29. © AND Digital 2023 31 React Native App (JS)
30. © AND Digital 2023 32 Flutter App (Dart)
31. © AND Digital 2023 33 Flutter App (Dart)
32. © AND Digital 2023 34 Device Support OS Version Support Security Distribution Approach Beta Testing Phased Rollout Web Server Interactions Offline Capabilities New Platform Features In App Purchases Subscriptions Power Consumption Localisation UI Fidelity Speed to Release AR/VR Apple Pay Google Pay watchOS wearOS Tablet Support Location Awareness How do they compare?
33. © AND Digital 2023 35 Device Support OS Version Support Security Distribution Approach Beta Testing Phased Rollout Web Server Interactions Offline Capabilities New Platform Features In App Purchases Subscriptions Power Consumption Localisation UI Fidelity Speed to Release AR/VR Apple Pay Google Pay watchOS wearOS Tablet Support Location Awareness Similarities
34. © AND Digital 2023 36 Device Support OS Version Support Security Distribution Approach Beta Testing Phased Rollout Web Server Interactions Offline Capabilities New Platform Features In App Purchases Subscriptions Power Consumption Localisation UI Fidelity Speed to Release AR/VR Apple Pay Google Pay watchOS wearOS Tablet Support Location Awareness Differences
35. © AND Digital 2023 37 Native React Native Flutter Comes later when React Native adds support None Poor Good Excellent
36. © AND Digital 2023 38 Native React Native Flutter UI Fidelity Excellent Good Excellent Accessibility Excellent Good Excellent Localisation Excellent Good Good Access to new APIs & Platform Features Excellent - straight away Comes later when React Native adds support Comes later when Flutter adds support None Poor Good Excellent
37. © AND Digital 2023 39 Native React Native Flutter Apple Pay & Google Pay First class support Requires use of native code wrapper Requires use of libraries / native code wrapper watchOS & wearOS First class support No support watchOS requires native wrapper wearOS is possible Universal App Support (Phone + Tablet) First class support Responsive layouts similar to web Responsive layouts similar to web Old OS Support Goes back many versions Good Goes back many versions None Poor Good Excellent
38. © AND Digital 2023 40 Native React Native Flutter Re-skilling Engineers Swift skills are unlikely to be in a business already. Kotlin skills may be present. React (web) and Javascript developers can retrain Dart skills are unlikely to be in a business already Ease of Recruitment Devs fewer in number and more expensive Job market is good Very few Dart and Flutter skills on market None Poor Good Excellent
39. © AND Digital 2023 41 None Poor Good Excellent Native React Native Flutter Re-skilling Engineers Swift skills are unlikely to be in a business already. Kotlin skills may be present. React (web) and Javascript developers can retrain Dart skills are unlikely to be in a business already Ease of Recruitment Devs fewer in number and more expensive Job market is good Very few Dart and Flutter skills on market Cost ? ? ?
40. © AND Digital 2023 42 None Poor Good Excellent Native React Native Flutter Re-skilling Engineers Swift skills are unlikely to be in a business already. Kotlin skills may be present. React (web) and Javascript developers can retrain Dart skills are unlikely to be in a business already Ease of Recruitment Devs fewer in number and more expensive Job market is good Very few Dart and Flutter skills on market Cost …it depends …it depends …it depends
41. © AND Digital 2023 43 Native React Native Flutter Re-skilling Engineers Swift skills are unlikely to be in a business already. Kotlin skills may be present. React (web) and Javascript developers can retrain Dart skills are unlikely to be in a business already Ease of Recruitment Devs fewer in number and more expensive Job market is good Very few Dart and Flutter skills on market Cost* More than Cross Platform Less than Native Less than Native *depends on the situation None Poor Good Excellent
42. © AND Digital 2023 44 © AND Digital 2022 44 Mobile Projects at AND Digital 3
43. © AND Digital 2023 45 New Greenfield Build from scratch a new product Brownfield Update & Improve Update and improve and existing product Replatform Move an existing product from one technology choice to another Principally there are 3 kinds of mobile projects we work on: Kinds of Mobile Projects What we’ve done at AND Digital
44. © AND Digital 2023 46 Native React Native Flutter New Greenfield Brownfield Update & Improve Replatform What we’ve done at AND Digital Kinds of Mobile Projects
45. © AND Digital 2023 47 Native React Native Flutter New Greenfield Brownfield Update & Improve Replatform What we’ve done at AND Digital Kinds of Mobile Projects
46. © AND Digital 2023 48 Re-platform to React Native Native iOS Codebase Native Android Codebase
47. © AND Digital 2023 49 Re-platform to React Native Native iOS Codebase Native Android Codebase Single React Native Codebase Replatform Aims: 1. Rewrite all features in React Native 2. Seamless upgrade for users
48. © AND Digital 2023 50 Aim 1. Rewrite All Features in React Native Scrum Process for Software Delivery
49. © AND Digital 2023 51 Aim 1. Rewrite All Features in React Native React Web Devs 󰠁 󰳕 󰠁 󰳕 Native Devs Functional Programming Weak Typing Hot Reload Visual Studio Code Web Apps Object Oriented Strong Typing Compiled Xcode & Android Studio Mobile UI Paradigm Mobile Emulators App Signing Learning New Skills
50. © AND Digital 2023 52 Aim 1. Rewrite All Features in React Native React Web Devs 󰠁 󰳕 React Native Devs 󰠁 󰳕 󰠁 󰳕 Native Devs Functional Programming Weak Typing Hot Reload Visual Studio Code Web Apps Mobile UI Paradigm Mobile Emulators App Signing Functional Programming Weak Typing Hot Reload Visual Studio Code Upskilling Object Oriented Strong Typing Compiled Xcode & Android Studio Mobile UI Paradigm Mobile Emulators App Signing Learning New Skills
51. © AND Digital 2023 53 Aim 1. Rewrite All Features in React Native iOS Feature 1 iOS Feature 2 iOS Feature 3 Android Feature 1 Android Feature 2 Android Feature 3 Current iOS App Current Android App Building Feature Parity
52. © AND Digital 2023 54 Javascript Wrapper Javascript Wrapper Aim 1. Rewrite All Features in React Native React Native Feature 1 React Native Feature 2 React Native Feature 3 iOS Feature 3.1 Android Feature 3.2 iOS Feature 1 iOS Feature 2 iOS Feature 3 Android Feature 1 Android Feature 2 Android Feature 3 Current iOS App Current Android App Building Feature Parity
53. © AND Digital 2023 55 Aim 2. Seamless Upgrade for Users Current Android App ID KeyStore Current iOS Bundle ID Signing Certificate
54. © AND Digital 2023 56 Current Android App ID KeyStore Current iOS Bundle ID Signing Certificate Apple iOS App Store Google Play Store Upgrade to new app Keep all user data Upgrade to new app Keep all user data Aim 2. Seamless Upgrade for Users
55. © AND Digital 2023 57 There are now many mobile platforms Make use of unique mobile features Choose the best build approach Reevaluate build approach in the future Plan what skills you’ll need User’s should always come first Choose the right platforms Create a great app, accessible for everyone Your Mobile Strategy
56. © AND Digital 2023 58 A Q © AND Digital 2022 58
57. Leeds Mobile Monthly Meetup We are a community for sharing knowledge and experiences of building, designing, testing and delivering mobile applications. linktr.ee/ leedsmobilemeetup