类似 React 的微型 UI 库

自定义标签 • 快速上手的语法 • 虚拟 DOM • 体积超小

为什么需要一个新的 UI 库?

前端世界的库已经太多了,但坦白说我们认为终极解决方案仍有待探索。我们相信 Riot 为解决前端开发的难题提供了正确的方向。React 似乎能够解决问题,但其自身仍有重大弱点,这些弱点正是 Riot 要克服的。

理由如下:

1. 自定义标签

Riot 在所有浏览器上支持自定义标签。

<todo>

  <!-- 布局 -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- css -->
  <style scoped>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- 业务逻辑 -->
  <script>
    this.items = []

    add(e) {
      var input = e.target[0]
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

自定义标签将相关的 HTML 和 JavaScript 粘合在一起,成为一个可重用的组件。可以认为它同时具有 React 和 Polymer 的优点,但是语法更友好,学习成本更小。

对阅读友好

自定义标签允许你用HTML来编写复杂的用户界面。你的应用会长成这个样子:

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

HTML 是web世界的 标准 语言,它就是被设计用来描述用户界面的。语法明确,语言天生支持嵌套,而属性可以作为向自定义标签提供选项的简洁手段。

Riot 标签首先被 编译 成标准 JavaScript,然后在浏览器中运行。

虚拟 DOM

与标准保持一致

对工具友好

2. 简单,最小化

最小化是 Riot 区别于其它库的重要特点:

1. 友好的语法

设计目标之一是尽量少写脚手架(boilerplate)代码就能实现强大的标签语法:

2. 非常低的学习成本

与其它 UI 库比较,Riot 所提供的 API 方法的数量要少 10 至 100倍。这意味着

3. 麻雀极小

react.min.js – 34.89KB

polymer.min.js – 49.38KB

riot.min.js – 10.38KB

4. 五脏俱全

Riot 拥有创建现代客户端应用的所有必需的成分:

Riot 是一个 “开放栈”. 它主要面向不希望被框架所牵制的开发人员。它提供的一般化的工具让开发者可以对设计模式进行混合和匹配。 类似 Facebook Flux 的系统完全可以 自制.

看了下 riot.js 的例子, 感觉如此干净, 惊呆了. @paulbjensen

刚刚把玩了 #RiotJS 一个小时. 很快就与 Gulp, Browsesify, 和 Babel 集成好了. 到目前为止非常喜欢! @AndrewDelPrete

今天我首次试用了 #riotjs 2.0 。必须承认这将会是一段长期的『恋情』#js 强烈推荐. @gianlucaguarini

我喜欢 #reactjs 加 #flux 的思想但 #riotjs 加 #riotcontrol 更好! @tscok

看到了 RiotJS https://muut.com/riotjs/ — 完全被它的简单折服了. @defeated

把玩了 riot.js ,对它的喜爱远胜 React. 最小化, 快速,还有一套全面的 API. @juriansluiman

结论

Riot 是普通人的 Web Component. 可以理解成不那么臃肿的 React + Polymer。 使用起来非常直观,而且轻若无物。它现在就好用。我们并没有重新发明轮子,而是从已有的工具中提取精华,构建出尽量简单的工具。

我们应该关注组件而不是模板. 引用 React 作者的话:

“模板分离的是技术,而不是关注点。”

通过把相关的布局和逻辑放在同一个组件中,整个系统变得整洁清晰了。 我们为这个重要的洞见向 React 致敬。

最早的博客文章

从 React 到 Riot 2.0