An architecture for dynamic UI without client deployment

Overview

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

License

This project is distributed under the MIT License - see the LICENSE file for details.

Owner
Simon Park
I'm not a robot
Simon Park
Pokedex app built with Flutter (with lots of animations) using Clean Architecture

Flutter Pokedex Pokedex app built with Flutter App preview Video demo Installation Add Flutter to your machine Open this project folder with Terminal/

Pham Sy Hung 1.3k Nov 24, 2021
Platform to post/say something without sharing personal information.

Anon is an Open Source Application where it's users will be able to share their thoughts without their identity being revealed i.e Anonymous. When the

Ismael Shakverdiev 16 Oct 22, 2021
App dos Carros com Flutter e Clean Architecture

Carros Flutter - App Exemplo com Clean Architecture Possui apenas 3 telas para facilitar o entendimento. Arquitetura Baseado na proposta do Reso Coder

null 20 Nov 10, 2021
A Flutter application that recommends activities to do in free time. Made with Clean + Layered Architecture

im_bored_app Bored? is a Flutter application that suggests different activities to do in your free time. Available platforms: iOS, Android, iPadOS App

Batuhan Karababa 13 Sep 3, 2021
Lime client built using flutter

** This project ist OUT OF DATE and I am currently not able to maintain it ** What we are building Lime is a social media app, which allows you to pos

Sebastian Sellmair 356 Nov 29, 2021
A simple and easy to use Redis client for Dart

redis_dart A simple and minimalist Redis client for Dart See it in pub: https://pub.dev/packages/redis_dart and GitHub: https://github.com/gabrielpach

Gabriel Pacheco 5 Oct 24, 2021
ThingsBoard PE API client library for Dart developers.

ThingsBoard PE API client library for Dart developers. It's compatible with TB PE 3.3.0. Usage A simple usage example: import 'package:thingsboard_pe_

ThingsBoard - Open-source IoT Platform 39 Nov 16, 2021
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.

GraphQL Flutter ?? Bulletin See the v3 -> v4 Migration Guide if you're still on v3. Maintenance status: Low. Follow #762 for updates on the planned ar

Zino App B.V. 2.8k Nov 27, 2021
Flutter Shine is a library for pretty and realistic shadows, dynamic light positions, extremely customizable shadows, no library dependencies, text or box shadows based on content.

Flutter Shine Show some ❤️ and star the repo to support the project Flutter widget inspired by Shine Installation Add the Package dependencies: flut

Jonathan Monga 137 Nov 26, 2021
Okan YILDIRIM 34 Nov 19, 2021
Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter Shortcuts Show some ❤️ and ⭐ the repo Why use Flutter Shortcuts? Flutter Shortcuts Plugin is known for : Flutter Shortcuts Fast, performant &

Divyanshu Shekhar 26 Oct 2, 2021
Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter Shortcuts Compatibility ✅ Android ❌ iOS (active issue: iOS support for quick actions) Show some ❤️ and ⭐ the repo Why use Flutter Shortcuts? F

Devs On Flutter 26 Oct 2, 2021
An android app built using flutter that displays and forecast the specific city Weather and Climate for dynamic time event by collecting the data from API that is provided for free by OPENWEATHER site.

clima_weather_reporter A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get y

dev_allauddin 4 Nov 17, 2021
A scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay.

Swipe Image Gallery A scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay. While it is intend

null 8 Nov 17, 2021
Pokedex app built with Flutter (with lots of animations) using Clean Architecture

Flutter Pokedex Pokedex app built with Flutter App preview Video demo Installation Add Flutter to your machine Open this project folder with Terminal/

Pham Sy Hung 1.3k Nov 24, 2021
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

Languages: English (this file), Indonesian, Urdu, Chinese, Brazilian Portuguese, Spanish, Russian, Polish, Korean, French. About Get Installing Counte

Jonny Borges 5.3k Nov 23, 2021
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

Jonny Borges 5.4k Dec 2, 2021
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

Languages: English (this file), Indonesian, Urdu, Chinese, Brazilian Portuguese, Spanish, Russian, Polish, Korean, French. About Get Installing Counte

Jonny Borges 5.3k Nov 24, 2021
A code generator to write widgets as function without loosing the benefits of classes.

Widgets are cool. But classes are quite verbose: class Foo extends StatelessWidget { final int value; final int value2; const Foo({Key key, thi

Remi Rousselet 432 Dec 1, 2021
A Boilerplate Project which adopts the concept of Clean Architecture and Modularization.

Flutter-Works Boilerplate Table Of Content Overview Getting Started Requirement Setup Setup Firebase Android IOS Change Package Name Running/Debugger

KodingWorks 30 Nov 17, 2021
A flutter clean architecture series, the way we build clean apps.

Flutter Clean Archeticture Series ?? "Making the world a better place" ✅ Full Articles You can check out the full Medium articles on devmuaz ✅ Branche

AbdulMuaz Aqeel 117 Nov 22, 2021
Hours tracker app done with clean Architecture

A small project done with clean architecture in Flutter using BLoC as the state management. All the development is documented in a video series on YouTube.

Alexandru Pavel 4 May 20, 2021
Forms in Flutter without hassle!

Super Form Quick, familiar and extensible forms in Flutter ?? No magical configuration required ?? Managing form state with standard Flutter forms can

Bartosz Wiśniewski 7 Nov 5, 2021
Simple tool to open WhatsApp chat without saving the number, developed using Google's Flutter Framework. for Android/ IOS/ Desktop/ Web

OpenWp Simple tool to open WhatsApp chat without saving the number Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About

Swarup Bhanja Chowdhury 14 Aug 8, 2021
Android App written with Flutter/Dart to navigate medium.com without limitations.

Medium Unlimited An Android application written with Flutter/Dart to read medium.com without limitations. Features Read medium without reading limits

null 13 Nov 21, 2021
COVID-19 application made with Flutter, following Test Driven Development (TDD) and Clean Architecture along with Internationalization with JSON.

Covid App COVID-19 application made with Flutter, following Test Driven Development (TDD) and Clean Architecture along with Internationalization with

Sandip Pramanik 3 May 24, 2021
Platform to post/say something without sharing personal information.

Anon is an Open Source Application where it's users will be able to share their thoughts without their identity being revealed i.e Anonymous. When the

Ismael Shakverdiev 16 Oct 22, 2021
Flutter MVU architecture/state management package

mvu_flutter No mutability. No builders. No connectors. No reducers. No StreamControllers and subscription management. A truly declarative state manage

Yakov Karpov 7 Jul 29, 2021