Server-Driven UI in Flutter

Slides for GDG Yangon 2023 Talk

Transcript

1. Server-Driven UI in Flutter 2023 Ye Lwin Oo (He who debugs) Senior Flutter Developer at AYA Inno Labs Flutter Instructor at Simbolo https://www.facebook.com/ye.lwin.oo.someone https://github.com/YeLwinOo-Steve https://www.ye-lwin-oo.vercel.app
2. What is Server-Driven UI (SDUI)? 2023
3. Server-driven UI is a design and development approach where the user interface (UI) and its behavior are primarily controlled and updated by a remote server rather than being hard-coded into the client-side application. In this model, the server sends instructions, data, and configurations to the client, dictating how the UI should be constructed and modified. This approach allows for dynamic and real-time changes to the user interface without requiring updates to the client-side code.
4. Backend Middleware Devices Devices A/B Testing Default Configs New Configs Sample Server-Driven Architecture
5. Why Server-Driven UI (SDUI)? 2023
6. - Developers write code make desired UI - Submitted to Play Store / App Store - Get reviewed - Either get rejected or get approved - Users update new app version App Release Cycle
7. Development Development Review Release Under Review Submit to Play Store / App Store Classical App Versions Release Flow Rejected Updated Version Approved
8. Downsides 📉 Lengthy app new version release process 📉 Frequent update is taking too much time 📉 If the app is submitted to Play Store and App Store, the release cycle is TWICE 📉 A/B Testing is quite difficult
9. Benefits of SDUI 2023
10. - Dynamic Updates - Reduced Client-side Work - Faster development and deployment time - Personalization and A/B Testing - Consistent User Experience - Lower update & modification costs - Scalability 2023
11. Popular Companies that use SDUI 2023 NuBank Reddit AirBnb
12. AirBnb’s SDUI Airbnb's SDUI lies the Ghost Platform (GP), which includes native frameworks for all supported platforms and provides a common collection of sections, layouts, and actions. GP uses Viaduct - a shared data layer across backend services which is a GraphQL-based data layer to provide responses and strongly typed models across all platforms.
13. Ghost Platform Overview Fun fact: Ghost = Guests + Hosts
14. • Firebase Remote Config • Back4App Parse Platform • ShoreBird Code Push (not SDUI) Other Solutions in Flutter
15. Example project using Firebase Remote Configs https://github.com/YeLwinOo-Steve/gdg_2023/tree/master/r emote_banner 2023
16. Mirai Package 2023 🌠Here comes the best part! https://github.com/YeLwinOo-Steve/Server-Side-UI https://github.com/YeLwinOo-Steve/gdg_2023 Example projects source code:
17. How Mirai Works Raw JSON Mirai Parser Flutter Syntax Special key, value pairs supported by Mirai 💡Pretty Simple, Right? The raw JSON file can be anywhere - within local assets, on the server or Firebase JSON data.
18. Example code Mirai Syntax Flutter Syntax Mirai Parser
19. Pros & Cons of Mirai 🔥 Dynamic UI Updates 🔥 Familiar JSON format 🔥 Similar Flutter keywords 🔥 Faster partial feature releases 💭 All widgets & complex interactions support needed 💭 Handy state management 💭 Community ( still growing ) 💭 A few bugs 💭 Resources needed
20. Current supported features v. 0.5.1 ✨ Rich amount of customizable widgets ✨ Basic navigation ✨ Basic network requests ✨ Logging ✨ Bottom sheet, dialogs ✨ Basic webview 🌟 Mirai has an amazing potential ahead!
21. Mirai-Json Parser Website This is my web editor project written in Flutter for editing,parsing and previewing Mirai syntax to flutter UI on the fly https://mirai-json-parser.vercel.app/ https://github.com/YeLwinOo-Steve/mirai_json_parser
22. My Opinion For fully SDUI, Firebase remote configs Mirai For feature releases via play store or app store, Shorebird code push
23. 2023 Q & A Resources • Miai - https://pub.dev/packages/mirai • Shorebird - https://shorebird.dev/ • Firebase remote config - https://firebase.flutter.dev/docs/remote-config/get-started/ • Flutter SDUI - https://medium.com/gitconnected/server-driven-ui-implementation-from-scratch-in- flutter-part-1-basics-71364ddd323e
24. Any Questions?
25. Thank You!!! Have Fun!