4R Application React Native + Relay + Redux + Rails 於: 第36 回 西日暮里.rb 「Electron ではじめるアプリ開発」発売 記念 LT 大会! 2017­04­24 @ ESM さん Slide by @taiki__t

自己紹介 西日暮里.rb 主催の一人 オブジェクト指向設計実践ガイド訳した: 発売中

目次 作ったアプリ紹介 技術構成について なにを使ってるか どのように使ってるか なぜ使ってるか React Native 開発辛み楽しみ 今後の展望

今日はFront よりの話 4R といえどRails のR はほんとに出てこない

アプリ紹介 Instagram ライク※な位置、写真共有アプリ （※あくまでも実装の話。コンセプトは完全に異なります）

できること 写真に位置情報をつけて投稿 付近の投稿をみれる

やりたいこと 世界をもっとダイナミックにしたい その場で近所の今の情報を見れたら行動はもっと変わるの では？ どっかで空いた時間にどっかに立ち寄るとかできる 近所の人に気軽に情報を発信できれば、もっとお店や地域 を活性化できるのでは？

なにを使っているか 改めて技術構成の話

Front React Native （ビュー） Relay （データ管理） Redux （データ管理） React Navigation （ナビゲーション）

というかpackage.json "dependencies": { "babel-relay-plugin": "^0.10.0", "graphql": "^0.9.2", "moment": "^2.18.1", "react": "^16.0.0-alpha.6", "react-native": "^0.43.3", "react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git", "react-native-fbsdk": "^0.5.0", "react-native-geocoder": "^0.4.6", "react-native-image-resizer": "^0.1.0", "react-native-maps": "^0.14.0", "react-navigation": "git+https://github.com/taiki-t/react- navigation.git#set_params_with_nested_routers", "react-relay": "^0.10.0", "redux": "^3.6.0", },

ServerSide Rails PostgreSQL PostGIS GraphQL の処理はGraphQL Ruby を使用 https://rmosolgo.github.io/graphql­ruby/

運用 on Heroku

どのように使っている か

React コンポーネント単位でlocal state を活用 Relay ネットワーク経由のユーザーデータ管理 Redux アプリケーション全体のステート管理 login/logout, 位置情報 pub/sub ライブラリとして使っている

なぜ使っているか

React Native Swift? ES6 の方が学習コスト低そう（多少かいてたし） 面白そう

Relay Relay 使いたい REST API で悩みたくない… REST API で慣れてる人はいいんじゃないかな？ あんまり構築したことないので、同じ学びならREST API よりは GraphQL, Relay 学ぶ方が魅力的だった

Redux ^^;

Redux は使いたくなかっ た

入れたくなかった理由 Redux よくわかんない。ドキュメント多すぎ 不要な依存は入れたくない。コストに見合うかわからない

入れることになった理由 他の技術で補えなかった

Relay の問題 ネットワーク経由以外のデータ管理できない なおRelay Modern で解消される模様

React Navigation の問題 React Navigation がベータ版で機能が薄い タブ切り替えなどのスクリーンごとのLifecycle hooks が ないので、 切り替え時にログイン状態を読み込むなどが できない React Navigation v1 でだったら多分Redux 入れないで頑 張ってた 画面切り替え時にAsyncStorage で都度ログイン状態 の同期を取る

自前でpub/sub を実装す る問題

? pub/sub だけあればいいやん。でも今後のためにRedux とイ ンターフェースだけ揃えとこ

結果

No content

あれ、これもしかして、俺はRedux を実装している… ？ Redux 使えばいーじゃねーか さすがに自分で再実装してたら何やってるかわかったw

そういうわけでRedux を 導入した pub/sub ライブラリとして使っている Relay Modern がいい感じになるまでの一時的対応…

ということで全体像

No content

まぁここら辺はRelay Modern でも っとシンプルになるはず http://taiki­t.hatenablog.com/entry/2017/04/23/142701

React Native の開発で 辛かったこと

アップデート 0.40.0 ぐらいからよくなった。 それ以前はxcode.pb なんとかというファイルのコンフリク トがやばかった

React Navigation 地味に辛かった。自分のアプリを開発してるつもりが俺はいつ のまにかReact Navigation を作っていた React Navigation 自体は好き。早くv1 にしたい。

FBSDK XCode アップデートする ­> メモリが喰われる ­> iCloud 君がア ップを始める ­> ファイルはあるけど中身はない ­> ビルド失敗 する ­> 雲マーク押してiCloud からダウンロードし直す­> おも しろい

画像のアップロード ドキュメントがあまりなかった。RN のformData を使う方法な ど。 サンプルが役立った

そういうことに比べれば、 PostGIS の設定とかなんでもなか ったなぁ

まだ知らないつらみ Android も並行してやると実装以外にもUI やリリースなど考 えることが増えるので、今回初期リリースはiOS のみ Android も動かそうって思った時どれほどかかるだろうか？

React Native で楽しか ったこと

書くの楽しい 標準で提供されてるコンポーネントで割といける。外部ラ イブラリも割と色々提供されてる。ので今回の範囲では自 分でネイティブを書くことはなかった なんかブロックを組み立ててる気分 こういうのがweb でできるならweb コンポーネント早く来て 欲しい

今後の課題とチャレン ジ

Subscribe GraphQL + Action Cable

Redis or MongoDB? ユーザー数が増えた時、PostgreSQL + PostGIS のタイムライ ン出力は無理が来そう。Redis をうまく使う方法が思いつかな い。そこが今後一番の課題？MongoDB? 意見が欲しい（たすけて）

まあでも何よりも使って もらうこと。サービスと して生きないとね。 テスト版(iOS のみ) 配布ページ: https://dply.me/435uls （デプロ イゲート） 気軽にご参加ください。登録後しばらくののちに 利用可能になります。フィードバックをいただけると嬉しいで す。

おわり This slide is created with Cafe Pitch: https://github.com/joe­ re/cafe­pitch