面向移动端及其他领域的服务器驱动型用户界面.pdf

1、Server-Driven UI for Mobile and BeyondAPRIL 10,2024Christopher LuuGrowth EngineeringWhat is Server-Driven UI(SDUI)?A UI driven by the serverThank you for attending my presentationThe Spectrum of SDUINot Very SDPretty Darn SDOffline AppEmbedded WebViewRestful APIGraphQL APISOAP API?!Pros of Being Mor

2、e Server-Driven Update UI without client update Shared code/logic across platforms AB testing Developers can work on other platformsCons of Being More Server-Driven Higher upfront cost to architect Complicated backwards compatibility concerns Non-native UI development Harder to support offline appsW

3、hat Were We Trying to Solve?Introducing UMA title:Some title here,body:Some body text that describes.,ctas:text:Do Something,url:DO_SOMETHING,style:primary ,text:Dismiss,action:DISMISS,style:secondary -kunIntroducing UMAtitle:Stringbody:FormattedStringctas:CTAcan_close:Boolean-samaeyebrow:String?tex

4、t_alignment:TextAlignmentbackground_color:HexString?header_image:URL?header_icon:URL?footer:FormattedString?background_image:URL?secondary_ctas:CTA?text_color:HexString?4 Main PlatformsTVWebiOSAndroidLong tail version issueA Version of Version Aversion Generally dont force version updates Older vers

5、ions still active as Apple/Google drops device support Older TVs still run older versions of our TV appMulti-step InterstitialsWhat are some possible solutions?Embedded WebView?Evolved Template with our Design System?CLCS(Customer Lifecycle Component System)CLCS A wrapper around our design system Su

6、pports multi-step interstitials Abstracts backend logic away from client Clients render UI and collect user inputHawkins Consumer Design SystemCLCS Components Stacks,Button,Input,Checkbox,etc.Fields String,Boolean,Number,etc.Effects Dismiss,Submit,Logs,etc.Anatomy of a CLCS Scree