rad

radi

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

Showing:

Popularity

Downloads/wk

62

GitHub Stars

945

Maintenance

Last Commit

3yrs ago

Contributors

5

Package

Dependencies

0

Size (min+gzip)

7.5KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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 radi workspace on slack

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

ProjectStatusDescription
radi-routerradi-router-statusSingle-page application routing
radi-fetchradi-fetch-statusHTTP 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial