iOSのUI開発にTextureを使ってみて
この投稿はピックアップ Advent Calendar 2018の22日目です。（といいながら、投稿日は23日になっちゃいましたが）
前回の記事は「EpoxyでRecyclerViewをもっと簡単にする」でした。
前回の記事の通り、TELLERではトップ画面のリニューアルがあり、Android版ですがこのように複数セクション内にカルーセルがあるような構成となっています。
そのため、表示するViewの数が多くなり、Android版は若干パフォーマンスが悪い状態となっていました。
iOSでもその問題が起こりそうだと考え、iOS版は現在Pinterestがメインで開発されているTexture（旧AsyncDisplayKit）を使うことにしました。
Textureについて
iOSのUIKitは通常メインスレッドで表示のための処理が行われますが、TextureではCALayer上でViewの計算を行い、バックグラウンドで表示の計算を行ってメインスレッドの負荷を減らすという方法を使っているようです。
このことについては@tamadeveloper さんのこちらの記事が参考になりました。
TextureではUIをNodeというViewのコンポーネントとLayoutSpecというレイアウトシステムで作っていきます。
UIKitを使っていると聞き慣れない言葉だったので、どうやって実装したらいいのだろう？と思いましたが、実際に試してみるとNode自体はUIKitから大きく変わることなく（むしろいろいろ抽象化されてて扱いやすい？）、LayoutSpecもStackView（Flexbox）のようにレイアウトができるので、それらを使ってレイアウトしたことがあれば簡単にレイアウトできました。
むしろコードでAutoLayoutを扱うより簡単なので、以前より速くViewの実装ができるようになった気がします笑
StoryBookでコンポーネントを高速に作っていく
最近ReactやVueといったWebのフロントエンドの方やReactNativeでアプリを作っている方はStorybookでUIコンポーネントのカタログをつくって確認されている方が多いと思います。
Textureでも同様にコンポーネントを作成し、StorybookのようにUIの確認を行いたいなぁと思っていたところ、 Hyeonsu Ha さんがASStorybookというライブラリを作られていたので使ってみました。
このように、作成したコンポーネントの表示の確認を行え、デザイナーさんとのレイアウトの確認などもやりやすくなります。
使ってみた結果
Textureで新デザインを実装したところ、特に意識することなく50~60fpsの間でなめらかにスクロールしていました。素晴らしい！
Textureにより高速に動作し、Storybookを使うことによりUIの実装や確認も簡単になりました。
InterfaceBuilderを使い、XIBやStoryboardでUIを実装していたときはコピペやコンポーネント化するのが面倒だったりしましたが、Textureでは全てコードベースでUIをつくっていくのでそのへんの悩みも少なかったです。（このあたりは以前書いたLayoutの記事のメリットと同じですね）
まだアニメーション周りなどをTextureで試していないので、そのあたりはどう行うかなど把握できていませんが、今の所Textureをつかってみて良かったと思っています。
最後にですが、現在TELLERで一緒に開発してくれるiOSまたはAndroidのエンジニアを絶賛募集中ですので、どうかお願いします！！！
