題記
這是一個系列文章的第一篇
如果關注riot.js的人，可以關注我的部落格；
我接下來會持續不斷的發這一塊的文章；
系列文章内容大多來自官網翻譯；
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的組合，并且它不會導緻代碼爆炸；你可以憑你的直覺使用它；他體積很小，幾近于無；它并不是重新發明的輪子，他是采各家之長，并把事情做到極簡，極好；
我們應該關注元件，而不是關注模版；
把有關聯的邏輯和展現放到一起，做成一個元件；這樣我們整個系統都會變的更加清晰；
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)