Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer

Last update: Sep 10, 2021

React Liberty

LGI slogan

Be free to choose between WebGL / Canvas / DOM / Native or any other UI renderer

This is a React library designed to abstract renderer by presenting three kinds of entities. They are Image, Text and Container.

React Liberty uses CSS Layout for laying components out, ReactMotion for declarative animations and Sunbeam for focus management.

Motivation

As a TV company LibertyGlobal support a few generations of TV devices: Horizon, Dawn, EOS exposing HTML UI, every of them have some specifity and nobody knows which shift we may expect in next few years. Let`s be prepared for the future by providing UI abstraction which allows to switch between renderers. So for example if we switch to Android we do not need to remake all apps we have, but use the same markup with a new Android renderer.

How it looks like at app developer level?

		<main>
          <Div>
            <List cyclic={false} orientation="vertical">
              <Div>
                <P>News</P>
                <List itemClass={AppAsset}
                      data={appService.getApplicationsByCategory('news')}/>
              </Div>
              <Div>
                <P>Music</P>
                <List itemClass={AppAsset}
                      data={appService.getApplicationsByCategory('music')}/>
              </Div>
              <BackToTopButton onSelect={this.goTop}/>
            </List>
          </Div>
        </main>

Just have a look at demo.

Usage

Inherit your root component component from React.Component and use Div, P and Img (capitalized) to declare UI. You may append ReactLiberty components to regular ReactDOM components.

Switch between DOM and WebGL by setting window.libertyRender = 'gl' or 'dom'

Build from sources

You will need npm v3.0 or higher. Do npm install, then:

  • npm run compile - compiles ReactLiberty library
  • npm run appprod - compiles production version of AppStore application placed in demo folder with all minifications and optimizations enabled. After this you may deploy content of demo folder as a standalone app with all dependencies baked in.
  • npm run appdev - starts development mode when build is initiated by file watcher. It compiles application every time source code is changed without minifying and optimizing output.

Performance hints

  • Set images dimensions via component properties initially to prevent relayouting when their loading is complete

Classes tree

This is a set of base components every ReactLiberty renderer should support:

ReactLiberty classes tree

GitHub

https://github.com/LibertyGlobal/ReactLiberty
You might also like...

React custom renderer for Appcelerator® Titanium™ SDK

React custom renderer for Appcelerator® Titanium™ SDK

⚠️ Maintainer wanted! Create an issue if you want to maintain it! react-titanium A React custom renderer for Appcelerator® Titanium™ SDK. This rendere

Mar 6, 2022

React renderer for NativeScript

React renderer for NativeScript

React NativeScript is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style. I'm always hanging o

Apr 21, 2022

A react renderer for blessed.

react-blessed A React custom renderer for the blessed library. This renderer should currently be considered as experimental, is subject to change and

May 17, 2022

a react renderer for the command line

This repository is now archived This project was originally created as an alternative to the Ink library, as a separate renderer for a real React comp

Dec 2, 2020

[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

React-TV · react-tv: React Renderer for low memory applications. react-tv-cli: React Packager for TVs. Currently under development. import React from

May 10, 2022

📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.

📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.

React SSD1306 A React Renderer for SSD1306 OLED chip on Raspberry Pi For those who doesn't have the device, a canvas-based web emulator is also includ

Apr 19, 2022

An experimental, JSX-compatible renderer for the Web Audio API

Wax An experimental, JSX-compatible renderer for the Web Audio API. I wrote Wax for my Manchester Web Meetup talk, Manipulating the Web Audio API with

Mar 22, 2022

React renderer with X11 as a target

React renderer with X11 as a target

react-x11 React custom rendering where side effects are communication with X11 server. The goal is to create a simple library where you would apply yo

Apr 26, 2022

React renderer for building user interfaces in Unity UI

React Unity React Unity is a way to build interactive UI in Unity3D using React. It can be used together with packages like Typescript, redux, i18next

May 16, 2022
Comments
  • 1. Create styleMapper for PIXI environment to support font styling

    styleMapper is a object that consumes CSS object and produces style string which PIXI.Text would accept

    For example

    { font-size: 24px, font-family: Arial, color: #cccccc; }

    will produce

    { font : '24px Arial', fill : 0xcccccc, }

    Reviewed by PixelsCommander at 2015-11-13 14:46
React Fiber Reconciler Renderer for Regl WebGL

react-regl This library enables Regl shader WebGL draw commands to be rendered directly as React components. Demos View demos in the Storybook There i

Apr 13, 2022
Osd-react-renderer - A custom React renderer for OpenSeadragon

osd-react-renderer A custom React renderer for OpenSeadragon viewer, built using

Jan 24, 2022
React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts
React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts

React Render Tracker React Render Tracker – a tool to discover performance issues related to unintended re-renders. React Render Tracker (RRT) present

May 4, 2022
High performance canvas> rendering for React components

react-canvas Introductory blog post React Canvas adds the ability for React components to render to <canvas> rather than DOM. This project is a work-i

May 8, 2022
⚛️ A React renderer for Figma
⚛️ A React renderer for Figma

React Figma A React renderer for Figma. Use React components as a source for your designs. ?? Compatible with react-native, react-sketchapp, react-pri

May 10, 2022
🇨🇭 A React renderer for Three.js (web and react-native)
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

May 15, 2022
⃝ A react null renderer

Nothing to see here ... Quite so. This package allows you to bring Reacts high-level component abstraction to Node, or wherever you need it. Why not m

Apr 18, 2022
A React renderer for Hardware.

React Hardware React Hardware enables you to build firmata-based hardware applications using a consistent developer experience based on JavaScript and

May 4, 2022
🇨🇭 A React renderer for Three.js (web and react-native)
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

May 19, 2022
A react renderer for browser's dev console
A react renderer for browser's dev console

Konsul is an abstraction of the browser's console that comes with a React renderer. It offers text styling, images, style inheritance, buttons with cl

Jan 3, 2022