webcomponentのお勉強1

webcomponentとCustom Elements

Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks
https://www.html5rocks.com/ja/tutorials/webcomponents/customelements/

かなりわかりやすいし、内容も感動するわー。

疑問

• Custom Elementsをシンプルに使うときにもPolymerを使うべきか
  • PolymerやWebComponentにすることで速度の低下などデメリットがあるとか
• 動的にCustom Elementsを生成するのは現実的か
  • Factory的なライブラリなどがすでにあるか
• 制限はあるのか
  • どういう条件でどの程度の個数でメモリがいっぱいになるとか
  • jQueryのDOMのパースがすごく重くなるとかないかな
• 扱い方としてはどういう扱いがいいのか、どういうパターンがあるのか
  • domとして、redux的に、、フィルタリングや検索、、
• 画像やボタンタグは閉じタグがないが、これは拡張じゃなくて新規で作れるのか

ライブラリ

Introduction - webcomponents.org
https://www.webcomponents.org/introduction

• Bosonic is a collection of components designed to meet the everyday needs of web developers.
• Polymer provides a set of features for creating custom elements.
• SkateJS is a JavaScript library for writing web components with a small footprint.
• X-Tag is an open source JavaScript library that provides an interface for component development.
• Slim.js Slim.js is an opensource lightweight web component library that provides data-binding and extended capabilities for components, using es6 native class inheritance.

Libraries - webcomponents.org
https://www.webcomponents.org/libraries

こちらにも同じように列挙されつつ、考え方が記述されてる。
この辺のライブラリの特徴を眺めると、用途によって特化しているなら、他の疑問が解決するかもな。。

Web Componentsを構成する4つの仕様 ー Web Components基礎編 | HTML5Experts.jp
https://html5experts.jp/1000ch/11142/

2014年か、、そんなまえからなんだなあ。
日本語での実装を交えての説明がとてもわかりやすかった。

Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう | HTML5Experts.jp
https://html5experts.jp/1000ch/11905/

Polymerやwebcomponentjsのpolyfilについて一歩踏み込んで理解できた。

PolymerでMaterial Designなチャットアプリを作ろう | HTML5Experts.jp
https://html5experts.jp/girlie_mac/12359/

レイアウトのコンポーネントからバインディングしつつチャットまで順を追っているのでわかりやすい。
pubnubすごいなー。

基本的な要素・機能を提供するCore ElementsとMaterial Designを実現するPaper Elements | HTML5Experts.jp
https://html5experts.jp/1000ch/12477/

使う分にはもちろん便利なCore ElementsとPaper Elementsですが、興味があればGitHubで公開されているソースコードを見てみることをオススメします。どういった設計でどのように抽象化しているかを見るのも、今後Web Componentsを自分で作っていく上できっと参考になるはずです。

Core ElementsとPaper Elementsがどういうものか大枠でわかった。
D&Dで作れるPolymer Designerなるものも知った。

Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic | HTML5Experts.jp
https://html5experts.jp/1000ch/14400/

おお、Polymer以外のライブラリについて説明がある。
Bosonicはトランスパイラでbabelのようにコードを吐き出してくれるのか。
なるほど、これはこれでいいかも。
コンセプトは悪くないけども、メンテがあまり盛んじゃないのか。

Polymer v1.1のAPIまとめと周辺リソースの紹介 | HTML5Experts.jp
https://html5experts.jp/1000ch/17410/

コンポーネントとしての実装の機能、、イベントとかバインディングとか、ビヘイビアとか、、できることが多いので驚いた。