README

一个类似React的、3.5KB UI库

框架大小比较

自定义标签 • 简洁语法 • 虚拟DOM • 全栈 • IE8

Riot将自定义标签带到所有浏览器，包括IE8。想想React + Polymer，但语法更愉快，学习曲线更平缓。

标签定义

<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>

挂载

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

嵌套

自定义标签允许您使用HTML构建复杂视图。

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

HTML语法是Web上的事实语言，它被设计用于构建用户界面。语法是明确的，嵌套是语言固有的，属性提供了为自定义标签提供选项的干净方式。

虚拟DOM

• 绝对最小的DOM更新和重排量。
• 单向数据流：更新和卸载从父节点向下传递到子节点。
• 表达式预先编译并缓存以提高性能。
• 生命周期事件以提供更多控制。

接近标准

• 没有专有的事件系统。
• 为IE8进行事件标准化。
• 渲染的DOM可以与其他工具自由操作。
• 没有额外的HTML根元素或data-属性。
• 与jQuery兼容良好

使用您最喜爱的语言和工具

• 使用CoffeeScript、Jade、LiveScript、Typescript、ES6或您想要的任何预处理器创建标签。
• 与NPM、CommonJS、AMD、Bower或Component集成
• 使用Gulp、Grunt、Browserify或Wintersmith插件进行开发

简洁语法

• 强大快捷方式：class={ enabled: is_enabled, hidden: hasErrors() }。
• 无需额外的脑力负担，如render、state、constructor或shouldComponentUpdate。
• 插值：添加 #{ items.length + 1 }或class="item { selected: flag }"。
• 紧凑的ES6方法语法。

示例

• Riot Todo MVC
• Hackernews阅读器
• Vuejs通过Riotjs的示例
• 类似Flux的ES6 Todo
• 简单的TODO
• 计时器
• 另一个与React示例相当的Flux演示
• 各种实验
• 同构应用
• flux-riot todo
• 另一个Riot Todo MVC

教程

• 使用Riot、ES6和Webpack构建应用
• 使用Riot、Babel和Browserify构建应用
• 使用Riot构建标签页
• Riot的“React教程”
• 如何在Riot中打包“标签库”
• 另一个Riot的React教程
• 通过示例解释Riot自定义标签
• Riot编译器详解
• 将编译的Riot标签添加到您的Gulp + Browserify构建中

视频教程

• 简介
• 循环、事件和回调
• 使用Node & Express进行服务器端渲染

库

• 为Riot的类似Flux事件控制器
• flux-riot框架
• Cheftjs - 为Riot的中文框架

组件

• RiotGear
• Riot Bootstrap
• iToolkit

资源

• Riot + AngularJS
• Webpack模块加载器
• Riot + Meteor
• Riot Snake Game
• Riot标签语法检查器
• Riot 文档中译版 🇨🇳
• Riot + Wintersmith
• Riot预编译器插件用于lineman
• Riot Startkit - 受Flux启发的骨架应用 + WebPack + PostCSS
• Yeoman 生成器 - Riot 移动生成器
• Yeoman 生成器 - Riot 元素生成器
• Riot for TypeScript

性能

• Riot 与 React 性能对比： (Riot 版本) vs (React 版本)

杂项

• 与 RiotJS 作者 Tero Piirainen 的问答
• riot-detector（Chrome 扩展程序）

鸣谢

Riot 由许多聪明的人用❤️制作而成。感谢所有贡献者

 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/