Server Driven UI Demo
- Server Driven UI(SDUI)는 서버에서 클라이언트의 UI 컴포넌트를 관리하는 방식.
- 클라이언트 배포없이 API 응답을 변경하는 것만으로 UI 변경이 가능한 동시에 하위 호환성을 확보할 수 있다.
- Rust, GraphQL, Flutter로 간단히 동작하는 SDUI 데모를 구현한다:
- Flutter의 체계적인 위젯 시스템이 UI 컴포넌트 개념에 부합한다.
- flutter/material 라이브러리가 material design system을 높은 수준으로 구현하고 있어 스키마 디자인이 수월하다.
- GraphQL은 재사용 가능한 fragment를 지원하기 때문에 컴포넌트 인터페이스를 주고받기 적합하다.
Description
- 스크린(화면을 구성하는 가장 큰 단위) 안에 다양한 컴포넌트가 배치된다.
screenType인자로 화면 유형을 선택하면 서버가 해당 화면에 맞는 컴포넌트를 응답한다.- 각 컴포넌트는
Component인터페이스를 구현하며,screen.components필드는[Component!]!를 반환한다. - 클라이언트는 사용 가능한 모든 컴포넌트를 요청하며, 응답받은 컴포넌트의
__typename과 위젯을 매핑한다.
Component fragments
fragment AppBar on AppBar {
__typename
title
}
fragment TextField on TextField {
__typename
labelText
placeholder
enabled
}
fragment TextButton on TextButton {
__typename
text
route
}
fragment Container on Container {
__typename
padding
color {
value
alpha
}
child {
... AppBar
... TextField
... TextButton
}
}
fragment GridView on GridView {
__typename
columnCount
children {
... AppBar
... TextField
... TextButton
... Container
}
}
Request
query getScreen {
screen(screenType: HOME) {
components {
... AppBar
... TextField
... TextButton
... Container
... GridView
}
}
}
Response
{
"data": {
"screen": {
"components": [
{
"__typename": "AppBar",
"title": "Home"
},
{
"__typename": "GridView",
"columnCount": 2,
"children": [
{
"__typename": "Container",
"padding": 0,
"color": {
"value": 8440772,
"alpha": 255
},
"child": {
"__typename": "TextButton",
"text": "Sign in",
"route": "/sign_in"
}
},
{
"__typename": "Container",
"padding": 0,
"color": {
"value": 8440772,
"alpha": 255
},
"child": {
"__typename": "TextButton",
"text": "Sign up",
"route": null
}
}
]
}
]
}
}
}
Future work
- 클라이언트 타이핑 고도화
- 컴포넌트 스타일 고도화
- 중첩 컴포넌트
- 컴포넌트 페이지네이션
- 특정 컴포넌트 리로딩
References
- 박호준, "GraphQL이 가져온 에어비앤비 프론트앤드 기술의 변천사", DEVIEW 2020, 2020.
- 김도훈, "Server Driven UI (Feat.Flutter)", 2020.
- Tom Lokhorst, "Server Driven UI", Tom Lokhorst's blog, 2020.
- Ryan Brroks, "A Deep Dive into Airbnb’s Server-Driven UI System", 2021.
License
This project is distributed under the MIT License - see the LICENSE file for details.
![Self Host Group Chat App (firebase + clean architecture) is full functional group chat where you can create new groups and update profile and communicate in different groups easily. there 2 auth firebase method [Google & Email Password]](https://user-images.githubusercontent.com/10207753/132244030-df57966a-5fd2-44de-80a0-be4f5bbd6c20.png)
36 Nov 12, 2022
3 Feb 3, 2022
9 Oct 28, 2022
34 Oct 3, 2022
18 Sep 13, 2022
10 Oct 25, 2022
1 Oct 2, 2022
104 Dec 27, 2022
1.4k Jan 4, 2023
329 Dec 29, 2022