天天看點

riot.js教程【一】簡介

題記

這是一個系列文章的第一篇

如果關注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的組合,并且它不會導緻代碼爆炸;你可以憑你的直覺使用它;他體積很小,幾近于無;它并不是重新發明的輪子,他是采各家之長,并把事情做到極簡,極好;

我們應該關注元件,而不是關注模版;

把有關聯的邏輯和展現放到一起,做成一個元件;這樣我們整個系統都會變的更加清晰;

繼續閱讀