SkypeチームがReactで真のクロスプラットフォーム目指してる記事から10日ほど経ったわけですが、未だにひとつもQiitaに記事がないのはどういうことだ！ 寂しい！
ということでとりあえず動かしてみました。
TL;DR
- ハロワを動かしただけです（Windowsは環境の作り方を知らなくて断念）
- 全プラットフォーム同時にLive ReloadしたかったけどWeb版は最低限のwebpack設定しかなくて自分でHMRを組み込みました
- UI実装のトライアンドエラー環境としては面白い試みだなあと思いました
デモ動画
ReactXP HelloWorld Live Reloading Demo - YouTube
ソースコード
モチベーション
ReactXP自体はReactDOMとReact NativeとReact Native Windowsを抽象化して、TypeScript（TSX）で書かれたReactコンポーネントでUI開発ができるようにしたライブラリという認識です。
その性質上、公式サンプルのpackage.jsonのdependenciesが結構えげつないことになってます。
"dependencies": {
"reactxp": "0.42.0-rc.1",
"react": "15.5.3",
"react-addons-perf": "15.5.0-rc.2",
"react-addons-test-utils": "15.5.1",
"react-dom": "15.5.3",
"react-native": "0.42.3",
"react-native-windows": "^0.33.0"
}
Web向けな部分はReact Native Webと似たようなアプローチで、React Nativeの各種コンポーネント（<Text>, <View>など）の挙動を<div>などでWeb向けに再実装したコンポーネントを提供しています。
React Native Webと似たようなアプローチという点では、実はReactXPはあまり新しいことをしていない気もしてしまうのですが、React Native向けのコードを無理やりWebで動かそうとしていたReact Native Webと比べると、ReactXPのほうが抽象化のアプローチについて筋がいいような印象もあります。
となると、ReactXPの利点の一端を感じるには、Webとネイティブの同時開発を体験するのが一番です。
そんな理由で手を動かしてみました。
Web版にはLive Reloadがない
ハロワを動かして終わりにしようかと思ったのですが、困ったことに公式のハロワには自動更新の仕組みが付いていませんでした。これでは同時開発っぽい見た目にしづらくなってしまいます。
ですが幸いにも、公式サンプルのWeb向けビルドはwebpackで行われています。webpackならHot Module Replacementの仕組みが使えますね。
なんて話を同僚の @circled9 さんとしていたら、早速HMRの参考実装を作ってくれたので、ほぼパクらせていただきました。私の方で手を加えたのは RX.Platform.getType() === "web" で判定して、React Native側の処理系に影響が出ないようにすることくらいでした。
感想
React Nativeでの開発を行ったときの経験で、AndroidエミュレータとiOSシミュレータをそれぞれLive Reloadモードにすると、UIの確認が非常に捗ることはわかっていました。
ReactXPになっても、そこにWebが加わってきただけという印象なので、トライアンドエラーが捗るなーくらいの感想です。
まあまだ出てきたばかりなので、生暖かく見守っていけばいいんじゃないでしょうか。
銀の弾丸がほしい方向けの注意
React Native単品でも言えることですが、ReactXPもUI開発の一部の課題を解決するだけのツールです。
開発・リリース・運用を円滑に行っていくためには、次のような人材が必要だと私は考えています。
- Androidアプリのビルドやリリースエンジニアリングに造詣が深いAndroidエンジニア
- iOSアプリのビルドやリリースエンジニアリングに造詣が深いiOSエンジニア
- Web SPA向けのJSのビルドやリリースエンジニアリングに造詣が深いJSエンジニア
画面を作るのはできるけどbuild.gradleは読めない、とか、webpackみたいなバンドルツールには触らないで生きていきたい、とか、Xcodeは絶対に触りたくない、といったエンジニアしかいないチームでは導入を見送りましょう。
最後に
だれかWindows版とWeb版を並べてLive Reload動画つくってください。