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