Riotjs简介

Riotjs是一款简单的、优雅的、组件化UI前端开发框架；

他支持自定义标签（custom tags），拥有令人愉悦的语法，优雅的API和非常小的体积；

为什么需要一个新的界面库

前端开发框架的确已经非常多了，但还是没有令人足够满意的东西，reactjs貌似是来解决问题的，但是用过的人都知道，它有很多令人不爽的弱点，我们相信Riotjs找到了解决问题的那个微妙的平衡点，足以让开发者愉悦的用他解决界面问题；

自定义标签（custom tags）

Riotjs为所有浏览器带来了自定义标签

<todo>

<!-- layout -->

<h3>{ opts.title }</h3>

<ul>

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

</ul>

<form onsubmit={ add }>

<input ref="input">

<button>Add #{ items.length + 1 }</button>

</form>

<!-- style -->

<style>

h3 {

font-size: 14px;

}

</style>

<!-- logic -->

<script>

this.items = []

add(e) {

e.preventDefault()

var input = this.refs.input

this.items.push(input.value)

input.value = ''

}

</script>

</todo>

自定义标签把HTML和JS组合在一起，使之成为一个可复用的UI组件；

如你所见，riotjs有令人愉悦的语法和平缓的学习曲线；这是reactjs和polymer不能比的；

可读性

你可以使用自定义标签创建复杂的用户界面

来看看下面这个界面（如果你用传统的写法，会写成什么样呢？）

<body>

<h1>Acme community</h1>

<forum-header/>

<div class="content">

<forum-threads/>

<forum-sidebar/>

</div>

<forum-footer/>

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

</body>

Html语法是用来创建用户界面的；

他具备可嵌套的标签和标签属性；

这为自定义标签提供了基础支撑；

Riotjs先把Riotjs标签解析成纯JS，再在浏览器内执行；

DOM绑定

最少的DOM更新

单向数据流：无论是更新还是卸载，都是从父组件传递给子组件

为了更高的性能，riotjs会预编译表达式，缓存表达式结果；

为了更好的可控性，riotjs提供了很多自定义标签的生命周期事件；

支持服务端渲染

贴近标准

没有专有的事件系统

不需要额外的附加库

编译渲染出来的DOM可以被其他库自由的操纵；

不需要特别的HTML根标签

DOM标签上不需要data-属性

可以和jquery很好的兼容

工具链友好

可以使用ES6，TypeScript，CoffeeScript，Jade，LiveScript等工具创建标签；

可以使用NPM，CommonJS，AMD，Bower，Component等工具整合项目；

可以使用Gulp，Browserify，Grunt等工具进行开发；

极简原则

极简原则使得riotjs不同于其他的类库

易用的语法

Riotjs的主要设计目标就是创建一套极简的标签撰写语法；

便捷的简写形式： class={ enabled: is_enabled, hidden: hasErrors() }

不用关心render, state, constructor

内联表达式: Add #{ items.length + 1 } or class="item { selected: flag }"

不一定非得吧逻辑代码放到<script>标签内

ES6语法支持

平缓的学习曲线

Riotjs的API数量是同类js库的1/10或者1/100

不需要花大力气去学习

更少的专有的东西，更多的标准的东西；

体积非常小

polymer.html – 49.38KB (gzip)

react.min.js – 34.89KB (gzip)

riot.min.js – 10.38KB (gzip)

更少的BUG

下载压力更小，解析速度更快

可嵌入的，库的体积应该比应用程序的体积小才对

维护成本比较低，riot不需要一个非常庞大的团队来维护他

麻雀虽小，五脏俱全

Riotjs拥有所有必要的模块：

响应式界面编程所必须的模块；

为独立的模块编写API所必须的事件库；

控制URL前进后退功能所必须路由模块

总结

Riot是普适性的WEB UI组件化解决方案，它就像React和Polymer的组合，并且它不会导致代码爆炸；你可以凭你的直觉使用它；他体积很小，几近于无；它并不是重新发明的轮子，他是采各家之长，并把事情做到极简，极好；

我们应该关注组件，而不是关注模版；

把有关联的逻辑和展现放到一起，做成一个组件；这样我们整个系统都会变的更加清晰；

riot.js教程【一】简介的更多相关文章

  1. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  2. riot.js教程【四】Mixins、HTML内嵌表达式

    前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...

  3. riot.js教程【五】标签嵌套、命名元素、事件、标签条件

    前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...

  4. riot.js教程【六】循环、HTML元素标签

    前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...

  5. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  6. riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法

    基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...

  7. 阅读：重新介绍 JavaScript（JS教程）

    这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...

  8. Bootstrap：教程、简介、环境安装

    ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...

  9. 【js】【读书笔记】廖雪峰的js教程读书笔记

    最近在看廖雪峰的js教程,重温了下js基础,记下一些笔记,好记性不如烂笔头嘛 编写代码尽量使用严格模式 use strict JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行 执 ...

随机推荐

  1. NHibernate教程(8)--巧用组件

    本节内容 引入 方案1:直接添加 方案2:巧用组件 实例分析 结语 引入 通过前面7篇的学习,有点乏味了~~~这篇来学习一个技巧,大家一起想想如果我要在Customer类中实现一个Fullname属性 ...

  2. [转载]Python实现浏览器自动化操作

    原文地址:Python实现浏览器自动化操作作者:rayment   最近在研究网站自动登录的问题,涉及到需要实现浏览器自动化操作,网上有不少介绍,例如使用pamie,但是只是支持IE,而且项目也较久没 ...

  3. ★10 个实用技巧，让Finder带你飞~

    10 个实用技巧,让 Finder 带你飞 Finder 是 Mac 电脑的系统程序,有的功能类似 Windows 的资源管理器.它是我们打开 Mac 首先见到的「笑脸」,有了它,我们可以组织和使用 ...

  4. 【集美大学1411_助教博客】团队作业7——Alpha冲刺之事后诸葛亮

    写在前面的话 alpha阶段都顺利完成了,大家这次作业完成得都很认真.我觉得通过这些问题,大家既可以回顾自己的alpha阶段,又可以给beta阶段做一些指引.但看了所有组的博客,没有一个组在这些问题之 ...

  5. Java单元测试之覆盖率统计eclemma

    安装 有两种安装方法 下载安装(推荐) 地址: http://sourceforge.net/projects/eclemma/ 将解压后的features和plugins目录下的文件分别拷贝到Ecl ...

  6. 团队作业4——第一次项目冲刺 SeCOnd DaY

    项目冲刺--Double Kill 喂喂喂,你好你好,听得见吗?这里是天霸动霸.tua广播站,我是主播小学生￥-￥ 第一次敏捷冲刺平稳的度过了第一天,第一天的任务大家也圆满完成啦[拍手庆祝],那么今天 ...

  7. 团队作业8----第二次项目冲刺（beta阶段）5.25

    Day7-05.25 1.每日会议 会议内容: 1.今日对整个项目进行了一个总结. 2.讨论了这次项目中的不足和每个人的贡献. 讨论照片:拍摄者 周迪 2.任务分配情况: 每个人的工作分配表: 队员 ...

  8. 扫雷游戏制作过程（C#描述）：第四节、菜单操作

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 菜单操作 我们现在的程序单击菜单的时候不会有任何反应,这一节我们主要介绍菜单的相关代码,使得菜单能够正常使用. 现在我们希望在对应级别 ...

  9. 201521123093 java 第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  10. 201521123001《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...