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的組合，並且它不會導致代碼爆炸；你可以憑你的直覺使用它；他體積很小，幾近於無；它並不是重新發明的輪子，他是采各家之長，並把事情做到極簡，極好；
我們應該關註組件，而不是關註模版；
把有關聯的邏輯和展現放到一起，做成一個組件；這樣我們整個系統都會變的更加清晰；
riot.js教程【一】簡介