Custom Elementは実用的なのかどうかの検証

[azu]

• Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks
• How to Create Custom HTML Elements | Treehouse Blog
• WebReflection/document-register-element
• kentaromiura/custom-element
• Custom Elements - Web Components を構成する技術: Tender Surrender
• Web Components を支えるPolyfillライブラリ ::ハブろぐ

IE9+ならCustom Elementsは動かせる。
ReactとかRactiveとかなんでも最近は大体Componentsという仕組みを持っていて、
コンポーネントを意識して作り出してるものってCustom Elementsみたいなものになってる気がする。

なので、それらのライブラリを使ったCustom Elementsのインターフェースに沿ったコンポーネントを作ることは可能なのかを検証したい。

これのメリットはViewがCustom Elementsというインターフェースに沿って操作が行われるようになるので、Viewのライブラリを内部的に変えても問題なくなるという感じにできるかもしれないというのを知りたい。
今、ウェブアプリのアーキテクチャ的にライブラリに強く依存するのがView周りなので、そこをどうやって分離するかの検証。

[azu]

Custom Elementsのライフサイクルイベントは4つで、細かい管理はないので各自やる感じの部分があると思う。

• createdCallback : loadView
• attachedCallback: viewWillAppear
• detachedCallback: viewDidDisappear
• attributeChangedCallback : onChange

createdCallbackはinitilize処理なので何度も実行されるような処理じゃないという認識

[azu]

http://shop.oreilly.com/product/0636920032922.do
書籍

[azu]

Custom Elementsを見ることでわかるのは、以下のようなところが大きそう。

• View(コンポーネント)にライフサイクルが持たされてイベント駆動で書けるようになったこと
  • ちゃんとViewを消した時に、メモリリークにならないように取り除けるタイミングがあること
• <x-Custom item-name="名前"> 要素の属性がある種値を渡すインタフェースとして定義されたこと
  • コンポーネントといっても実態はJavaScriptになるので、どういうふうに値を渡すかというルールが決まる
  • new xCustom() などのインタフェースも同時に定義できること
  • 手続き的だけじゃなくて、宣言的にもできるという点

[azu]

これReactもやっぱり同じ所に重きがあるような気がしてきた。
dekuとか見てるとまさにタグとしての生き道が見える。
JSXどこまでちゃんとやるのかよくわからないけど、React.createElementというコンポーネントを関数として表現するには以下のようにできるという事を定義出来たのが今後大きな可能性がある感じ。

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

[azu]

そもそもCustom Elementsってnew MyElement(args);みたいに引数渡せたっけ?

[azu]

Deku 2.0が最小のライフサイクルとして面白い。

[azu]

認識としてpropsがstring以外も渡せないと変化が難しい