SvenJS

A very small reactive web framework for very small apps

Demos

• TodoMVC. Source

Releases

• 0.3.2: Added _beforeMount life cycle method.
• 0.3.1: Added composition (importing components and referencing them in JSX by name). For instance: const SecondComponent = require("SecondComponent"). Referenced in render like this:
• 0.3.0: Renamed life cycle methods. New names: _didMount & _didUpdate

Goals

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

• 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 8-9K. Compressing can reduce the file size even more.

Install

Use the npm version:

  npm install svenjs

Build youself. Clone this repo and run

  npm run build

How to use

Here's a basic Universal component (Source):

const Svenjs = require("svenjs");
 
module.exports = Svenjs.create({
    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>)
    }
});

Related Modules

• svenjsx - JSX as used by SvenJS.

• svenjsx-loader - Webpack loader for SvenJS.