Stencil.js触ってみた

 Stencil.js触ってみた

リンク
Stencil公式
https://stenciljs.com/
aa-ui
https://github.com/AA-TRDI/AA-UI
codepen
https://codepen.io/scrpgil/pen/BOVBae

公開したWebComponentはこちら
https://github.com/AA-TRDI/AA-UI

スマホでも閲覧可能なAAビューアーはこちら
https://aahub.org/

8673a339e4002704b42bc66c43c65445?s=128

神撃のIonicッカー

September 14, 2018
Tweet

Transcript

  1. Stencil.js触ってみた Ionic Lightning Talk in Tokyo vol.0

  2. 前段

  3. Ionic 4 Betaリリース

  4. Web Components FTW!⚡

  5. Stencil.jsを触ってみたい!

  6. だけど、きっかけがない...

  7. そんなとき、イベント開催の告知が...

  8. これはチャンス

  9. Stencil.jsを触ってみよう

  10. Stencil.jsってなに?

  11. 1.WebComponentを生成するツール ※Frameworkではなく、WebComponentにFrameworkの機能  を追加するツールとのこと

  12. 2.Ionic 4はStencilで作られている

  13. 3.tsx(jsx + TypeScript)で書ける

  14. 4.LazyLoading、SSRもできる

  15. Stencil.jsってなに? 1. WebComponentを生成するツール 2. Ionic 4はStencilで作られている 3. tsx(jsx + TypeScript)でWebComponentが書ける

    4. LazyLoading、SSRもできる ※参考:https://ionic-team.github.io/stencil-present/
  16. ざっくり、jsx + TypeScriptで WebComponentが書けるものと 理解しました

  17. さっそく何か作ってみる

  18. AAをSVGで描画するWebComponentを作る • SVGで描画すればテキストだけどWidthで幅を 指定することができる • Component内にフォントファイルも仕込める • font-sizeの計算だと少し面倒

  19. 1. 公式starterをcloneしてnpm install ※https://github.com/ionic-team/stencil-component-starter

  20. 2. stencil.config.jsを書き換え

  21. 3. componentを記述 ※ソース:https://github.com/AA-TRDI/AA-UI

  22. 4. 完成!めちゃ簡単!

  23. さらに、npm公開してみた

  24. AngularでもVueでも

  25. codepenでも動く。とても便利

  26. 触ってみた所感

  27. JSフレームワークの枠を超えた 共用Componentを開発できそう

  28. Ionic 3使ってる人はIonic 4にスムーズに 移行できるかもしれない...。

  29. Ioinc4の変更点への理解が深まるかも... スロットってなんだ? item-start、item-endじゃ駄目なの?

  30. Ioinc4の変更点への理解が深まるかも... WebComponentの仕様らしい

  31. Ioinc4の変更点への理解が深まるかも... NavControllerどこいった? querySelectorしないといけないの?

  32. Ioinc4の変更点への理解が深まるかも... Stencilのドキュメントに詳細載ってる

  33. というわけで...

  34. 3連休はStencilを触ってみよう

  35. 20〜30分で読み終わるのでドキュメント読 むだけでも... ※https://stenciljs.com/

  36. おわり