🧊

react-native-web と react-native-dom

`react-native-web`は去年くらいに話題になってたと思うけど、最近は`react-native-dom`なる別のやつが取り沙汰されてて、これらは何が違うの?

という人へ。

ずばりコレではあるものの、それでもわからんよって人のためへのメモ書きです。

例のごとくなんか間違ってたら教えてください。

おさらい

  • react-native: JavaScriptiOS/AndroidのNativeアプリが書けるやつ
  • react-native-dom: `react-native`で、Webアプリが書けるやつ
  • react-native-web: `react-native`で、Webアプリが書けるやつ

・・・「react-native-dom react-native-web 違い」(ッターン

ってなると思う、だいたいの人は。

react-native-dom

GitHub - vincentriemer/react-native-dom: An experimental, comprehensive port of React Native to the web.

特徴はREADMEのてっぺんにデカデカと書いてある。

  • Multithreaded by defaul
  • Same layout behavior as React Native on mobile
  • Built with the same bundler used for existing React Native platforms
  • Ecosystem compatible escape hatch to the DOM

というわけで、既存の`react-native`(という1ソースでiOSAndroidの2プラットフォームに対応できる仕組み)の上で、第Nのプラットフォームとしてブラウザをターゲットにしたもの。

`react-native`が使ってる描画エンジンをWASMにポーティングして使ってるとか、WebWorkerを使ってマルチスレッドを実現とか、そのあたりがアツいと言われてる。

react-native-web

GitHub - necolas/react-native-web: React Native for Web

こちらの特徴もREADMEより抜粋。

  • High-quality user interfaces
  • Write once, render anywhere

というわけで、`react-native`という本来アプリを作るための基盤・コンポーネントを、Web(ブラウザ)でも動かせるようにしたもの。
だから`react-native`じゃない普通のReactコンポーネントも組み込めるし、通常のDOM要素も今まで通りそのまま使える。

言ってしまうとただのUI集で、Onsen UIの中の人からの話を聞いてみたくなるやつ。

というわけで

`react-native`なコードを書けば、ブラウザ上で動くWebアプリが作れるという点では同じに見えるかもしれない。
ただし、それを実現する部分と、いわゆる設計思想が異なる似て非なるもの。

まあこの界隈ではいつものことやけど、バズる割にだいたいの人には縁のない話よねーとは思う。

そういや https://mobile.twitter.com/ は`react-native-web`でできてるらしいけど、iOS/Androidのアプリは`react-native`でできてんのかね・・?

個人的に思うこと

  • `react-native`でiOS/Androidのアプリは作る
  • その上で、Web(モバイル)用もコードを共有して作りたい

という前提がないと、これら単体をWeb向けに使うっていうのは得策じゃないよなーと思った。

というのも、

いわゆる`react-native`-wayから外れた要求が出るたびに、すごくつらい思いをするのは目に見えてるし。

`react-native`の用意するいい感じのコンポーネントなんか使わなくても、既存のWebの資産をよしなに組み合わせてちゃんとWebアプリを組める側の人間からすると、`react` / `react-dom`くらいの抽象化で十分よなーという気持ち。