「Facebook: iOSアプリのアーキテクチャ」でご紹介した、Reactの仕組みをiOSアプリのニュースフィードに応用した取組みについて、同社のAri Grantが今回は、実際にFacebookのiOSアプリで使われているコードを使って紹介してくれてます。InfoQのサイトでビデオを是非ご確認ください。

iOSのUIづくりの複雑さに、表示内容が常に変化するニュースフィードの仕様が拍車をかけて、

• 60 fpsを実現したい。=> レンダリングにフレームあたり17msしかとれない。
• テキストレイアウトは時間がかかる。=> バックグランドスレッドを使おう。
• 多くのviewを用意するには時間がかかる。 => viewの再利用をしよう。
• 各フィードで表示するデータの種類が多い => 行ごとにviewタイプを用意する方式ではムリ。
• テキストが絡むとviewのサイズ調整やレイアウトに時間がかかる。=> これもバックグランドで実行しよう。
• viewはメイン、UIスレッドでしかレイアウトできない。=> どうしよう。。
• 再利用を指定するロジックづくりは全て手作業。=> どうしよう。。
• テキストスレッドはバックグランドにあるが、viewはサイジングに依存している。テキストスレッドとメインスレッドで様々なデータが行き交う。=> どうしよう。。
• viewはmutableで頻繁に変わる。=> どうしよう。。
• フィードの各構成要素を正しく表示するには、レイアウトの計算式が沢山必要。=> どうしよう。。

という課題が山積みに。それに対して、複雑さを裏でうまく対処してくれる仕組みを構築しています。

• 実現したいレイアウトをコードで指示すれば、システムが最適なviewを用意するかたちにすることで、レイアウト設定とviewの再利用を簡略化。一部の再利用も柔軟にできパフォーマンス効率的にもよい。
• ステート変更の際は、シンプルな一方通行のデータフローとする。
• compositionの活用。immutabilityを採用（これに併せてCPU消費の最適化施策も実施: ビデオ30:17時点のスライド参照）し、エラーを防ぐ。
• パターンを抽象化することで、非同期にレイアウト計算を見えないところでこなす。

2014 Topアクセスランキング