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

1. MIND YOUR APP FOOTPRINT! 🐾⚡🌱
How to Reduce your Mobile App Footprint
#FlutterHeroes24

2. Alexandre POICHET
Software Engineer Alexis CHOUPAULT
Software Engineer
François NOLLEN
Staff Engineer
Dev Rel

3. 🧠 YOUR 📱 👣 !
• Why
• Product & design
• Developer techniques
•
🔎
Basics
•
🔎
Bundles
•
🔎
On-demand
•
🔎
DIY
• Testing & Monitoring
• Conclusion

4. WHY
4
Digital technologies cause
2.5% Carbon footprint
4% GHG emissions
(sources: ADEME/ARCEP 2023
+ The Shift Project 2019)

5. 5
Source : ADEME / ARCEP
(March 2023)

6. 6
Source : ADEME / ARCEP
(March 2023)

7. 7
Source : ADEME / ARCEP
(March 2023)

8. PRODUCT & DESIGN
8
Building the right thing 🌱

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

13. MOBILE DEVELOPMENT
Doing the thing right ♻
13

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

18. EXAMPLE 👉 IMPELLER
18
Before ⏳
(Skia only)
After ⚡ (Impeller)
(Emmanuel Lefebvre)
@ Flutter Paris, Jan’23

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

32. 32
pubspec.yaml
3
<meta-data
android:name="flu1erEmbedding"
android:value="2"/>
<meta-data
android:name="io.flu1er.embedding.engine.deferredcomponents.DeferredCom
ponentManager.loadingUnitMapping" android:value="2:idfm_sdk"/>
android:name="io.flu1er.embedding.android.Flu1erPlaySto
reSplitApplicaKon" Flu1erPlayStoreSplitApplicaKon()
or
4 5
DEFERRED COMPONENTS IN PRACTICE

33. 33
DEFERRED COMPONENTS IN PRACTICE

34. 34
♻ Saving-energy mode?
🪫 Low battery detected?
🦕 Old device / low-end
device detected?
💡 DIY: adjust your app
footprint on-the-fly!
CUSTOM ECO-MODE

35. 35
🧑💻 UI thread &📱 Platform thread:
• More cache / longer TTL
• Disable secondary SDKs
• Avoid / Reduce precision
on geolocation
WHAT TO DISABLE / ADJUST
⚡ Raster thread:
• Disable transition animations
• Disable blend effects, opacity
• Disable clips, shadows

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

37. FLUTTER_ECO_MODE PLUGIN
37

38. 38
Concevoir des paramètres
écologiques dans les
applications 🇫🇷
@ Mobilis In Mobile 2023
(Thomas Thibault)
DESIGNING « ECO-FRIENDLY » USER PARAMS & OPTIONS

39. TESTING & MONITORING ♻
39

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/

43. 43
INTEGRATION TESTS (WITH CHROME TRACING / PERFETTO)

44. GOLDEN TESTS
44
How does your
App render on
a small screen?
✅

45. CONCLUSION
45

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

48. https://jobs.connect-tech.sncf/