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 

What is Server-Driven UI (SDUI)? 2023 

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. 

Backend Middleware Devices Devices A/B Testing Default Configs New Configs Sample Server-Driven Architecture 

Why Server-Driven UI (SDUI)? 2023 

- 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 

Development Development Review Release Under Review Submit to Play Store / App Store Classical App Versions Release Flow Rejected Updated Version Approved 

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 

Benefits of SDUI 2023 

- 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 

Popular Companies that use SDUI 2023 NuBank Reddit AirBnb 

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. 

Ghost Platform Overview Fun fact: Ghost = Guests + Hosts 

● Firebase Remote Config ● Back4App Parse Platform ● ShoreBird Code Push (not SDUI) Other Solutions in Flutter 

Example project using Firebase Remote Configs https://github.com/YeLwinOo-Steve/gdg_2023/tree/master/r emote_banner 2023 

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: 

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. 

Example code Mirai Syntax Flutter Syntax Mirai Parser 

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 

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! 

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 

My Opinion For fully SDUI, Firebase remote configs Mirai For feature releases via play store or app store, Shorebird code push 

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 

Any Questions? 

Thank You!!! Have Fun!