fduarte42/riot

A React- like, 3.5K user interface library

dev-master 2015-09-07 13:38 UTC

MIT

README

A React- like, 3.5KB UI lib

Framework Size Comparison

Custom tags • Concise syntax • Virtual DOM • Full stack • IE8

Riot brings custom tags to all browsers, including IE8. Think React + Polymer but with enjoyable syntax and a small learning curve.

Tag definition

<timer>

  <p>Seconds Elapsed: { time }</p>

  this.time = opts.start || 0

  tick() {
    this.update({ time: ++this.time })
  }

  var timer = setInterval(this.tick, 1000)

  this.on('unmount', function() {
    clearInterval(timer)
  })

</timer>

Mounting

riot.mount('timer', { start: 0 })

Nesting

Custom tags lets you build complex views with HTML.

<timetable>
  <timer start="0"></timer>
  <timer start="10"></timer>
  <timer start="20"></timer>
</timetable>

HTML syntax is the de facto language on the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language and attributes offer a clean way to provide options for custom tags.

Virtual DOM

• Absolutely the smallest possible amount of DOM updates and reflows.
• One way data flow: updates and unmounts are propagated downwards from parent to children.
• Expressions are pre-compiled and cached for high performance.
• Lifecycle events for more control.

Close to standards

• No proprietary event system.
• Event normalization for IE8.
• The rendered DOM can be freely manipulated with other tools.
• No extra HTML root elements or data- attributes.
• Plays well with jQuery.

Use your dearest language and tools

• Create tags with CoffeeScript, Jade, LiveScript, Typescript, ES6 or any pre-processor you want.
• Integrate with NPM, CommonJS, AMD, Bower or Component
• Develop with Gulp, Grunt, Browserify, or Wintersmith plugins

Concise syntax

• Power shortcuts: class={ enabled: is_enabled, hidden: hasErrors() }.
• No extra brain load such as render, state, constructor or shouldComponentUpdate
• Interpolation: Add #{ items.length + 1 } or class="item { selected: flag }"
• Compact ES6 method syntax.

Demos

• Riot Todo MVC
• Hackernews reader
• Vuejs examples by Riotjs
• Flux-like ES6 Todo
• Simple TODO
• Timer
• Another flux demo caparable to React ones
• Various experiments
• Isomorphic application
• flux-riot todo
• Another Riot Todo MVC

Tutorials

• Building Apps with Riot, ES6 and Webpack
• Building Apps with Riot, Babel and Browserify
• Building tabs with Riot
• The "React tutorial" for Riot
• How to package "tag libraries" in Riot
• Another React tutorial with Riot
• Riot Custom Tag by Example
• Riot Compiler Explained
• Adding compiled Riot tags to your Gulp + Browserify build

Video Tutorials

• Introduction
• Loops, Events and Callbacks
• Server Rendering with Node & Express

Libraries

• Flux- like event controller for Riot
• flux-riot framework
• Cheftjs - chinese framework for Riot

Components

• RiotGear
• Riot Bootstrap
• iToolkit

Resources

• Riot + AngularJS
• Module loader for WebPack
• Riot + Meteor
• Riot Snake Game
• Riot Tag Syntax Checker
• Riot 文档中译版 🇨🇳
• Riot + Wintersmith
• Riot precompiler plugin for lineman
• Riot Startkit - Flux inspired skeleton app + WebPack + PostCSS
• Yeoman generator - Generator riot mobile
• Yeoman generator - Generator riot element
• Riot for TypeScript

Performance

• Riot vs React performance: (Riot version) vs (React version)

Miscellaneous

• Q&A with RiotJS author Tero Piirainen
• riot-detector（Chrome Extension）

Credits

