React Liberty

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: