「react-native meetup#3」に行ってきた。

http://react-native-meetup.connpass.com/event/40745/

Reactやるようになったし、React Nativeにも手を出そうと思って参加してみたのでメモ。


発表メモ
===

ABOUT TESTS @janus_wel 氏
---

CureApp

https://speakerdeck.com/januswel/about-tests

非アルコール性脂肪性肝炎の治療用アプリを開発。
これのテストについて。

テストのやり方は、組織構造、アプリ規模に併せてお好きなように。

### 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
    * https://github.com/oblador/react-native-animatable

### Nativebase

* http://nativebase.io
* Bootstrap for React Native

### Single JS thread

* JSのスレッドが1つしか無い
    * アニメーション中にアクションするとフリーズする
* Interaction Managerが救いになるかも
    * https://facebook.github.io/react-native/docs/interactionmanager.html
    * これでうまくいかないと大変


### おまけ

* 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はコンポーネントを更に抽象化している
<div> → <View>
<ul> → <ListView>、とか

WEBとアプリのUIを共通化する例
react-native-web
reactの抽象化されたDOMをWEBのDOMとして解釈させる

共通化しすぎて密結合にするのは本末転倒ではないか。
WEBとアプリはUI違うし。

### まとめ

* UniversalJSの考え方でコード共有はできる
* でもWEBとアプリのUIは別物です


LT:鉄壁のキーボード @YutamaKotaro 氏
---

TextInputで困ったこととその対策の紹介

TextInputはソフトキーボードで入力する

### こんなTextInputは嫌だ

* 入力欄がソフトキーボードで隠れる
    * 考慮して余白入れたら謎の余白
    * 入力欄に併せてスクロールさせたら変な挙動

TextInputかぶる問題つらい

Swiftでも同じような問題があるらしい

### 対策

#### react-native-keyboard-spacer

* キーボードが出たらスペースを追加してくれる
* flexレイアウトのときに便利

#### react-native-keyboard-aware-scroll-view

* scrollviewde
* 

#### 複数フォームがあっても大丈夫にしたい

* flex出やりたい
* 自分で作ろう
    * ソフトキーボードがかぶらなければそのまま
    * 複数フォーム対応


* 出来たのでnpm化した
    * react-native-flex-keyboard-spacer

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ライブラリ