Radi is a tiny (3kB minified & gzipped) 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 with no dependencies required! Oh did I mention that Radi.js is faster than any popular framework? And yes it is.
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.
Radi.js currently is compatible with browsers that support ES6. In stable release v1 it will support ES5 compatible browsers and even some below that, yes - looking at IE8 too.
| Project | Status | Description |
|---|---|---|
| radi-router |  |
Single-page application routing |
Documentation is currently being written. For now just a few examples to work our appetite.
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 r **/
const { r, mount, component } = radi;
const main = component({
view: function() {
return (
<h1>Hello { this.sample } !</h1>
)
},
state: {
sample: 'World'
}
});
mount(new main(), document.body);This example will mount h1 to body like so <body><h1>Hello World</h1></body>
This will be different as we'll need to update state and use actions. We'll need to use binder function l(..). It binds any value to real DOM. When something in this function updates, DOM will change too.
/** @jsx r **/
const { r, l, mount, component } = radi;
const counter = component({
view: function() {
return (
<div id="app">
<div class="counter">
{ l(this.counter) }
</div>
<div class="buttons">
<button onclick={ this.down }
disabled={ l(this.counter <= 0) }>-</button>
<button onclick={ this.up }>+</button>
</div>
</div>
)
},
state: {
counter: 0
},
actions: {
up() {
this.counter += 1;
},
down() {
this.counter -= 1;
}
}
});
mount(new counter(), document.body);View this example on codepen. In codepen I use hyperscript instead jsx for more diverse example purpose.
I'm in process of creating some cool examples and diagrams of how exactly Radi works.
Copyright (c) 2017-present, Marcis (Marcisbee) Bergmanis
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent