webcomponentのお勉強2

調査がだんだんwebcomponentから離れていく。

HTMLのタグについて

• 開始タグ:
  • <hoge>
  • start tag
• 終了タグ:
  • </hoge>
  • end tag
• 自己終了タグ:
  • <hoge/>
  • self-closed tags / self-closing tag

http://dev.w3.org/html5/html-author/#start-tag
http://dev.w3.org/html5/html-author/#self-closing-tag
https://www.w3.org/TR/html5/syntax.html#elements-0

自己終了タグであるimgを拡張したカスタムタグの事例

How to Create Custom HTML Elements - Treehouse Blog
http://blog.teamtreehouse.com/create-custom-html-elements-2

Next we need to set up a function for createdCallback. This is where we will create the <img> and <a> elements that are responsible for displaying the product. I’ll show you the code first and then walk you through it.

Riot.jsでの終了タグまわりの説明

カスタムタグ · Riot.js
http://riotjs.com/ja/guide/#タグの構文

自己終了タグがサポートされています:

は

と等しくなります。 いわゆる「オープンタグ」 <br>や<hr>、<img>、<input>はコンパイルの後に閉じられることはありません。

おお、自己終了タグをサポートしてるのかー。（Reactでも使えるのね。）
ここまで気が利いてるなら、他も気が利いてて悪くないのかもなー。

htmlの仕様

HTML Standard
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements

HTML Standard 日本語訳
https://momdo.github.io/html/

HTML5 と WHATWG と Google Chrome。 W3C がHTML5 仕様を昨日勧告しました。それに対する世間の認識とブラウザの中の人...
https://plus.google.com/+HayatoIto/posts/axVAUzFEu4L

W3Cは知ってたけど、長期的にはWHATWGってのが重要ってことなのかな。

WHATWG HTML Standard Developer Editionの話 - 水底の血
http://momdo.hatenablog.jp/entry/20170702/1498999477

長らく更新が止まっているDeveloper Edition（https://developers.whatwg.org/）だけども、このたびhttps://html.spec.whatwg.org/dev/とURLを新たに更新が再開されている。（The WHATWG Blog — The Developer’s Edition of HTML makes a comeback）

HTML Standard, Developer's Edition
https://html.spec.whatwg.org/dev/

開発者用の仕様

WHATWG版とW3C版がある仕様たち - Unreviewed
http://takenspc.hatenablog.com/entry/2015/12/03/235927

場合わけで参照するということか。。

Riot.jsとPolymer

RiotをReact・Polymerと比較する · Riot.js
http://riotjs.com/v2/ja/compare/

Polymer
PolymerはWeb Component標準に則り、最新ブラウザで利用可能にします。これは、カスタムタグを標準的な方法で書けるということです。
コンセプトとしてはRiotも同じなのですが、いくつかの違いがあります:
* Web Componentsの文法は、実験的で複雑です。
* Riotは変更のあった要素だけを更新するため、少ないDOM操作で済みます。
* それぞれのコンポーネントはHTMLのlink rel="import"で読み込まれます。PolyfillsはXHRsに頼る必要があり、専用のvulcanizeツールを使わない限り、耐えられない遅さです。Riotのタグはscript srcで読み込まれ、一般的なツールで複数のタグを結合することができます。
* サーバサイドレンダリングができません。
* Polymer(v1.8.0) + WebComponents(v0.7.24)はRiotの倍のサイズです。

1.8.0の頃か。。そんなに昔でもないか。。

Riot.js

いいかも。。調べよう。。
これまでみた中だと、x-tag的なイメージだけど多分、それならこっちの方が良さそうなのかな。

疑問

カスタムタグは要素技術として、カスタムエレメントを使っているのか？それともピュアなjs？多分、前者なのかな。

サンプルの要素だとHTMLUnknownElementになってるから擬似カスタムエレメントな気がする。

Riot.jsでタグエディターのサンプルを作ってみた
https://hnakamur.github.io/blog/2015/02/28/riot-tag-editor-example/

タグエディタのサンプルある

Riotでカスタムタグを作る3つのやり方 - Panda Noir
http://panda-noir.hatenablog.jp/entry/2016/07/22/132131

プリコンパイルするのね

コンパイラ · Riot.js
http://riotjs.com/ja/guide/compiler/

cliやtaskrunnerなどいろいろ想定されている。

JavaScript - Riot.jsにて、動的にカスタムタグをマウントしたい。(56499)｜teratail
https://teratail.com/questions/56499

遅延ロード的なマウント。

Riot·Reactライクな軽量UIライブラリ MOONGIFT
http://www.moongift.jp/2015/02/riot-react%E3%83%A9%E3%82%A4%E3%82%AF%E3%81%AA%E8%BB%BD%E9%87%8Fui%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA/

Riotの特徴としてはカスタムエレメント、Virtual DOM、フルスタック、IE8以上のサポートとなっています。ファイルは.tagという拡張子のファイルで、JavaScriptにコンパイルして使う方式になるようです。

この説明は少し注意かもな。

Riot.js入門-1 - Qiita
http://qiita.com/naota70/items/2212df2ac8b4864c5c09

custom elementsの優位性

riot.jsだとprotoはHTMLUnknownElementだった。
でも現状では別に困らないかな。
あ、標準タグのみを許可してあつかうエディタで扱ってくれるかどうかは影響ありそうか。

javascript - HTMLで独自タグを使うのは仕様上問題ないのか - スタック・オーバーフロー
https://ja.stackoverflow.com/questions/31216/html%E3%81%A7%E7%8B%AC%E8%87%AA%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86%E3%81%AE%E3%81%AF%E4%BB%95%E6%A7%98%E4%B8%8A%E5%95%8F%E9%A1%8C%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B

DOM の仕様では HTMLUnknownElement という要素が定められていて、不明な要素を扱うことができます。
そのため、現時点では不明な要素を利用しても問題なく動作すると思います。
しかしながら、将来的に新しい要素が追加される可能性があります。この時に名前がかぶってしまうと意図しない動作になる可能性があります。

ベンチマーク

Riot.js（v3）のeachメソッドによるループ速度を計測してみた - WEBエンジニア奮闘記
http://kito0039.hatenablog.com/entry/2017/01/15/225304

Riot.jsの落とし穴まとめ - Qiita
http://qiita.com/clown0082/items/073c4c2e39ec5ca12962

Mithril.js

Mithril.jsでがっつりSPAを作った話 - コード譜共有サイト「ChordKitchen」 - リズムのじかん
http://chords.hatenablog.com/entry/2015/08/04/mithril%E3%81%A7%E3%81%8C%E3%81%A3%E3%81%A4%E3%82%8ASPA%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E8%A9%B1_-_%E3%82%B3%E3%83%BC%E3%83%89%E8%AD%9C%E5%85%B1%E6%9C%89%E3%82%B5%E3%82%A4%E3%83%88%E3%80%8CChordKitch

sj.js

Big Sky :: xtag と angular1 を足して2で割った感じに使える薄い JavaScript ライブラリ「sj.js」
https://mattn.kaoriya.net/software/lang/javascript/20160620163641.htm

こんなものも。。