Radi

Tiny (in size) front-end framework with no extra browser re-flows
GitHub
947
Created 7 years ago, last commit 2 months ago
5 contributors
346 commits
Stars added on GitHub, month by month
0
0
0
0
0
0
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
-0.1
/day
Last month
0.0
/day
Last 12 months
0.0
/day
npmPackage on NPM
radi
0.4.2
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
No dependencies
README

Important

This project is no longer maintained!

From ashes state management library "exome" was born. Go check it out, it works with any framework or as a vanilla standalone lib.


Radi

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.

npm version npm downloads gzip bundle size discord

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 radi-router-status Single-page application routing
radi-fetch radi-fetch-status 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.

Stay In Touch

License

MIT

Copyright (c) 2017-present, Marcis (Marcisbee) Bergmanis