From 10 years native to the biggest Flutter app in Europe: the story of SNCF Connect with Flutter. Slide deck from the conference at Flutter Heroes 2023 (Turin, Italy). Presented by François Nollen, Adrien Body and Valentin Michalak for SNCF Connect & Tech. Replay available: https://www.youtube.com/watch?v=CbfRLjxg_rw

1. FROM 10 YEARS NATIVE TO
The story of SNCF Connect with Flutter
1
24/02/2023 #FlutterHeroes23
THE BIGGEST FLUTTER APP IN EUROPE

2. US (INCL. SPECIAL POWERS ;)
2
Adrien BODY
👨💼 Staff Engineer
🦸 A11Y Hero
Valentin MICHALAK
👨💼 Software Engineer
🦸 E-sport Hero
François NOLLEN
👨💼 Staff Engineer
🦸 Tech Ambassador

3. OUR JOURNEY WITH FLUTTER
3
• The Project
• Why Flutter ?
• From native to Flutter
• BFF
• Core
• Testing
• Design & Accessibility
• Routing & Monitoring
• Performance
• Conclusion

4. SNCF CONNECT
« Sustainable mobility accessible for all »
4

5. OUR APPS BEFORE SNCF CONNECT
5

6. A NEW DIGITAL SERVICE FOR TRAVEL AND MOBILITY
6
tickets sold in 2022
48 B
kms traveled by
customers in one
year: that’s 3 millions
tons of CO2 saved
1 B
visits in 2022:
that’s 3 millions a day
>190 M
SIMPLER MORE ACCESSIBLE GREENER CUSTOMIZABLE

7. FROM ZERO TO HERO IN 18 MONTHS
7
Flutter
React + SSR
Kotlin/JVM
100% Cloud-native
Infra-as-Code
State of the Art
Mobile Apps
(150 screens)
Web App
Back-For-Front
Infra
From scratch
Iterate faster
Quality
Continuous Delivery
Monorepo
One codebase
One CI/CD pipeline
Innersource
One team
From 10 to 200
developers*
…in 18 months
(*40 dedicated to Flutter)
18 months

8. WHY FLUTTER
8

9. MODERN DECLARATIVE UI CANDIDATES IN 2020
9
Kotlin Multi Platform?
Share business code with server (in Kotlin)
Swift UI (version 1)
Android Jetpack Compose (alpha)
React Native?
Share codebase between App & Web
Performance and boot time issues (in 2020)
Not convinced by tooling (more industrialization, better developer experience?)

10. “Flutter is an open source
framework by Google for
building beautiful, natively
compiled, multi-platform
applications from a single
codebase. “

11. « IT’S ALL ABOUT SUSTENTATION »
11
Platforms ( , …)
Your App
(Alexandre, Entreprise Architect)

12. FLUTTER MET OUR CRITERIA
● Very Good Performances
● Multi-platform
● Binary Size: OK
● Trusted Partners
● Google Contacts
● Early adopters
(Google Pay, Ad Mob, Ali Express, EBay…)
● Mature
● Single Codebase
● Tooling, Developer Experience
Our criteria
(in real life)…
TLDR;)
(simpler version)

13. LEVERAGING FLUTTER WEB TOO? (IN 2020)
13
PWA build
46.3 Mo
Deferred loading
No pure
HTML
(a11y?)
'pollute’
codebase
Not stable
Stable now
Chart
different between
platforms
CMS content
injection
SEO…
complicated
• Not suitable for our use case
(e-commerce Website for millions of people)
• Yet, a very promising technology!
?
Condi2onal Imports

14. FROM NATIVE TO FLUTTER
14

15. MAIN BENEFITS FROM NATIVE
15
üHot Reload
üIndependant
from OS versions

16. MINDSET CHANGED FROM NATIVE
16
• New paradigm ⚠
• UI-specific iOS / Android
• Open Source 🎉

17. BRIDGING TO NATIVE
17
• Bridges with Pigeon
• Homemade bridges: Wallet IOS, Google Wallet
• 3rd-party libs: Google Ads
• Method Channel, FFI, …
• 3rd-party Flutter SDKs provided by partners (Datadome, Batch, Instana, Didomi)

18. BACKEND FOR FRONTEND
18
ARCHITECTURE

19. BACK-FOR-FRONT APPLICATION SERVER
• BFF = Backend For Frontend
• Presentation logic moved serverside:
• Presentation model / mapping
• Formatting, Localization
• Etc.
ü Mobile/Web consistency 🔐
ü Better TTM 🚀
ü Smaller frontend apps 🌱
19
BFF server
(Back-For-Front)
Other channels
(eg. chatbots)
Mobile
(iOS, Android)
Web

