< timer >
< p > Seconds Elapsed: { state.time } </ p >
< script >
export default {
tick ( ) {
this . update ( { time : ++ this . state . time } )
} ,
onBeforeMount ( props ) {
// create the component initial state
this . state = {
time : props . start ,
}
this . timer = setInterval ( this . tick , one thousand )
} ,
onUnmounted ( ) {
clearInterval ( this . timer )
} ,
}
</ script >
</ timer >
// mount the timer with its initial props
riot . mount ( 'timer' , { start : zero } )
< timetable >
< timer start =" zero " > </ timer >
< timer start =" ten " > </ timer >
< timer start =" twenty " > </ timer >
</ timetable >
-
Absolutely the smallest possible amount of DOM updates and reflows. -
Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks. -
One way data flow: updates and unmounts are propagated downwards from parent to children. -
No "magic" or "smart" reactive properties or hooks -
Expressions are pre-compiled and cached for high performance. -
Lifecycle methods for more control.
-
No proprietary event system. -
Future proof thanks to the javascript module syntax. -
The rendered DOM can be freely manipulated with other tools. -
No extra HTML root elements, data- attributes or fancy custom attributes. -
No new syntax to learn. -
Plays well with any frontend framework.
-
Create components with CoffeeScript, Jade, LiveScript, Typescript, ES6 or any pre-processor you want. -
Build with @riotjs/cli , webpack , Rollup , parcel , Browserify . -
Test however you like; you can load your riot tags directly in node
-
@riotjs/cli - CLI to locally compile your tags to javascript -
@riotjs/ssr - Super simple server side rendering -
@riotjs/hydrate - Hydration strategy for your SPA -
@riotjs/route - Isomorphic router -
@riotjs/lazy - Lazy components loader -
@riotjs/hot-reload - Live reload plugin -
@riotjs/compiler - Advanced tags compiler -
@riotjs/parser - HTML parser -
@riotjs/dom-bindings - Expressions based template engine -
@riotjs/custom-elements - native custom elements implementation
$ git clone git@github.com :riot/riot.git && cd riot
$ git checkout -b feature/my-awesome-patch
$ npm i
# To build and test riot $ make riot # To build without testing $ make raw
5) Pull request only against the dev
branch making sure you have read our pull request template
|