前回 ( React Native at Wix — The Architecture ) の話 : Wixの組織構造に合わせてどのように調整しているのか、Multi-Module Architecture を開発して使用している話。そして、それがどのように独立した開発を実現し、各開発者グループのデプロイ体験を向上させるのに役立っているのかを紹介。

今回はコード自体を深く掘り下げて、アーキテクチャの実用的な実装を紹介している。

react-native-wix-engine （公開されている実装は一部）を使って、マルチモジュールアーキテクチャを実現させている。

github.com

f:id:narukami894:20201224192556p:plain https://github.com/wix-incubator/react-native-wix-engine から引用

サマリ

モジュールは独立して動作し、リリースプロセスに応じて新しいバージョンをリリースすることができる
すべてのチームが同じインフラストラクチャ上で、また同じインフラストラクチャで作業することができる
モジュール開発者はネイティブコードを扱うことはない
100人以上の開発者が毎日お互いのコードを壊さずに快適に作業している

コメント
「モジュール担当、ネイティブ担当と完全に分かれているということか」
「我々も100人規模のチームになったら真似しましょう」
「全部自前でやることで、マルチプラットフォームの開発をしやすくしようとしているのですかね？」

Base Web: Uberが開発したWeb ReactのUIフレームワーク

baseweb.design

flow types と TypeScriptに対応
ソースも公開されている

github.com

コメント
「カタログサイトもちゃんと公開されていて綺麗」
「flow types と TypeScript 両方に対応しているしとても親切だな」
「React界隈って、UIフレームワークがとても種類ありますよね〜、react-native-elementsとか」
「CSSフレームワークも一時期種類がたくさんありましたね」
「Component指向は、ポータブルな設計にできるのでカスタマイズしたくなったときに取り外しができる」

React Server Components

reactjs.org

Reactの公式ブログに12/21に掲載された記事
クライアント側にbundleをダウンロードさせず、サーバサイドでレンダリングする仕組み
まだ実験的な取り組み
紹介記事

dev.to

コメント
「SSRとの違いがまだよくわかっていない」
「SSRは最終的にすべての依存関係をダウンロードするけど、React Server Componentsだと違うらしいですね」
「1時間の動画を見ましょう」
「AirbnbのSSRライブラリ、Hypernovaを思い出しました」

github.com

React Native 2020年の振り返り

qiita.com

コメント

「今年のReact Native, 印象に残った機能はありますか？」
「Flipper, アップグレード時に苦心したので来年はもっと使っていきたいですね」
「2021年も楽しみ！」

RN アプリアップデートのハマりポイント事例

takashiokusawa.medium.com

ニュースアプリのようなUI を持つAndroid アプリ
react-native-scrollable-tabview のハマりポイント
UI 更新時のパフォーマンス改善

コメント
「2017年からAdvent Calendarに参加されていて、しっかり知見を公開されていてありがたい」
「react-native-scrollable-tabview、キッチハイクでも使っていますね」
「このライブラリを使った実装でハマったことがありました。こういう記事は参考になります」
「useMemoを使ってパフォーマンス改善したと書いてあるね」