`react-native-web`は去年くらいに話題になってたと思うけど、最近は`react-native-dom`なる別のやつが取り沙汰されてて、これらは何が違うの？
という人へ。
ずばりコレではあるものの、それでもわからんよって人のためへのメモ書きです。
Difference between react-native-dom and react-native-web. #reactnative
— なかざん@りあくとねーてぃぶおじさん (@Nkzn) 2018年5月26日
RNDom is the third party RN Native implementation, and has Worker Thread. RNWeb is the UI library which is similar to RN features, and RNWeb run on UI thread. pic.twitter.com/iXZLn7owLy
例のごとくなんか間違ってたら教えてください。
おさらい
- react-native: JavaScriptでiOS/AndroidのNativeアプリが書けるやつ
- react-native-dom: `react-native`で、Webアプリが書けるやつ
- react-native-web: `react-native`で、Webアプリが書けるやつ
・・・「react-native-dom react-native-web 違い」（ッターン
ってなると思う、だいたいの人は。
react-native-dom
特徴は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ソースでiOSとAndroidの2プラットフォームに対応できる仕組み）の上で、第Nのプラットフォームとしてブラウザをターゲットにしたもの。
`react-native`が使ってる描画エンジンをWASMにポーティングして使ってるとか、WebWorkerを使ってマルチスレッドを実現とか、そのあたりがアツいと言われてる。
react-native-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`でできてんのかね・・？
個人的に思うこと
という前提がないと、これら単体をWeb向けに使うっていうのは得策じゃないよなーと思った。
というのも、
- `video`とか`canvas`とか`audio`とかそのあたりのAPIでいろいろしたいとか
- 用意されたコンポーネントの挙動を少し変えたいとか
- 用意されたコンポーネントでは実現できないUIにしたいとか
いわゆる`react-native`-wayから外れた要求が出るたびに、すごくつらい思いをするのは目に見えてるし。
`react-native`の用意するいい感じのコンポーネントなんか使わなくても、既存のWebの資産をよしなに組み合わせてちゃんとWebアプリを組める側の人間からすると、`react` / `react-dom`くらいの抽象化で十分よなーという気持ち。