Marcisbee/radi

Tiny (in size) front-end framework with no extra browser re-flows


repo name	Marcisbee/radi
repo link	https://github.com/Marcisbee/radi
homepage	https://radi.js.org
language	JavaScript
size (curr.)	3164 kB
stars (curr.)	947
created	2018-01-09
license	MIT License

Radi is a tiny javascript framework.

It’s built quite differently from any other framework. It doesn’t use any kind of diffing algorithm nor virtual dom which makes it really fast.

With Radi you can create any kind of single-page applications or more complex applications.

Installation

To install the stable version:

npm install --save radi

This assumes you are using npm as your package manager.

If you’re not, you can access these files on unpkg, download them, or point your package manager to them.

Browser Compatibility

Radi.js currently is compatible with browsers that support at least ES5.

Ecosystem

Project	Status	Description
radi-router		Single-page application routing
radi-fetch		HTTP client for Radi.js

Documentation

Getting started guide

Here are just a few examples to work our appetite.

Hello World example

Lets create component using JSX, tho it’s not mandatory we can just use hyperscript r('h1', 'Hello', this.sample, '!'). I’m using JSX for html familiarity and to showcase compatibility.

/** @jsx Radi.r **/

class Hello extends Radi.component {
  state() {
    return { sample: 'World' };
  }
  view() {
    return (
      <h1>Hello { this.state.sample } !</h1>
    )
  }
}

Radi.mount(<Hello />, document.body);

This example will mount h1 to body like so <body><h1>Hello World</h1></body>

Counter example (With Single File Component syntax)

This will be different as we’ll need to update state and use actions. Only actions can change state and trigger changes in DOM. Also we’ll be using our SFC syntax for *.radi files

Counter.radi

class {
  state = {
    count: 0
  }

  @action up() {
    return {
      count: this.state.count +1
    }
  }

  @action down() {
    return {
      count: this.state.count -1
    }
  }
}

<div>
  <h1>{ this.state.count }</h1>

  <button onclick={ () => this.down() } disabled={ this.state.count <= 0 }>-</button>

  <button onclick={ () => this.up() }>+</button>
</div>

Architecture

Radi fully renders page only once initially. After that listeners take control. They can listen for state changes in any Radi component. When change in state is caught, listener then re-renders only that part.

Other frameworks silently re-renders whole page over and over again, then apply changes. But radi only re-renders parts that link to changed state values.

To check out live repl and docs, visit radi.js.org.