This document discusses ways to test and reduce the environmental footprint of mobile apps. It covers why reducing footprints is important, product and design techniques like accessibility and efficient UX, and developer techniques such as tree shaking, deferred components, threads, and staying up to date. Testing and monitoring tools are also discussed, like Greenspector and Maestro. The conclusion emphasizes that how software is developed, such as infrastructure and deployments, also impacts footprints.

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

2. Adrien BODY
Staff Engineer Jocelyn GRISELLE
Software Engineer
Contractor
François NOLLEN
Staff Engineer
Dev Rel

3. 🧠 YOUR 📱 👣 !
3
• Why
• Product & design
• Developer techniques
•
🔎
Tree Shaking
•
🔎
Eco-friendly mode
•
🔎
Deferred Components
• Testing & Monitoring
•
🔎
Green Tools
•
🔎
Tests
• 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
Doing the right thing 🎁
8

9. 9
• Good product value 🌱
• Useful features 💡
• Efficient design / UX 💚
• Accessibility 🛟
PRODUCT & DESIGN MATTER

10. MOBILE DEVELOPMENT
Doing the thing right ♻
10

11. 11
FOOTPRINT
♻
🔋
💚
🌱
DEVICE

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

13. 13
TLDR; « Everything is not Black & White » 😉
• LCD vs. AMOLED
• « Dark » mode or « black » mode?
DARK MODES
Greenspector results (testing our own app):
• Dark blue theme on AMOLED: 3.0 g CO2
• Light theme on AMOLED: 3.9 g CO2
• Dark blue theme on LCD: 3.9 g CO2
• Light theme on LCD: 3.9 g CO2
Per year estimation (all shopping on dark blue mode):
• 22.5 M transactions on LCD + 7 M on AMOLED
• = 7 T of CO2 would be saved each year

14. 14
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
Photo:
https://unsplash.com/fr/photos/NLgqFA9Lg_E

15. 15
EG. HOW WE USE THREADS
• Main thread for simple UI and logic
• Isolates/Computes for complexe tasks
• Eg. deserializing with Compute (F) or Isolate.run (D) big payloads
• Eg. multiple requests in // with Isolate
• scheduleMicrotask
• Eg. network call needed for screen, prior to any other async Future
• workmanager for background native tasks
• Eg. Acknowledge notification in background
(⚠ Remember that Compute has a little boot overhead time)

16. 16
REPAINT BOUNDARIES
• Separate widgets to subtrees at rendering level,
helping Flutter renderer know when repaint is needed
• Can optimize screens with many interactions
Photo:
https://unsplash.com/fr/photos/lvhu6dlFyLs

17. 17
• Upgrading libs and
frameworks ASAP
• Leveraging new features
and improvements
…Including
⚡
and
🗜
!
STAYING UP-TO-DATE

18. STAYING UP-TO-DATE 👉 EXAMPLE
18
Before ⏳
(Skia only)
After ⚡ (Impeller)
(Emmanuel Lefebvre)
@ Flutter Paris, Jan’23

19. MOVING LOGIC TO THE BACK-END
19
• 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

20. RESULTS: PAYLOAD AND MORE
20
[Ranking] Total payload on the network during navigation (source: Greenspector)

21. EXAMPLE: TRACKING & CONSENTS
21
S2S
tracking
vendors
BFF server
(Back-For-Front)
Other channels
(eg. chatbots)
Mobile
Web
• Server-to-server
tracking & consents
(☝GDPR)
• Frontend instrumentation
without 3rd-party SDKs
(RouteObserver,
consents listener)
Less 3rd-party SDKs in your app:
• Less CPU, less storage ⚡🗜🙂🌱
• Less integration issues or crashes 💣

22. 22
📦 App Bundles
🌴 Tree Shaking
OPTIMIZING BUNDLES
Photo:
https://unsplash.com/fr/photos/r2jpr8MDw0I

23. ANDROID APP BUNDLES
23
• Android App Bundles
• Optimized bundles
for different devices
• In our case (average):
📉 -48% weight

24. OPTIMIZED BUNDLES FOR IOS?
24
• iOS build optimizations? No big difference measured so far with Flutter
• With iOS 14, the bitcode option has disappeared 🙁
• (Apple anticipating new homogeneous architecture?)
Source: https://www.emergetools.com/blog/posts/how-xcode14-unintentionally-increases-app-size

25. 25
TREE SHAKING 🌴
Removes unused:
• Functions
• Fields
• Types
• Type params
• Type args
• Metadata
• Lib entries
• Classes
• Libs
Photo:
https://unsplash.com/fr/photos/DNkoNXQti3c

