How to Test and Reduce your Mobile App Footprint.
Slides from the SNCF Connect & Tech talk at Flutter Heroes 2024.
Reviewing various Flutter and mobile development techniques, such as Dark Mode, App Bundles, Tree Shaking, Deferred Components, Dynamic Features, implementing a custom eco-friendly mode, plus examples of testing tools & techniques. Feel free to contact us.
Replay video available soon...
9. DOING THE RIGHT THING?
9
Finding a GOOD DEAL…
• More engaged with final users
• More compliant with environment
ENVIRONMENT
• Efficient Design
• Accessibility
FEATURES
• Useful Features
QUALITY
• Good product value
• Small bugs
Where is the Green 🌱 part?
10. 10
EX. WE SPOT TURTLES! 🌊🐢🌏
#WeArePlay
We Spot Turtles! | Australia
(Nicolas Guillot &
Caitlin McKeown)
11. 11
♻ Retro-compatibility is crucial!
🐾 …yet it has a cost / footprint (tests, payloads, envs…)
👀 Monitor your app & user behaviours
🧹 Clean-up payloads when possible
🗑 Drop unused versions
EX. BACKWARD COMPATIBILITY
Version N-1
0,00% users
Version N
x,xx% users
👇
12. 12
♻ Unused features
📵 Deprecated versions
🎛 Complexity
🐾 Footprint
FUNCTIONAL DEBT / WASTE
« Less…
…is more »
🛟 Accessibility
❤ User experience
💸 Product & business value
14. 14
⚡ CPU usage / FPS
🪫 Consuming hardware
(camera, sensors, gps)
📡 Network (caches, offline mode)
🗜 Size (payloads, assets, storage)
💡 Most of those techniques are
very well-documented
BASICS
♻
🔋
💚
🌱
15. 15
• Display technologies : LCD vs. AMOLED
• « Dark » mode or « black » mode?
DARK MODES
Our app results LCD AMOLED
Light theme 3,9 g CO2 3,9 g CO2
Dark blue theme 3,9 g CO2 3.0 g CO2 (-23%)
TLDR; « Not everything is Black & White » 😉
(Source: )
16. 16
A good thread strategy on a
multi-core CPU:
• Saves battery 🔋
• Optimizes UX 💚
💡 Threads can be optimized to run on a
separate core if available, a small or big
core when it’s an heavy task.
THREADS MATTER
17. 17
• Upgrading libs and
frameworks ASAP
• Leveraging new features
and improvements
…Including
⚡
and
🗜
!
STAYING UP-TO-DATE
19. 19
REPAINT BOUNDARIES
• Separate widgets to subtrees at rendering level,
helps Flutter renderer know when repaint is needed
• Can optimize screens with many interactions
20. MOVING LOGIC TO THE BACK-END
20
• Pattern: presentation logic moved serverside
• Presentation model / mapping
• Formatting, Localization
• Etc.
ü Consistency over multiple channels 🔐
ü Less code, fast redeploy, better TTM 🚀
ü Smaller frontend app(s) & less crashes 🌱
BFF server
(Back-For-Front)
Other channels
(eg. chatbots)
Mobile
Web
21. RESULTS: PAYLOAD AND MORE
21
Data exchanged on
the network (ko)
[Ranking] Total payload on the network during navigation (source: )
22. EXAMPLE: TRACKING & CONSENTS
22
S2S
tracking
vendors
BFF server
(Back-For-Front)
Other channels
(eg. chatbots)
Mobile
Web
• Server-to-server
tracking & consents
(☝GDPR)
• Custom frontend
instrumentation
(RouteObserver,
EventListener)
• Most logic, data
and impacts
moved to the back-end
Removing 90% of
3rd-party SDKs from
the frontend:
• Less CPU, less
storage, smaller
footprint ⚡🗜🌱
• Less integration
issues or crashes 💣
• Better UX 🙂
23. 23
📦 App Bundles
🌴 Tree Shaking
OPTIMIZING BUNDLES
« App size is one of the biggest factors […]. It’s
important to regularly monitor and understand
how you can reduce your app’s download and
install sizes. »
Google Play Console Documentation
24. ANDROID APP BUNDLES
24
• Android App Bundles
• Optimized bundles
for different devices
• In our case (average):
📉 -48% weight
25. OPTIMIZED BUNDLES FOR IOS
25
🗜 App Thinning
🗑 Unused Code and Resources
♻ Swift Language Features
Available techniques 👉 refer to documentation
26. 26
TREE SHAKING 🌴
Removes unused:
• Functions
• Fields
• Types
• Type params
• Type args
• Metadata
• Lib entries
• Classes
• Libs
27. TREE SHAKING IN PRACTICE
27
Use const at compile time (or conditional imports for Web)
1
VS.
2
Let’s Shake the Flutter Tree
(Aleksander Denisov) @ Flutter Heroes ’23
28. 28
• ⚠ Workspace: incorrect Android or Gradle files locations and non-necessary files get included into the bundle
• ⏳ Assets: not tree-shaked by default #64106
• ⏳ Conditional Imports: available only for the Web #23122
29. 29
DEFERRED COMPONENTS
💤 Lazy loading at runtime
📲 On-demand features
🗜 Save phone storage
🐾 Reduce memory footprint
(based on Android Dynamic Features )
💡 Lazy loading gracely replaced by eager
loading on platforms, not compatible (eg. iOS)
30. EXAMPLE
30
💡 Defer the IDFM support in app?
Public transportation for Paris only
(ie. buy dematerialized metro tickets
+ use your phone as a ticket )
31. 31
(Warning: a single missing import leads to no deferred lib)
1
2
DEFERRED COMPONENTS IN PRACTICE
36. EXAMPLE
36
🤔 Disabling things from our onboarding wizard…
On a low-end device (2018):
- UI/accuracy slightly degraded
ü FPS: +60 fps
ü CPU usage (average): 79% à 36%
👉 All about choices and balance
💚 No hardcore dev skills required
38. 38
Concevoir des paramètres
écologiques dans les
applications 🇫🇷
@ Mobilis In Mobile 2023
(Thomas Thibault)
DESIGNING « ECO-FRIENDLY » USER PARAMS & OPTIONS
40. RUNTIME ANALYSIS (EX. GREENSPECTOR)
85
Performance
(Elapsed Time)
117.5 s
Mobile Data
1.1 Mo
90
Energy
112.8 mAh
50
40
(Source: Greenspector 2022)
41. 41
STATIC ANALYSIS (EX. ECOCODE)
« Flutter Community,
We need to build
Flutter/Dart Eco Rules! »
https://ecocode.io
42. FLASHLIGHT « LIGHTHOUSE FOR MOBILE »
42
• Includes retries and iterations
• Combines nicely with your e2e tests
• Easy to compare runs
• Video recording
• Android only
https://docs.flashlight.dev/
46. 46
Many ways to reduce your app footprint,
optimize and reduce the waste ♻
Test and monitor your app performance
over time, many tools are available 🔍
Solutions we all know, others few of us know.
Learn, use, share your techniques 🌱
47. RESOURCES WE’VE SHARED (🇫🇷 / 🇬🇧)
47
E2E Testing with Flutter
Widget Testing with Flutter
Accessibility Testing with Flutter
Flutter @ Devoxx France
Flutter Heroes 2023
Flutter Connection 2023