2024 FlutterMTL January Meetup - Build Customization by Nicolas Cuillery

Transcript

1. Build customization Flutter Montreal Meetup - January 2024
2. Nicolas Cuillery Software developer Has worked with: - Flutter - React Native - React - Angular.js - Flex - jQuery - JSP
3. BASE1 eCommerce Services Web and Mobile storefront
4. Cloud9
5. Cloud9 application - Project started in February 2021 - Android and iOS - Single codebase, multiple apps - Currently in production in 10 countries - 1M daily users
6. Multiple markets - Phase 1: Japan and Australia - Phase 2: Mexico, UK and New Zealand - Phase 3: Korea and Taiwan - Quarterly releases: France, Spain, Sweden, Iceland
7. Firebase Analytics In-app Messaging Cloud Messaging Firestore Crashlytics Remote Config Dynamic Links Performance
8. Firebase usage
9. Multiple applications com.cloud9.uat com.cloud9.qa com.cloud9.preprod com.cloud9.japan com.cloud9.uk com.cloud9.mexico com.cloud9.australia Cloud9 code base cloud9-prod-australia cloud9-prod-mexico cloud9-prod-japan cloud9-prod-uk etc… cloud9-dev-shared cloud9-dev-uat cloud9-dev-qa cloud9-dev-preprod
10. Multiple flavors/configurations Different builds from the same project. Examples: - Pricing model - White-label app - Beta version - etc.
11. Non-prod applications Country selector screen on startup - Ease dev and QA workflow - Faster CI build = faster feedback loop - Cheaper CI
12. New market launch
13. New requirements - Different dependencies for China - Alternatives for the Firebase products: - Remote Config - Cloud Messaging - Analytics - …
14. Nice-to-have goals - The unused deps are not compiled nor packaged in the app. - no Firebase deps in the app for China - no WeChat Pay in the UK build - Dev and tester experience preserved - “China” available in the country selector - Minimal impact in the dev workflow
15. Arsenal: Layered Architecture 🚀 Separation between: - Data - Business Logic - UI More about that on: https://www.reddit.com/r/FlutterDev/comments/192h8l0/comment/kh3sm2w/
16. Arsenal: Dependency injection Heavy usage of GetIt https://pub.dev/packages/get_it
17. Arsenal: Dependency injection Usage of “interface” (barely used)
18. Arsenal: Import tree-shaking Successive imports are read from the entry-point: main.dart
19. - Centralize all the Firebase usage in one place (per Firebase Product) - Abstraction layer between the Firebase SDK and its usages - Specific main file for China, loading the non-Firebase implementation Draft of a solution
20. Pre-china implementation main.dart
21. initialization_helper.dart
22. address_search_bloc.dart
23. Step 1: Preparation initialization_helper.dart
24. address_search_bloc.dart
26. Step 2: Specific main file main_china.dart
27. china_initialization_helper.dart
28. Less compiled code https://stackoverflow.com/questions/52822353/how-to-test-debug-tree-shaking-in-flutter Customers want guidance and docs for tree-shaking: https://github.com/dart-lang/sdk/issues/33920
29. Dev and tester experience preserved Previously (non-prod) Entry point initGlobalSingletons() {} InitializationHelper main() {} in main.dart Country Selector initCountrySingletons() {} Home Page InitializationHelper Splash screen setCountry() {} SettingsService
30. Now (non-prod) Entry point initGlobalSingletons() {} InitializationHelperImpl main() {} in main.dart Country Selector initCountrySingletons() {} Home Page InitializationHelper Splash screen setCountry() {} SettingsService initCountrySingletons() {} initCountrySingletons() {} InitializationHelperChinaImpl InitializationHelperProdImpl
31. Strip Flutter plugins - Native changes abstracted by Flutter - Manual changes in the native files kept as minimal as possible - pubspec.yaml is the main source of truth Non-prod Include all plugins (Firebase + the alternatives) China Strip the Firebase plugins Other countries Strip the chinese dependencies
32. Flutter plugins - iOS: Integration with cocoapods - Android: Hook in the app/build.gradle
33. CI script https://github.com/mikefarah/yq
34. Possible improvement #1
35. Possible improvement #2 From Flutter itself: https://github.com/flutter/flutter/issues/46979
36. Native changes Less hack-y because we are in the native world Access to the flavor/configuration 🎉
37. Size comparison
38. Takeaways - Architecture is key - Unknown path to scalability - OOP still works
39. Thanks! Kudos to Jhin, Billy and Ali❤