FT LabsのディレクターであるAndrew Betts氏は、FT Labsがウェブ開発向けの開発した標準とツールについて説明した。これらのツールは*.ft.comの800を超えるサイトを開発、メンテナンスの難しさに対処するために作られたものだ。FT Labsの戦略はウェブページをコンポーネントに分割する方法だ。これらのコンポーネントはしっかりと定義されたルールに基づいて構築されている。
FT LabsはFinancial Timesのチームであり、ウェブの技術に注力している。Financial Timesのデジタル資産の急激な成長は数多くの問題を生み、そのすべてはスケールに関係している。共通の構造化されたルールやツールがない大量のウェブサイトでは、大量の重複作業が発生する。成長し続け、より複雑になるウェブのエコシステムは強烈な抵抗を生み出す。メンテナンスと進化が難しいウェブアプリケーション、レガシーコードは引退させにくく、アプリケーション統合は複雑で、エンドツーエンドのエンジニアリングスキルの持ち主を見つけにくくなる、といった課題が生まれるのだ。
そこで、FT Labsはこれらの問題に対処するための解決策を探し、コンポーネントベースの手法にたどり着いた。この解決策はいくつかの原則によって下支えされている。
- すべてが標準に従う
- 単一のプロダクト(ウェブサイト)のためにコンポーネントを特化しない
- コンポーネントは簡単かつ柔軟に使えなければならない
- コンポーネントは使い手が更新のタイミングを制御できなければならない
- コンポーネントはカプセル化あるいは名前空間化されており、“ウェブのお隣さん”の邪魔をしない
- 外部システムへの依存は最小限になっており、ソリューション全体は信頼性があり、素早く出荷できるようになっている
コンポーネントにはふたつの側面がある。モジュールとウェブサービスだ。
Origamiコンポーネントを使ったアプリケーション( Origamiのサイトから)
モジュールは静的なリソース(CSSファイル)かCommonJSのモジュールであり、主要な目的はウェブサイト全体に統一したUIを提供することだ。各モジュールは仕様に従う必要がある。仕様は命名規約やパッケージ、ビルド構成、テスト、デモルールなどを定める。サンプルにはレスポンシブなレイアウトを提供するグリッドであるo-grid、日付フォーマットと更新を提供するo-date、FTのブランドが定義する文字スタイルを提供するo-ft-typographyなどがある。モジュールのドキュメントにはこの仕様で何ができるかを説明している。
ウェブサービスは名前が示す通り、URLのエンドポイントを通じてコンテンツとデータを提供する。ウェブサービスも仕様を満たす必要がある。仕様は複数の要件を定義している。例えば、非推奨のルールや必要なエンドポイント(ヘルスチェック、メトリクス、ドキュメント)、バージョン付けのルール、複数のウェブサービスの環境のルールだ。例えば、responsive-image-proxyは画像のリサイズと最適化をするためのプロキシはOrigamiのウェブサービスのひとつだ。
Origamiはモジュールのビルドサービスを提供する。このサービスはランタイムで起動される。ウェブページが<link>を含んでいる場合、
<link rel="stylesheet" href="//build.origami.ft.com/bundles/css?modules=o-ft-icons@^2.3.1" />
ビルドのプロセスは、
o-ft-iconsモジュールのバージョン2.3.1をインストール- 依存物をインストール
- ビルドプロセスの起動
- CSSアウトプットの最小化
- GZip化とキャッシュ
- CDN経由で提供
Javascriptのビルドプロセスもあり、scriptタグで起動する。
FT Labsはコンポーネントの誰でも利用できるレジストリがある。しかし、Financial Timesでしか使えないコンポーネントもある。
Andrew氏はFT LabsのPolyfills as a Serviceを紹介して話を終えた。PolyfillsはJavascriptのコードであり、ウェブブラウザではネイティブでは利用できない機能を提供する。ベンダとバージョンの違いを吸収する。このサービスはカスタマイズ可能であり、ウェブページにscriptタグを組み込むだけで利用できる。
<script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script>