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.

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.

		<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.

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'

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.

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

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