Tiny (in size) front-end framework with no extra browser re-flows
Branch: master
Clone or download
Marcisbee Merge pull request #34 from radi-js/form-validation
Adds form validation controls
Latest commit bfda930 Sep 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.webpack Began cleanup. Mar 8, 2018
dist Adds form validation controlls Sep 9, 2018
docs Update readme.md May 21, 2018
lib Remove unused listeners from memory Apr 20, 2018
src Adds form validation controlls Sep 9, 2018
.babelrc Merge branch 'refactor' of git://github.com/rafaelklaessen/radi into … Mar 15, 2018
.eslintrc.js Update lint Sep 4, 2018
.gitignore Deleted .vsconfig. Mar 10, 2018
.npmignore Began cleanup. Mar 8, 2018
.travis.yml Adds deploy key Aug 15, 2018
LICENSE Adds MIT licence Feb 12, 2018
README.md Update README.md Aug 15, 2018
changelog.json Adds form validation controlls Sep 9, 2018
package-lock.json Changes how listeners behave inside each other May 31, 2018
package.json Adds form validation controlls Sep 9, 2018
rollup.config.js

README.md

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

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