はじめに
Riot.js勉強のため、Live demoのコードを参考にまとめてみました。
Riot.jsとは？
Riotは、公式ページに
A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY
とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポー>ネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。
そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、>ReactとPolymerのいいとこ取りのような感じになっています。ただし、次のような大きな違いがあります。
React: JavaScript(JSX)の中に、HTMLを書く
Riot: HTMLの中に、JavaScriptやCSSを書く
スクリプトサイズは24分の1。Reactが優に100KBを越えるのに対して、Riotはたった>5.7KB。gzip圧縮かければ2.5KB。ちなみに、Riotの開発元のMUUTは既存サイトにエンベッドして使う、フォーラムツールを作っているチームです。(Disqusみたいなやつ)
こちらより引用
Live demoのコードを理解する
サンプルコード
<html>
<head>
<title>Hello Riot.</title>
</head>
<body>
<sample></sample>
<script type="riot/tag" src="sample.tag"></script>
<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
<script>riot.mount('sample')</script>
</body>
</html>
<sample>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
</sample>
表示
サンプルコードについて
Riot.jsでは、部品（カスタムタグ）を組み合わせて、ページを作成しています。
サンプルコードでは、作成したsampleタグをindex.htmlで呼び出しています。
index.html
1.sampleタグを配置する
<sample></sample>
2.sampleタグを読み込む
<script type="riot/tag" src="sample.tag"></script>
3.sampleタグを（ブラウザで）コンパイルする
<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
4.sampleタグをマウントする
<script>riot.mount('sample')</script>
また、下記のようにすると、ページ上すべてのカスタムタグをマウントできます。
<script>riot.mount('*')</script>
sample.tag
次に、sample.tagを見ていきます。
1.タグを定義する
<sample>
~
</sample>
2.html
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
{}は、jsで定義している変数を参照しに行く。
eachは、techsの中身を回してる。
3.script
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
4.style
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
Scoped CSSを使用している。