Stencil JSについて

Transcript

1. Stencil JSについて Ionic Meetup #16 in Online

2. 自己紹介 • 榊原宏祐 • scrpgil • 株式会社キネカ所属 • Ionicヘビーユーザー（仕事 &

   趣味） • エンタメマッチングアプリ作成 • ASCII artが趣味(Webアプリ公開) • 最近、ascii.artドメイン取得

3. Ionic本書きました 「Ionicで始めるWebサービス開発」 • Webサービス(質問箱風)を開発しながら、 IonicとFirebaseについて学ぶ本 • 特定フレームワークを使わず、Ionic/core を使用 • ionic/core

   = stencil.jsを利用しています

4. アジェンダ • Webコンポーネントについて • Stencilについて • Stencil APIについて • もっとStencilを知りたい場合

5. Webコンポーネントについて • JavaScript標準のコンポーネント機能。 • 特定フレームワークに依存せず、コンポーネントの仕組みを実現できる

6. コード例

7. 果たしてWebコンポーネントの作成は簡単か？ • 変更検知とか使いたい • TypeScript使いたい

8. Stencilについて • Webコンポーネントを作成するためのコンパイラ • フレームワークを利用せずにWebコンポーネントを作成する • 主要なフレームワークについてる機能(変更検知とか)はだいたい持っている • Ionicで利用しているし、Ionic Teamが開発している

9. なぜStencilか? • パフォーマンス：従来のフレームワークは、要求の厳しいモバイルプログレッシブ Webアプリケーションには重すぎる • 安定性：フレームワークの絶え間ない変更を回避したい • 相互運用性：主要なフレームワーク(Angular、Vue)で動作する

10. Stencilのコード例

11. Stencilが持っている機能 • VirtualDOM • TypeScript • JSX • データバインディング •

    LazyLoading

12. StencilのAPI • @Component(): タグ名に関連するスタイルシートを設定 • @Prop()：コンポーネントにプロパティを作成 • @State()：変更検出中に監視する必要があるローカル状態 • @Event()：コンポーネントでイベントをトリガー

    • @Listen()：各DOMから発生したイベントをリッスン • @Element()：このコンポーネントのDOM要素を取得

13. 事例 • ionic/core：https://github.com/ionic-team/ionic-framework/tree/master/core • Who use Ionic：https://ionicframework.jp/case/ • AA fontbook：https://fonts.aahub.org

    • AAUI：https://codepen.io/scrpgil/pen/BOVBae • apple tv(beta)：https://twitter.com/stenciljs/status/1190253680085360640

14. StencilJSをもっと知りたい場合 日本語doc： https://stenciljs.jp

15. ご視聴ありがとうございました ・StencilJSはWebコンポーネント作成コンパイラ ・Webコンポーネントを使えばFWに頼らずコンポーネント志向の開発が可能 ・IonicはStencilJSを使ってコンポーネント作ってる ・StencilJSの日本語ドキュメント：https://stenciljs.jp ・キネカに興味あったらDMください ・アスキーアートに興味あったらTwitterフォローしてください