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. Banner图二三事

      前  言 JRedu 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创 ...

  2. oop作业五 基本构架

    计算器的主体框架 链接 githu链接 031602510 面向对象的分类 分成四个类,分别有着自己的属性功能: 栈的学习 栈(stack)是一个"后进后出"的结构(已知)--从& ...

  3. 201521123003《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 我们利用Sca ...

  4. 201521123072《java程序设计》第七周总结

    201521123072<java程序设计>第七周总结 标签: java 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源 ...

  5. 201521123050 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 1.注释的应用 1.1使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在 ...

  6. 201521123119《Java程序设计》第4周学习总结

    1. 本周学习总结 2.书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上商城 ...

  7. 201521123056 《Java程序设计》第1周学习总结

    1. 本周学习总结 java语言结构简单,但功能齐全,同时能够在不同系统平台上编译,但编译的前提是系统要有安装JVM(即java虚拟机),JVM是java实现跨平台的最核心部分.本周还学习了JDK.J ...

  8. 201521123014《Java程序设计》第13周学习总结

    1. 本周学习总结 思维导图: 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ...

  9. MySQL数据库引擎介绍、区别

    数据库引擎介绍 MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另 ...

  10. Android UI系列--对话框（一）(AlertDialog,TimePickerDialog,DatePickerDialog,ProgressDialog)

    一.Dialog介绍 dialog就是一个在屏幕上弹出一个可以让用户做出一个选择,或者输入额外的信息的对话框,一个对话框并不会沾满我们整个的屏幕,并且通常用于模型事件当中需要用户做出一个决定后才会继续 ...