UniversalJS

A functional reactive web library

Demo

• TodoMVC
• Clicky

Goals

• A web library that enables you to write code that can be accessed both serverside and clientside

• Time travel

  • Every component has time travel abilities built in by default.

• Enforced state immutability

  • With time travel abilities comes immutability

• Built in store implementation

  • With actions and emitter

• Synthetic event handler. Implemented in such a way that input events work across browsers.

• Focus on developer experience; keeping the programmer happy

• Minimal file size

  • The minified version is about 4.5K. Compressing can reduce the file size even more.

Install

  npm install universaljs

Syntax

A basic Universal component (Source):

const Universal = require("universaljs");

module.exports = Universal.createComponent({
    initialState: {
        clicks: 0
    },
    render() {
    const clickFunc = () =>{
      let clicks=this.state.clicks;
      this.setState({clicks: ++clicks });
    }
    return (<div id="row">
        <div id="app">
            <h3>The Click App</h3>
            <button onClick={clickFunc}>Why not click me?</button>
        </div>
        <div id="time-travel">
            <h3>Click stats</h3>
          <p>You have clicked on the button {this.state.clicks} times</p>
        </div>
    </div>)
    }
});

Road ahead

This is alpha software. It's not usable for everyone, but I want to urge anyone who's interested in using it to go ahead, report to me about any problems and submit PRs. Goals: More functional, more user friendly, more reactive, but most important of all: Keep it simple and Keep it small.

Related Modules

• universal-jsx - Universal JSX as used by UniversalJS.

• universal-jsx-loader - Webpack loader for Universal JSX.