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.
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 at least ES5.
| Project | Status | Description |
|---|---|---|
| radi-router |  |
Single-page application routing |
| radi-fetch |  |
HTTP client for Radi.js |
Here are 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 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>
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>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.
Copyright (c) 2017-present, Marcis (Marcisbee) Bergmanis
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent