Reactやるようになったし、React Nativeにも手を出そうと思って参加してみたのでメモ。
発表メモ
ABOUT TESTS @janus_wel 氏
CureApp
非アルコール性脂肪性肝炎の治療用アプリを開発。
これのテストについて。
テストのやり方は、組織構造、アプリ規模に併せてお好きなように。
5W1H
WHY
- 開発者によるテスト
開発者による機能正当性のテスト - 受け入れテスト
受託なら受け入れテスト
受託じゃなくてもメトリクス取ったりしてユーザ満足度図る - QA(Quality Assurance) Test
品質のためのテスト、不具合発生頻度など測って品質予測改善していく
Layered Architecture
- UI Presentation
- 複雑、つらい
- Domain Logic
- Unit Test, Integration Test
- Infrastracture Data
- モバイルアプリに関しては無視
- ベンダーを信じる
WHERE
- 実機
- ここがゴール、でも高コスト
- 開発マシン
- universal
- シミュレータ／エミュレータ
- CIマシン
- 低コストだけど、信用度は低い
WHEN
- 変更したとき
- コミットしたとき
- マージしたとき
- リリースしたとき
HOW
- 汎用テストフレーム
- Jest
- Mocha
- E2Eテストフレームワーク
- Appium
- 補助ツール
- ESLint
- flow
TOOLS
Jest
- Jasmine Base
- Facebook製
- JSXのスナップショットをテスト
- プレゼンテーション層、ドメイン層に使える
Mocha
- プレゼンテーション層はEnzyme（AirBnB製）と合わせて使う
- 指定箇所をレンダリングしてテスト
Jest vs Mocha
- 使いやすい方使えばいい
- 日本だとMocha+Power−Assertが流行ってるからMochaの方がカンタンかも
- 特に前提ない（まっさら）ならJestが良いかも
Product Lifecycle
- Plan
- Develop
- Deliver
Maintain
Requirements -> E2E Test (Appium)
Design -> Unit, Integration (Jest, Mocha)
Implements -> ESLint, Flow
Deliver
- （特にAndroidでは）たくさんの端末とバージョンがある
Maintain
- リリースするとバグ報告が上がってくる
- バグフィックス後のテスト大事
Case Study
- 規模によってはE2Eは手動とかも選択肢に入る
- やりやすいところからやっていく
- 頑張りすぎると続かない
Findings in RN 2016 @shohey1226 氏
Global Step Academy
1人ReactNativeAdventCalendar2015やった。
（もう古くなってるかも）
State管理
- 今はRedux一択か
- ドキュメント揃ってるし
- プラグインもたくさんある
- でもtry/error結構必要
Router/Navigator
- router-flux
- reduxと協調させやすい
- でもやっぱりtry/error必要
DB
- AsyncStrageは遅い
- オンメモリが必要
- react-native-local-mongodb
- NeDBのReactNative Port
- オンメモリで使える
Animation
- react-native-animatable
Nativebase
- http://nativebase.io
- Bootstrap for React Native
Single JS thread
- JSのスレッドが1つしか無い
- アニメーション中にアクションするとフリーズする
- Interaction Managerが救いになるかも
おまけ
- react-native-macos
- MacOSのアプリも作れる
- UI作るのが大変そう
マルチプラットフォーム時代のReact/ReactNative/UniversalJS @shinout 氏
CureApp CTO
ReactでもReactNativeでも動くコードと、書くべきなのか。
React製WEBアプリのコードはどこまでReactNativeで動くのか。
Universal JavaScriptを理解すれば可能。
Universal JavaScript
- ECMAScrtptのみに依存したコード
- プラットフォームAPIに依存しない
- commonjs/ESModulesはbundler(webpack, browserifyなど)で実現する
言語仕様とそうでないものを知る
Universalは言語仕様のみ、console.logは実質Universal扱いしてもいいかな
windowとかはプラットフォーム依存
実質Universalは拡張できる
例えばfetchはNodeやReactNativeでpolyfill実装がある。
requre(), bufferとか。
Reactの一部とかReduxも
UI以外は共有可能。
保存などのインフラ部分もHTTPで喋らせればUniversalに出来る。
実際にUI以外を共有して開発してみた
アプリ ReactNative
管理画面 React
画面の状態管理 redux
ドメインモデルと状態管理 UniversalJS
モデルの状態管理 redux
モデルはObject.freeze()で強制的にimmutableにする
immutableにすることでreduxのstateに突っ込める
React Native はサーバから開放されている。
ドメインをUniversalにすることで、WEBでもReactNativeでもElectronでも使えるようになる。
storeの状態変更するときにmiddlewareでサーバと同期したり。
オフライン時に更新Eventをプールしておいて、オンライン時にサーバに動悸する仕組みを用意する。
ReduxのStateをオンメモリDBの用に扱う。
Stateの永続化もしないといけない。AppStateが変わるタイミング（アプリがInactiveになるときとか）にAsyncStorageに保存。
もっとWrite Onceにしたい
UIもUniversalに出来ないか。
ReactNativeはコンポーネントを更に抽象化している
- → 、とか
- UniversalJSの考え方でコード共有はできる
- でもWEBとアプリのUIは別物です
- 入力欄がソフトキーボードで隠れる
- 考慮して余白入れたら謎の余白
- 入力欄に併せてスクロールさせたら変な挙動
- キーボードが出たらスペースを追加してくれる
- flexレイアウトのときに便利
- scrollviewde
- flex出やりたい
-
自分で作ろう
- ソフトキーボードがかぶらなければそのまま
- 複数フォーム対応
-
出来たのでnpm化した
- react-native-flex-keyboard-spacer
WEBとアプリのUIを共通化する例
react-native-web
reactの抽象化されたDOMをWEBのDOMとして解釈させる
共通化しすぎて密結合にするのは本末転倒ではないか。
WEBとアプリはUI違うし。
まとめ
LT:鉄壁のキーボード @YutamaKotaro 氏
TextInputで困ったこととその対策の紹介
TextInputはソフトキーボードで入力する
こんなTextInputは嫌だ
TextInputかぶる問題つらい
Swiftでも同じような問題があるらしい
対策
react-native-keyboard-spacer
react-native-keyboard-aware-scroll-view
複数フォームがあっても大丈夫にしたい
LT:React Native for ... @besutome 氏
sapeet
https://github.com/besutome/slides/blob/master/20161028-ReactNative/README.pdf
各プラットフォームの対応状況の話
ReactNative -> iOSとAndroid
ReactNative for Web (twitter)
React Web (taobao, facebook)
-> WEB
React Desktop
-> macOS Sierra, Windows10
Ract Native plugin for Universal Windows Platform
-> Win10, Win10 mobile, xbox one
C#に変換
React Native本体にContribute予定
React VR
-> Oculus Rift
THREE.jsとReactVRライブラリ