React Native Meetup #5に参加したので簡単な感想とメモを備忘録的に残しておく。
当日のビデオが公開されている。詳しく知りたい方は見ることができる。
Reactを業務でやっているけど、Reactでも活かせそうな知見もあった。 ReactNativeでなにか作ってリリースしてみたい!という気持ちの盛り上がりを感じた
Why not React Native
いきなり英語セッションで面食らう。
ただ、始まったらゆっくりだし、内容は基本的にReactNativeのモチベーティング系の話だったのでスッと聞けた。
すでにReact Nativeを触っている自分としてはそんなに目新しいことはなかったが、Maya-Kaiというツールは触ってみようかなと思った。
日本語資料も後悔してくださっていたのでリンクはそれを張っている。Our choice in ReactNative
Electronの入門本を書いてらっしゃる方で、この本は僕も読んでいたので一気に親近感(恐れ多いけど)。
Native Bridge系の話を中心に話されていた印象だったので、Native連携は考えたことがなかった僕にとっては、なるほどこういうこともできるのか、という感じ。
今回のミートアップで全体的にNative Bridgeのことが多く語られた気がするので、大きいアプリを作ることになったら考えよう。
リリースの時の話もリリースする時になったらここに帰ってこよう。async/await 構文を使った Android とのブリッジ
まず、async/awaitをReactでも使ったことがないんだが…
というのは置いておいてReact NatveでNative連携をasync/awaitで書く話。
まとめとしてはPromiseで統一した方がよいという話になっていて、書いて見ないとなんとも感。Introduction to React Native Animated Animated入門
某SIer所属!趣味でReact Nativeやられているとは、すごい(僕も趣味だが、業務でReactやってるのでちょっと違う)
Animated APIの話をされていて、僕も4月に行われたReact&React Native入門者の会 #2で話したが、さらに深掘りされていてためになった。
ちなみに僕の発表資料は以下
React Nativeでお絵描きしてみたreact-navigation について
セコンさんの発表。Rebuildfmなどで名前は知っていたが、ちゃんとにんしきしたのは初めてだった。
react-navigationについて話されていたが、3月末くらいに触り始めた僕にとってReactNativeのルーティングライブラリはまだ正式ではないものの、公式にあったreact-navigationだったので、最近できたと聞いてそうだったのか、と思った。
ReduxとMobXの話もちらっとされてて、会場の興味的にこちらの方を喋って欲しい感を感じた。
僕は業務でReduxを触っていて、最近インターネットでReduxが複雑を助長していてよくないみたいなことでdisられているのを聞いて悲しい。
MobXを使って見て、Reduxを使う理由を主張しようかなと画策するなど。ReactNativeで9個アプリを作って、1個リリースして、使ったおすすめツールを紹介
React Native関連でいろんなツールを紹介。
まとまっていて参考になるやつ。Web開発者がReact Nativeで開発から運用までして辛かった事
最後で押していたからか、かなり足早に説明されていた印象。
コンパクトにまとまっていた感があって聞きやすかった。
Web感覚で開発できるというのはそれだけで完全に良いことだと思った。
会場で挙手のアンケートをしていたのだが、Rubyを業務でやってらっしゃる方がかなりいて、Webで仕事をしていてNativeも触りたいという人の簡単な入り口になるというのは作られた目的の一つが達成されている感があるなあと思った。
しかしなんでこんなにRuby経験者が多かったのだろうか?
懇親会
1人目に話されていたmercariの中の人に話を聞くことができた。
聞いたこととしては、以下
- mercari appではどのくらいの割合でReact Nativeが使われているのか
- 20%程度
- 型判定のライブラリは使っているのか
- プロジェクトにもよるが、typescriptとflowの両方を部分的に使っている
- ReduxとMobXではどっちが好きか
- MobX、やっぱりReduxは複雑になりがち
以下メモ
React Native Meetup #5
Why not React Native @dotPKG
英語セッション!
React Nativeを導入すると考えたときに条件がある
2015年はまだ使うべきじゃなかった
要件
- 既存アプリ上に構築できるコト
- 敏速性の高さ
- 最高なQA体験
- 最強の監視ツール
- 最大級のコード共有
ローンチした後
クラッシュリポーティング
Exponent + Maya-Kaiで最高の開発体験が得られる
Maya-Kaiがbrowser-sync的に働いてReact Nativeで作ったアプリのQAの工数削減としてすばらしいツールになった @sota1235さんが作ってる?
Mercariアプリの技術スタック
- React
- MobX
- React Navigation
- ES6
- clarifai
2017年はReact Nativeを始めるのに十分良い JavaScriptでアプリ開発を始めよう
Our choice in ReactNative @joe_re
freeeの人 Electron本の作者
交通費精算アプリをReactNativeで作ってリリースした
注意(Android向け)
How was ReactNative
- 開発期間3ヶ月
- 2名(フロントとサーバサイド) + インターン
- モバイルエンジニアなし
やっぱりNativeの知識は必要
Nativeの試算を活かしたい場面ではNativeコードを書くことができる
開発体制的に、正解だった
モバイルエンジニアが近くにいるとよい
NativeLayerの試算を活かす方法
- NFCタグを読み取り使用履歴に変換 Android SDKはNFCを読み込む操作を提供 NFCAdapterをwrapしたものをReactのライフサイクルメソッドから呼ぶ componentDidMountで呼び出す
JS Layerのミドルウェア
- redux-thunk
- redux-promise-middleware
- redux-logger
redux-promise-middlewareを選択した理由
Promiseの状態に従ってアクションの発行を自動化してくれる
payloadにpromiseを渡す→promiseのstateの遷移に従ってactionが自動でdispatchされる
NativeアプリケーションとReduxStateとの相性は良い
Router = react-native-router-fluxを使っているが…
個人的にはreact-navigationが良いっぽい?
HOCの活用
- ログイン必須ページのログイン要求
- flex-boxだけでは対応の難しい画面サイズ
- Indicatorの表示
リリースのためにやったこと
Crashlyticsを導入 ReactNative向けにreact-native-fabricというモジュールがあるのでいれておくとよい
不要な権限を消す(Android)
デバッグツールのために要求されているのでmanifestを書く Androidのgradleスクリプトではディレクトリの規約によりリリース時のManifestを選択できる
YarnのLicense表記
package.jsonの依存定義からLicense表記を生成するコマンドがある ※ あくまでも雛形
AsyncStorageREPL
AsyncStorageをNodeのREPLから見ることができる(使ってみたい!)
質問
flexbox使わなかったらAndroid確かに大変そう
async/await 構文を使った Android とのブリッジ @nullpoo
mercari フロントエンド
Androidのインテントを使って、処理結果を受け取りたい
なぜ? 音声入力をもとに表示内容を切り替え 音声入力ダイアログを呼び出したい Android開発の知見があるので、Androidのブリッジを使ってできそう
what インテント
アプリ間連携のためのメッセージングオブジェクト
Androidでインテント遷移先の結果をハンドリング
ReactNaiveでブリッジするには
1.Android側でJS側に公開するメソッドを作成"@ReactMethod"を付与するとReact native側で付与したメソッドを呼ぶことができる 2.React Native側に公開するパッケージを作成&登録 3.JS側で公開されているメソッドを呼び出す
async/awaitを使って結果を受け取る
ReactMethodでPromiseを扱うことができる 引数にPromiseを追加するとReactNative側でPromiseとして受け取ってくれる
しかし、async/awaitを使えばPromiseより直感的に扱うことができる
まとめ
- Callbackを渡す方法やAndroid→JSのブリッジを使うこともできる
- しかしPromiseをasync/awaitでハンドリングするほうがスマート
- 同期処理でない処理を行うブリッジはPromiseで統一したほうが引数もスッキリして良さそう
Introduction to React Native Animated Animated入門 @nolick1219
某SIerで介護評価検索サービスの立ち上げ 普段はRuby on Rails
React Nativeにおけるアニメーション
- Animated
- LayoutAnimation 簡易的
アニメーションの流れ
- アニメにより変化する値を定義
- 変数にCSSプロパティを紐付け
- 変数をAnimated.timing()などに渡す
- 変数の値の変化にあわせて変化させる
Animated.Value()
変数とは別レンジでCSSプロパティを紐付けたい
interpolate()
連続するアニメーション
- Animated.parallel()
- Animated.sequence()
- Animated.stagger()
今後試したいこと
Animated.Value同士を足したり書けたりできる Animated.event()でユーザーのジェスチャーによってValueを変えることができる
react-navigation について @hotchpotch
セコンさん WAmazing CTO not flux → Mobx
navigationライブラリの必要性
画面構成数が少なければ必要ない
- タブ型
- スタック型
- タブ+スタック型
ナビゲーションを実装するにあたり、必要な要素
画面を構成する部分を決定
- stackならナビゲーションバー
- タイトルや戻るボタン、その他ボタン
- おもにヘッダに実装される
何を表示するかを決める部分
- Router + state管理
- stackならstack管理
- タブならツリー構造管理
- deeplinkからの復元
- appname://search/キーなどでどのように表示するか
どうアプリにナビゲーションを組み込むか
- 自前
- 既存のライブラリ いろんなものが有る
PureJS と Native実装両方
react-navigation
2017初頭に登場 4月末に1.0.0betaをリリース
pureJS - ネイティブの気持ちを考えなくて良い - JSが分かれば自前でどうにかできる
例)examples/NavigationPlayground
良いデモ!!
クラスと実装
- Routerクラス
- TabRouter / StackRouter
内部状態ツリーを理解すると簡単
reduxやmobxではstateを管理する必要がある
Reduxの場合
公式ドキュメント()がある
MobXの場合
react-navigation-mobxサンプルがある
MobX
Hello, MobX? https://leader22.github—hogehoge
実アプリで乾燥
stateをどう扱うか意識できるところまで理解できると思った通り動くようになる タブとスタックの実装を考えることが重要
まとめ
素のRNならすんなり使える
PureJSは楽 ReduxやMobXの場合はコストが掛かる
- まだ気楽に使える形では無い
- 今後エコシステムの改善が見込まれる
※ MobXの選定基準 非同期処理の扱い方がfluxよりもシンプル Observable
ReactNativeで9個アプリを作って、1個リリースして、使ったおすすめツールを紹介 @mat_aki
SonicGarden CTO
Remoty
why ReactNative
少人数でおおきな成果 RailsでのWeb開発がベース learn once, write anywhere. webが中心でデータの参照が楽
使っておくべきツール・機能を紹介
どういうものを使ってるのかが、まだまだ
Webっぽいやつ
cmd + d
React Native Debuggeer
Reduxのステート コンポーネントの構造 デバッガがまとまっている
Firebase
Native SDKとのやり取りが簡単 - プッシュ通知 - アクセス解析 - エラー検知
CodePush
Storeの審査無しにアプリをバージョンアップできる JSの部分のみ変えることができる
Bugsnag
エラー検知サービス SourceMap に対応
React Native Router Flux
ナビゲーションコンポーネント
Redux
redux-persist redux-logger reduxsauce redux-saga ducks
Expo
Qiitaに記事あり
fastlane
pem PUSHの証明をコマンドで作る
Web開発者がReact Nativeで開発から運用までして辛かった事 @DotEarl
Toggetter
技術的な話はしない 辛かった話をする
ToggeterはReactNativeで作り直してリリース!
広告SDKの組み込み
Facebook広告を組み込みたい いい感じのパッケージが見つからない 結局じぶんで Bridgeを書いた
JSだけでかけると言ってもネイティブ側のコードも必要な時がある
RN本体のアップグレード
react-native-git-update だいたい落ちる
本体のバージョンはこまめに追従しないとダメ ライブラリの作者がやめることもある
エラーはIssue検索すれば代替見つかる
アップグレードは気合
- プッシュ通知
- WebView
安定しなかったので自分たちで直した
嬉しいこと
- Web感覚
- 公開されてる機能でだいたいなんでもできる
まとめ
- 難しいことするならネイティブは必要
- バージョンアップはこまめに
- モジュールの選定は重要