![RESULTS: PAYLOAD AND MORE
20
[Ranking] Total payload on the network during navigation (source: Greenspector)](https://image.slidesharecdn.com/mindyourappfootprintflutterconn2023-230614133347-ea445f22/85/Mind-your-App-Footprint-FlutterConn-2023-20-320.jpg)
Mind your App Footprint 🐾⚡️🌱 (@FlutterConn 2023)
- 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
- 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
- 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
- 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)
- 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