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/

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. おわり