Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stencil.js触ってみた

scrpgil
September 14, 2018

 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/

scrpgil

September 14, 2018
Tweet

More Decks by scrpgil

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Ionic 4 Betaリリース

    View full-size slide

  3. Web Components FTW!⚡

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. これはチャンス

    View full-size slide

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

    View full-size slide

  9. Stencil.jsってなに?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 4.LazyLoading、SSRもできる

    View full-size slide

  14. Stencil.jsってなに?
    1. WebComponentを生成するツール
    2. Ionic 4はStencilで作られている
    3. tsx(jsx + TypeScript)でWebComponentが書ける
    4. LazyLoading、SSRもできる
    ※参考:https://ionic-team.github.io/stencil-present/

    View full-size slide

  15. ざっくり、jsx + TypeScriptで
    WebComponentが書けるものと
    理解しました

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. AngularでもVueでも

    View full-size slide

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

    View full-size slide

  25. 触ってみた所感

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. というわけで...

    View full-size slide

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

    View full-size slide

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

    View full-size slide