Bringing your Flutter App to the Web

Transcript

1. BRINGING YOUR FLUTTER APP TO THE WEB Michaël Ohayon
2. Today's (short) agenda 1. Introduction to our mobile first application Edenred+ 2. Why and how we shifted to web 3. Lessons learned
3. Edenred+ journey The Flutter application Android & iOS Platforms Architecture BLoC + Clean Architecture, Modularisation, widgetbook CI Az DevOps + dedicated OSX runners Quality Linters, Sonar, PR validators, tests Deps auto_route, dio + retrofit, get_it + injectable, envied, flutter_secure_storage, etc… A 100% digital platform to grant employee benefits Flutter application for Android & iOS that allows users to onboard, order plastic/virtual cards and discover deals and stores. …just like your usual Flutter mobile app!
4. Why going Web with Flutter?
5. Take a decision Switch to Angular Go with Flutter Web » Top notch Web experience » New codebase, new repos, CI, new pipelines and new developers 🤯 » Community and web practices are well known » Tailored for PWA Web experience » Same team, reuse of UI/UX, user journeys, codebase, build chain 🚀 » Time to market Flutter Web? We decided to experiment based on our current codebase
6. First web build outcomes flutter build web --release --source-maps Build Time Takes less than 2 minutes (including build_runner) on a Mac mini M2 Pro UI/UX Without any edit, usable but non optimized Iteration was fast, first builds in days, Delivered to production the following months Web issues Moving to web brings out the standard hosting & CORS topics. Web support Most packages were web compatible out of the box
7. First web build outcomes We took the basics » Onboarding » Login » Card ordering » Balance and transactions And kept everything else for later (deals / stores / account)
8. First web build outcomes Proper Web design
9. First batch of errors Fixing issues » Many runtime errors (Platform.is* / dart:io) » Few vendors SDKs were not Flutter web ready. (Either Flutter Mobile or Web) » Some features / sensors are unavailable on web » Prevent calls to be performed and add more layers and stub/wrap calls » Create the missing bindings for your vendors SDKs 3 main issues Solutions
10. Keys management » .env / assets are public and very easy to look 👀 Fixing issues Browser network traces Some Flutter code
11. Keys management Fixing issues » Source obfuscation is not supported by Flutter but minification is. Have a look at the envied package to get .env obfuscation. » Keep in mind it’s not 100% bulletproof, but it will increase the amount of effort needed to get the values from the source code. envied usage minification Minification + obfuscation
12. Web packages pitfalls Fixing issues » Some SDKs are performing caller verification through platform specific SDKs. » Some multiplatform packages from the community are relying on server-to-server APIs to keep things simpler. » Anyone with the key can call the APIs, leading to privacy & costs issues » Flutter Web still requires the same level of security than your mobile platforms
13. Hosting & CORS » Build creates static files that you can push onto your CDN / static hosting provider. » In the web world, Access-Control-Allow-Origin needs to be configured accordingly with your public facing domain. Fixing issues Azure CDN
14. Web routing Fixing issues https://docs.flutter.dev/ui/navigation/url-strategies » If you want to benefit from universal links with Hash routing, have a look at URL Rewriting techniques » Because anyone can decide to do a page reload or open links, any route can be directly accessed leading to business and runtime issues. – State / data restoration can help you to handle some of those use cases – Route Guards allows to redirect from unplanned route navigation
15. Code sharing limitations Mobile App Strong Customer Authentication Combination of multiple factors including platform specifics fingerprinting and storage. Web Flutter Web App External SSO Platform External SSO Platform External SSO Platform
16. » Performance is a bit behind JS frameworks but mostly on the very first page load » SEO requires to split your app and marketing content » You may have to write your own web wrappers for some vendors SDKs » Going web without a design system or adaptive / responsive first may be a bit challenging But all of those may not be blockers depending on your use case! A few concerns to have in mind
17. Lessons learned » Edenred+ Web is live in multiple countries 👍 » Time to market was good » It’s the same app, most of the codebase is shared, new features are both web & mobile. Will you join the Flutter Web journey? https://flutter.dev
18. Thanks!