kopug memo

名古屋で働くとあるWebエンジニアの覚書。

Riot.js に 触れてみる #0

f:id:kopug:20170104161938p:plain

フロントエンド系のライブラリ/フレームワークはいくつもありますね。

  • AngularJS
  • React.js
  • Riot.js
  • vue.js
  • Backbone.js
  • Ember.js
  • Knockout.js

用途によって必要なライブラリは変えていくべきですが、今回は Riot.js について触れてみようと思います。

riotjs.com

Riot.js は... HTML・JS・CSSを、普通に理解していて 「説明書を読まない人」向け
と、以下の利用に書かれているだけのこともあり、非常に直感的に分かりやすい書き方をします。

Riot.js in WPD-Week // Speaker Deck

Riot.js の特徴

カスタムタグ

いわゆるコンポーネント指向と言われているもので、独自のタグを作ることができます。
以下はtodoタグを作っている例です。

<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/CSS/JavaScriptを統合して、再利用可能なコンポーネントを形成します。

人間に読みやすい

カスタムタグにしていくと、HTMLのみで複雑なビューを作成できます。大元のHTMLは以下のようになります。

<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>

このようにカスタムタグを入れ子で配置したりすることもできます。

小さなサイズ

  • polymer.html - 45.69KB (gzip)
  • react.min.js - 45.05KB (gzip)
  • riot.min.js - 9.81KB(gzip)

小さいので、ソースコード自体を読むのもそんなに苦ではないですし、余計な機能が一切省かれているのも個人的には好き。

etc

ここに書いてあることは全て、riot.js のサイトに書かれていることですので、もっと詳しく知りたい方は見てみてください。