20. BFF à OPEN API à PROJECT SDK
• Business models generated with Open API
• Dart SDK (for Flutter/Mobile)
• Typescript SDK (for React/Web)
• Classes generated with built_value
(generated immutable serialization/deserialization)
• HTTP clients generated with Dio
• Moustache templates
• Models used for tests with fixtures
20

21. CORE LIBS
21
THREADS

22. STATE MANAGEMENT
23
Provider
riverpod
mobX
binder
Fish Redux
flu#er_command
solidart

23. THREADS IN FLUTTER
24
• Flutter is mono-threaded
• MicroTask Queue, Event Queue
• Futures
• scheduleMicrotask
• Isolates and Computes helper
• Background tasks

24. HOW WE USE THREADS
25
• Main thread for simple UI and logic
• Isolates/Computes for complexe tasks
• Eg. deserializing with compute dio_flu'er_transformer
• 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. background proactive exchange, based on geolocation
(⚠ Remember that Compute has a little boot overhead time)

25. TESTING THE APP(S)
26

26. OUR « TEST PYRAMID »
golden_toolkit
Golden
Basic Widgets Tests
UT over BLoC
Automated E2E
Widget Tests
UI Tests
Integration Tests
Unit Tests

27. GOLDEN TESTS
31

28. BDD WITH CUCUMBER & GHERKIN
32

29. GHERKIN FEATURES
33
Behaviour
(shared with business teams)
Tests Cases
(exhaustive!)
commercial_cards.feature

30. END-TO-END TESTS WITH GHERKIN
34

31. E2E TESTS
35
AN IN-HOUSE WRAPPER OVER APPIUM
• Gherkin makes tests reusable between Mobile & Web (differents Glues)…
• In addition, our wrapper over Appium improves:
• Test reusability between Android & iOS (eg. generic types for widgets)
• Shared logic about how we navigate, scroll, etc. during tests
• Accessibility tests & guidelines easier to implement

32. WIDGET TESTS WITH GHERKIN
36
• Flutter Gherkin
• Widget Object Pattern inspired by E2E Tests and Page Object
• Test your widgets with complex and exhaustive business cases
• Quick to execute
• Glues
• Open source contribution:
👉 https://github.com/sncf-connect-tech/gherkin_widget_extension
https://www.youtube.com/watch?v=QJHdwp0-zN0&t=716s
(meetup Flutter Paris 17/01/2023)

33. TESTING DEEPLINKS?
37

34. OUR TEST STRATEGY, RELOADED
38
https://medium.com/@a.poichet/flutter-and-
the-practical-test-pyramid-with-the-bloc-
pattern-6e6bf10dda9d
https://medium.com/@maxime.pontoire/
automated-tests-of-a-flutter-application
-3d878e9d8a61
• Golden
• End 2 End
• Widget Tests
● ⚠ Take time to run + heavy for your Git repo
● ⚠ Not idempotent (OS/architecture) è Docker
● 💚 Still very usefull in MR reviews
● 💚 Reused for Mobile and Web
● ⚠ integration_test limits (Webviews/native modals/perms)
💚 But Appium stable and working well!
● ⚠ But long to execute (cannot test all cases)
● 💚 Great to document code with use cases
● 💚 Fast, help us test all business use cases

35. DESIGN & ACCESSIBILITY
39

36. DESIGN SYSTEM
• Figma
• Generated code
• Storybook
(2023: Widgetbook?)
• Flutter Web
40

37. ACCESSIBILITY MATTERS
41
« The power of the Web
is in its universality.
Access by everyone
regardless of disability
is an essential aspect. »
Tim Berners-Lee, W3C Director
and inventor of the World Wide Web

38. ACCESSIBILITY MATTERS
42
« The power of the Web
is in its universality.
Access by everyone
regardless of disability
is an essential aspect. »
Tim Berners-Lee, W3C Director
and inventor of the World Wide Web

39. ACCESSIBILITY WITH FLUTTER
• Very good and customizable 👍
• Dedicated widgets : Semantics, ExcludeSemantics
• Semantic Service
Still a few bugs opened on Flutter repo:
• Focus Bugs
• Read order bugs
• Scroll shadows malfunctions: cacheExtent
• Bridges bugs on some OS with keyboard for example
43
https://abody.medium.com/accessibility-in-
flutter-tips-for-a-more-inclusive-app-
3e8406e9356d