Riot is made with ❤️ by many smart people. Thanks to all the contributors

 project  : riot
 repo age : 1 year, 11 months
 active   : 392 days
 commits  : 1653
 files    : 213
 authors  :
   552  Gianluca Guarini        33.4%
   400  Tero Piirainen          24.2%
   150  Aurimas                 9.1%
    56  Tsutomu Kawamura        3.4%
    45  rsbondi                 2.7%
    43  Alberto Martínez       2.6%
    27  Marcelo Eden            1.6%
    20  Kalman Speier           1.2%
    18  Juha Lindstedt          1.1%
    18  Márcio Coelho          1.1%
    15  Anton Heryanto          0.9%
    14  andynemzek              0.8%
    14  Greg                    0.8%
    13  a-moses                 0.8%
    11  Hrvoje Šimić          0.7%
    10  Andy VanEe              0.6%
     9  Avner Peled             0.5%
     8  Richard Bondi           0.5%
     8  Mark Henderson          0.5%
     8  Andreas Heintze         0.5%
     7  Lee Tagg                0.4%
     7  marciojcoelho           0.4%
     7  Ashley Brener           0.4%
     7  Tianxiang Chen          0.4%
     7  Avnerus                 0.4%
     6  hemanth.hm              0.4%
     6  sethyuan                0.4%
     6  Jens Anders Bakke       0.4%
     5  jigsaw                  0.3%
     5  Tatu Tamminen           0.3%
     5  midinastasurazz         0.3%
     4  blissland               0.2%
     4  Jasmine Hegman          0.2%
     4  xieyu33333              0.2%
     4  Giovanni Cappellotto    0.2%
     4  Eric Baer               0.2%
     3  Artem Medeusheyev       0.2%
     3  scott                   0.2%
     3  Jim Sparkman            0.2%
     3  korige                  0.2%
     3  Alan R. Soares          0.2%
     3  Magnus Wolffelt         0.2%
     2  Mohammed Irfan          0.1%
     2  Eric Capps              0.1%
     2  Sergey Martynov         0.1%
     2  Simon JAILLET           0.1%
     2  Antonino Porcino        0.1%
     2  Steve Clay              0.1%
     2  Alexis THOMAS           0.1%
     2  Tim Kindberg            0.1%
     2  Tobias Baunbæk         0.1%
     2  Jon Wolfe               0.1%
     2  crazy2be                0.1%
     2  jmas                    0.1%
     2  luffs                   0.1%
     2  oldpig                  0.1%
     2  Andrew Feng             0.1%
     2  yibuyisheng             0.1%
     2  Žiga                   0.1%
     2  陈海峰               0.1%
     2  Bolt                    0.1%
     2  Andrew Kiellor          0.1%
     2  Markus A. Stone         0.1%
     2  Collin Green            0.1%
     2  Andrew Luetgers         0.1%
     2  Milosz                  0.1%
     2  Moot Inc                0.1%
     2  Mtpc                    0.1%
     2  Antoine Goutagny        0.1%
     2  Philippe CHARRIERE      0.1%
     2  David Salazar           0.1%
     1  kylobite                0.1%
     1  Andrew L. Van Slaars    0.1%
     1  Ari Makela              0.1%
     1  Barkóczi Dávid        0.1%
     1  Benoit Hirbec           0.1%
     1  Boris Huai              0.1%
     1  Claudio Holanda         0.1%
     1  Constantin Rack         0.1%
     1  Courtney Couch          0.1%
     1  Danil Semelenov         0.1%
     1  Eliseo Arias            0.1%
     1  Fernando Correia        0.1%
     1  Ian Walter              0.1%
     1  Ivan Saorin             0.1%
     1  Joel Thornton           0.1%
     1  Jonathan Dumaine        0.1%
     1  Jonny Buchanan          0.1%
     1  Jorrit Schippers        0.1%
     1  Justin Dorfman          0.1%
     1  Juwan Yoo               0.1%
     1  Liu Jin                 0.1%
     1  Marcin Jekot            0.1%
     1  Matthew McCullough      0.1%
     1  Maxence Dalmais         0.1%
     1  Mike Breen              0.1%
     1  Mike Ward               0.1%
     1  Patrik Buckau           0.1%
     1  Quim Calpe              0.1%
     1  Riccardo Gueli Alletti  0.1%
     1  Ryan O’Hara           0.1%
     1  Sam Morgan              0.1%
     1  Simone Vittori          0.1%
     1  Steel Brain             0.1%
     1  Steven Koch             0.1%
     1  TZ | 天猪             0.1%
     1  Tenor Biel              0.1%
     1  The Gitter Badger       0.1%
     1  Trent Ogren             0.1%
     1  Umut Sirin              0.1%
     1  XiongLiding             0.1%
     1  Zach Aysan              0.1%
     1  afc163                  0.1%
     1  borishuai               0.1%
     1  boynet                  0.1%
     1  h2so5                   0.1%
     1  jamesnolanverran        0.1%
     1  nino-porcino            0.1%
     1  typicode                0.1%
     1  xieyu03                 0.1%
     1  なりたけいすけ   0.1%

https://muut.com/riotjs/