26. « LET’S SHAKE THE FLUTTER TREE »
26
Let’s Shake the Flutter Tree
(Aleksander Denisov)
@ Flutter Heroes ’23

27. TREE SHAKING IN PRACTICE
27
Use const at compile time (or conditional imports for Web)
1
VS.
2

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
♻ Saving-energy mode
🪫 Low battery detected
🦕 Old device / low-end
device detected
CUSTOM ECO-MODE

30. 30
🧑💻 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

31. EXAMPLE
31
🤔 Disabling things from our onboarding wizard…
On a low-end device (2018):
- UX slightly degraded
ü FPS: +60 fps
ü CPU usage (average): 79% à 36%
👉 All about choices and balance
💚 No hardcore dev skills required

32. 32
(and Dynamic Features)
DEFERRED COMPONENTS
Photo:
https://unsplash.com/fr/photos/gdL-UZfnD3I

33. EXAMPLE
33
💡 Defer the IDFM support in app?
• Public transportation for Paris only
• Buy dematerialized metro tickets
• Use your phone as a ticket

34. 34
(Warning: a single missing import leads to no deferred lib)
1
2
DEFERRED COMPONENTS IN PRACTICE

35. DEFERRED COMPONENTS IN PRACTICE
35
pubspec.yaml
3
<meta-data
android:name="flu2erEmbedding"
android:value="2"/>
<meta-data
android:name="io.flu2er.embedding.engine.deferredcomponents.DeferredCom
ponentManager.loadingUnitMapping" android:value="2:idfm_sdk"/>
android:name="io.flu2er.embedding.android.Flu2erPlaySto
reSplitApplicaKon" Flu2erPlayStoreSplitApplicaKon()
or
4 5

36. 36

37. 37

38. BUILDING AND DEPLOYING
38
Photo:
https://unsplash.com/fr/photos/IEiAmhXehwE

39. 39
HOW WE DEVELOP
MATTERS TOO
🧑💻 Work stations
(how many monitors do you use?... 🖥💻🖥)
🏭 Running environments, infrastructure,
integration pipelines, deployments…

40. 40
⏳ Long-lived feature branches, running
envs/code waiting, the « 7 wastes of Lean »…
(prefer small increments & CD)
🚥 Backwards compatibility
(supporting old devices
👉
dedicated
tests/running environments?)
HOW WE DEVELOP
MATTERS TOO

41. TESTING & MONITORING ♻
41

42. GREENSPECTOR
42
(July 2022)

43. USER SCENARIO RANKING
85
Performance
(Elapsed Time)
117.5 s
Mobile Data
1.1 Mo
90
Energy
112.8 mAh
50
43
(Source: Greenspector 2022)

44. 44
> MORE TOOLS

45. MONITORING TOOLS (EXAMPLES)
45
Sentry
ü « User Misery » Tools & Suspects
Datadog
ü CPU Usage
ü Memory Usage
ü FPS
Firebase
ü HTTP Latencies
ü App Start Time

46. 46
> maestro test ./test_e2e/onboarding.yml
• Easy to write / run flows
• Based on real use cases
• Sometimes a bit flaky…
MAESTRO

47. FLASHLIGHT
47
• Performance stats
• Combines with your e2e tests nicely
• Can run/integrate with CI
• Iterations and retries
• Easy to compare runs
• (Only for Android)

48. 48
INTEGRATION TESTS

49. CHROME TRACING / PERFETTO
49

50. GOLDEN TESTS FOR A11Y AND OLD DEVICES
50

51. ASSESSMENT MODELS
51
👉 https://ecoresponsable.numerique.gouv.fr
/publications/referentiel-general-ecoconception/
👉 https://myecodesignmaturity.eu/en.html

52. MESURE AND COMPARE 🌱 PERFORMANCE
52
Each feature
At least regularly
Many tools
available!
Monitoring
Tools
🌱 Crash
Analytics
Tools
Flutter
Debug Tools
Integ. Tests
+ Dedicated
Tools
Eco
Specialized
Tools
Assessment
Models
Golden
Tests

53. CONCLUSION
53

54. TAKEAWAYS
54

55. RESOURCES WE’VE SHARED (🇫🇷 / 🇬🇧)
55
E2E Testing with Flutter
Widget Testing with Flutter
Accessibility Testing with Flutter
Flutter @ Devoxx France
Flutter Heroes 2023

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