Building production applications with super flexibility

remote-ui

server - dynamically change client specs from server

client - dynamically load content from server & with dynamic layout / component / action specs

Installation

Server side

# install with yarn
yarn add @bridged.io/remote-ui-core

# install with npm
npm install @bridged.io/remote-ui-core

How to use

server side (express/ts)

import * as rui from "@bridged.io/remote-ui-core"

router.get("ui", (req, res)=>{

 const ui = new rui.Layout(
  {
   icon: rui.icons.material.note.uri,
   title: new rui.Text("hello world!")
  }
 );
 res.json(ui).send()
})

app side (flutter)

import "package:flutter_remote_ui/flutter_remote_ui.dart"

Widget buildRui(BuildContext context){
 final ruiData = fetchRuiDataFromServer();
 return RemoteUI.of(context).build(ruiiData);
}

Concepts & onthology will be documented under notion document, which will be added soon.

Platform support

Web

server
- language: ts/js @bridged.io/remote-ui-core
- examples: express, plain
client
- Language: ts/js
- Examples: vue

App

flutter-remote-ui
- examples: flutter remote ui example
android
ios

Remote Icons

import * as rui from "@bridged.io/remote-ui-core"

console.log(rui.icons.material.note)

/// logs 
/// RemoteIconData {
///  uri: 'material://Icons.note',
///  type: 'MATERIAL_NATIVE',
///  asset: undefined }

/// can be used directly on flutter

Remote Route Specs

import {routes} from "@bridged.io/remote-ui-core"

const MOCK_DATABASE = {
    users: [
        {
            id: "1",
            name: "softmarshmallow"
        },
        {
            id: "2",
            name: "GY"
        },
        {
            id: "3",
            name: "gin"
        },
    ]
}

function fetchUserFromMockDatabase(id: string): { id, name } {
    return MOCK_DATABASE.users.find((e) => e.id == id);
}

routes.register(
    new routes.spec(new routes.spec<{ id }, { id, name }>({
        key: "/users/:id",
        pattern: "/users/:id",
        dataFetcher: async (p) => {
            return fetchUserFromMockDatabase(p.id);
        },
        title: {
            default: "user detail",
            template: "user {{ data.name }}",
        }
    }))
)

const route = "/users/1";
const spec = routes.match(route)
routes.build(spec).then((d) => {
    console.log(d)
})

/// logs
/// { title: 'user softmarshmallow',
///  description: undefined,
///  icon: undefined,
///  route: '/users/1' }