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
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