BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース FB ComponentKit - iOS用UIの宣言的開発

FB ComponentKit - iOS用UIの宣言的開発

原文(投稿日:2015/03/26)へのリンク

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上でオープンソース公開することを決定した。

この記事に星をつける

おすすめ度
スタイル

BT