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