StencilJSの作成者でIonic Frameworkの共同作成者であるAdam Bradley氏は、フレームワークに依存しないコンポーネントを生成するコンポーネントコンパイラであるStencilに組み込まれた設計とアーキテクチャをdotjs2019でレビューした。
Bradley氏は、最初にコンポーネントコンパイラの背景にある理論的根拠を説明した。同じ組織内で、テクノロジーチームが購入アプリケーションにAngularを使用し、内部サポートチームが経費報告アプリケーションにVueを使用し、さらに別のチームがReactを使用してマーケティングPWAを作成する場合がある。これはローカルでは満足できるかもしれませんが、組織レベルでは、同じコンポーネントを異なるフレームワークに実装することから生じる作業の重複が効率の低下の原因になる。デザインシステムを使用している企業でさえ、デザインシステムが実装されたフレームワーク内でのみコンポーネントの再利用性の恩恵を受けている。
これは小さな企業ではあまり発生しないが、多くのチームを持つ大規模な組織は、フレームワークの多様性に由来するそのようなコストと課題に直面している。組織全体に単一のフレームワークを課すという代替案は、多くの場合、可能性がないだけでなく、別の一連の問題を引き起こす。
Ionicは、何百ものコンポーネントを備えたWeb用のモバイル向けUIライブラリとして、同様の課題に直面した。Ionicは、2013年に開始されたときにAngularJSコンポーネントモデルを最初に採用した。まったく新しいAngularを含む他のフレームワークが登場すると、開発者コミュニティは一貫してIonicチームに特定のフレームワークに対応するIonicのフレーバーを求めていた。ただし、Ionicに特定のコンポーネントモデルを採用すると、バグ修正やデザインの改善はコンポーネントモデルのフレームワークでのみ利用可能になるため、フレームワーク間で作業の重複が強制される。この状況は新しいフレームワークが必然的に出現することで将来繰り返される可能性が高いのである。
次に、Ionicは、共通のコンポーネントモデル、既存を再利用するWebコンポーネント標準、標準ブラウザAPI、将来のどの時点でも変更されることがないだろうAPIを決定した。Ionicはまた、ビルド時に純粋に動作し、既存のフレームワークを補完し、コンポーネント記述をいくつかのフレームワークコンポーネントモデルにコンパイルできるStencilと呼ばれるコンポーネントコンパイラを作成した。Bradley氏は強調した:
Stencilはビルド時のツールです。それはフレームワークではありません。StencilがIonicに対して解決している問題は、コンポーネントが今日のフレームワークの多くで、できれば明日も機能できるようにすることです。これは、再利用可能なコンポーネントの生成と保守に役立つツールです。
次に、Bradley氏は、コンパイラに対して行われた設計目標と技術的選択についてさらに詳しく説明した。Stencilは、TypeScriptカスタムトランスフォーマを使用して、Stencilコンポーネントのソースコードを静的に分析し、選択したターゲットコンポーネントモデルに従ってコンパイルされたコードを生成する。
コンパイラは、無駄のない、最適化されたパフォーマンスの高いソースコードを生成するために、多くの最適化を適用する。Bradley氏は、可能な場合に関数をアロー関数に変換し、function を削除してキーワードを return するミニファイ最適化の一例を示した。次に、出力コードは、アロー関数に割り当てられる定数に縮小される。これにより、コードのサイズが大幅に削減される。
このような積極的な最適化により、<hello-world /> コンポーネント用に生成されるコードはわずか87バイトである。フロントエンドフレームワークのベンチマークに一般的に使用されるTodoMVCアプリケーションは、2.2KBになる。コンパイラによって実行される最適化 (ネイティブモジュールのプリロードを含む) に関する追加の技術的な詳細については、読者は講演のビデオを参照できる。
Stencilコンパイラは、同じソースから、遅延読み込みコンポーネント、IE11サポート用のレガシーES5およびSystemJSコンポーネント、バンドルされたカスタム要素ライブラリ、フレームワークバインディング、サーバサイドレンダリングをサポートするNodeJSハイドレイティングスクリプト、事前レンダリングなどを出力できる。主な例として、Ionicは同じソースコードから本物のAngularコンポーネントをAngular開発者に提供し、本物のReactコンポーネントをReact開発者に提供する。
完全な講演はdotJS 2019 Webサイトで入手でき、追加のソースコード例と関心のある技術的な詳細が含まれている。dotJSはJavaScriptカンファレンスであり、dotConferencesシリーズの7つのカンファレンスの1つである。dotJS 2019は、2019年12月にパリで開催された。