FacebookがComponentKitをオープンソースとして公開した。iOSのネイティブビューを開発する宣言型ライブラリ(declarative library)だ。
HTML5で作成した最初のアプリケーションでいくつかのパフォーマンスボトルネックを経験したFacebookは,iOSとAndroidの両方にネイティブ対応することを決定した。ところが,しばらくして彼らは,iOS版で新たなパフォーマンス問題に直面した。特に重大だったのは,データモデルに関する問題だ。News Feedアプリは当初,データの保存にCore Dataを使用していたが,それが繰り返しの度に遅くなっていることが分かったのだ。そこで6月ほど前にCore Dataの利用を取りやめたところ,News Feedの速度がほぼ2倍になった。それと同時に,同社はComponentKitを導入した。ComponentKitはReactにインスパイアされた,Objective-C++の宣言型ビューフレームワークだ。これによってiOS用のNews Feedの作業が簡略化されると同時に,レンダリングコードの削減が達成されたのだ。
コンポーネントを生成してコンテナに追加し,レイアウトして制約を設定するという,コンポーネント作成の一般的なプロセスに代えて,ComponentKitを利用した場合,開発者は構築したいものを宣言すればよい。以下の例では,ヘッダとコンテナ,フッタをコンテナ内に垂直に配置するビューの生成を示している。
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionVertical,
}
children:{
{[HeaderComponent newWithArticle:article]},
{[MessageComponent newWithMessage:article.message]},
{[FooterComponent newWithFooter:article.footer]},
}];
このフレームワークを使うことで,Facebookは,レンダリングコードの70%のダウンサイズ,スクロールの高速化を達成した。さらには“ComponentKitによってモジュール形式のUI構築が簡単になり,各部分を分離してテストすることが可能になったため”,テストカバレッジも向上することができた。
宣言的であること以外にも,ComponentKitにはさまざまな機能がある。
- コンポーネントに渡されるデータオブジェクトは不変(immutable)であるため,データロックが不要になると同時に,コンポーネント自体もスレッドセーフになっている。データの状態が変化すると,フレームワークはルートを起点として,階層の変化が最小限になるようにビューの再描画を実行する。
- どのバックグラウンドスレッドからも,コンポーネントを生成することができる。
- コンポーネントを別のビューで再利用することができる。
- CSS Flexboxを簡略化したレイアウトエンジンを使用する。
Facebookは今回,BSDライセンスを適用してComponentKitをGitHub上でオープンソース公開することを決定した。