40. ACCESSIBILITY GOLDENS
44
Golden tests, accessibility-style:

41. ACCESSIBILITY GOLDENS
45
45
Golden & manual tests in accessibility mode
(enableSemanticDebugger)

42. find.widgetWithSemanticLabel (custom method)
find.bySemanticsLabel
semanticMatcher
WIDGET TESTS
46
Methods used in testWidget:

43. meetsGuideline(textContrastGuideline)
meetsGuideline(androidTapTargetGuideline)
meetsGuideline(iOSTapTargetGuideline)
meetsGuideline(labeledTapTargetGuideline)
MEETSGUIDELINE
47
Unit Tests on contrast, tap size and label of a widget:

44. ROUTING
48
MONITORING
TRACKING

45. ROUTING & DEEPLINKS
49
go_router
routemaster shelf_router yeet
● We first chose autoroute because it seemed mature
● Watching the go_router roadmap closely ;)

46. MONITORING
50
Covering both
frontend and
backend
Crash details
and stacktraces
⚠ Obfuscation issue

47. TRACKING & CONSENTS
• Server-to-server tracking
& consents management (GDPR)
• Frontend instrumentation
(route observer, CMP SDK,
delegating to the BFF)
ü Mobile/Web consistency 🔐
ü Better TTM 🚀
ü Less frontend 3rd-party SDKs 🛡
ü Reduced footprint 🌱
51
S2S
tracking
vendors
BFF server
(Back-For-Front)
Other channels
(eg. chatbots)
Mobile
(iOS, Android)
Web

48. PERFORMANCE
52

49. HOW DOES IT GROW? (DEV XP & CI/CD)
53
✅ Acceptable compilation time
No need to modularize (too much)
✅ IDE always reactive
⚠ Test duration
From 1 to 24 seconds per golden test on CI/CD !
2700 tests Flutter
● Cut out in 10 jobs
● ~30m by job
● less than 10m local
Build 32 minutes
Build 22 minutes
Careful when conflicts/rebase
- Generated code
- Goldens

50. OPTIMIZED BUNDLES
• Android App Bundles
• Optimized bundles
for different devices
• In our case (average):
📉 -48% weight
54

51. FOOTPRINT
55
85
Running times:
117.5 s
Mobile data:
1.1 Mo
90
Energy:
112.8 mAh
50
• Many ways to contribute to a lower
impact on clients and devices, eg.
• Optimizing bundles
• Server calls and payloads
• Images / font-icons
• Serverside logic
• Limiting SDKs
• …
• Greenspector level Silver (July 2022) 🌱

52. FRAMERATES
Flutter performance IS impressive
but still…
framerate issues remain with
56
SHADER COMPILATION
⏳

53. IMPELLER (PREVIEW)
Before (Skia only)
57
After (Impeller)

54. IMPELLER (PREVIEW)
Very promising. Ready for production?
Pros:
- Very good results on our tests
- Significant performance improvement (less / no more frame issue)
Cons:
- Not yet stable on Android (stable on iOS)
- Issues with some dependencies (eg. Google Ads)
58
FUTURE LOADING…

55. CONCLUSION
59

56. SUCCESSFUL PROJECT & PRODUCT
● Biggest Flutter app in Europe (so far!)
● Built/Delivered in 18 months
● Used by millions of people
● Weekly releases
60

57. WE ❤ FLUTTER FOR…
● 🧑🤝🧑 Consensus among devs (native, backend…)
● 📚 Ultra-rich component library
● 🦺 App resilience
● 🔍 Very good documentation
● 🫶 Great and active community (Flutter Heroes! 👋🦸)
Also :
Declarative UI, Hot reload ⚡, Frequent Updates, Modern language and tools,
Open Source, Performances, Simple Communication with Native…
61

58. FLUTTER EVEN BETTER WHEN…
🧭 Stable navigation / routing (v1 imperative, v2 declarative, go_router?)
⚡ Remaining perf issues (Google Ads, frame jank à Impeller)
🕵 Code obfuscation // stacktrace (Firebase Crashlytics)
And also :
Dartlang, Flutter OS sensitive, remaining Accessibility issues…
62

59. 63
HAPPILY STICKING WITH FLUTTER FOR WHAT’S NEXT!

60. RESOURCES WE’VE SHARED (🇫🇷 / 🇬🇧)
64
Flutter @ Devoxx France
E2E Testing with Flutter
Widget Testing with Flutter
Accessibility Testing with Flutter
Flutter Impeller

61. (☝ resources + jobs + contacts )

62. Questions
Contact us

63. Thank you!