Stencil JSについて

Ionic Meetup #16 [Web技術でモバイルアプリをつくる]用の資料です。
https://ionic-jp.connpass.com/event/208425/

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フォローしてください