「React Native Meetup #7」に参加してきました

• 2018/2/8
• https://react-native-meetup.connpass.com/event/74187/

Swagger駆動開発と最新のRedux構成

• andoshin11

API開発の問題点とSwagger

課題

• 定義書のフォーマットどうする問題
• 定義書のバージョン管理どうする問題
• 実装待ちどうする問題
• これら全部Swaggerでかいけつできる

定義書のフォーマットどうする問題

• OpenAPI Initiativeに則ろうを
• https://www.openapis.org/

定義書のバージョン管理どうする問題

• Git使おう

実装待ちどうする問題

• スタブサーバ欲しい

Swagger

• REST APIを作れる
• json,yamlで定義できる
• 定義書自動生成される
• 関連ツールがとにかく多い

SwaggerEditer

• Swaggerファイルの編集ツール
• 即時構文チェック

SwaggeCodegen

• APIスタブ生成ツール
• SwaggerEditerに組み込まれてる

SwaggerUI

• ブラウザで動くAPIドキュメント

Swaggerの開発フロー

いけてない運用例

• SwaggerEditerで定義
• サーバーをgenerate
• zip解凍 & yarn install
• SwaggerUI出力
• yamlの入出力が手動
  • せっかくgit管理してるのに・・・
• API更新の度にzipダウンロード解凍起動

もっとスマートに

swagger-editer-live

• cliからediterを起動するツール
• https://github.com/moon0326/swagger-editor-live
• 引数で指定したyamlを自動import
• 変更結果を即時反映してくれる

swagger-codegen

• java性
• cliから利用できる

CodePush と Circle CI でリリースを高速に回す

• yuyat
• Quipper
• https://presentations.yuyat.jp/2018/02/08/react-native-meetup-7/
• http://quipper.hatenablog.com/entry/2017/12/06/060641

NativeアプリをWebのようにリリースしていこうという話

CodePush

• OTA(Over the Air)
• microsoftが作ってる
• ネットごしにJSコードをアップデートできる
  • nativeのモジュールは更新できない
• VisualStudioAppCenter

CodePushのセットアップ

• 公式に書いてある手順で簡単
  • CodePushをアプリに適用
  • CLIインストール
  • AppCenterに登録
  • リリース
• アップデートのタイミング
  • ポップアップでアップデートするかだしたりとか
• コマンドでリリースできる
  • RollBackもできる
• githubと連動して動かせる

ReactNative開発を高速化させる技術

• eishiscom
• eishis, inc
• https://speakerdeck.com/eishis/react-native-kai-fa-dao-ru-wogao-su-hua-saseruji-shu

どんなツール使ったかの話

• WordPress REST API
• sketch-to-react-native
  • https://github.com/nanohop/sketch-to-react-native

React Nativeで作る色々なジェスチャー

• saitoxu
• Carat
• https://speakerdeck.com/saitoxu/react-nativedezuo-ruse-naziesutiya

ジェスチャーの作り方

タップ

• Touchable*系
• onPress

長押し

• Touchable*系
• onLongPress

ダブルタップ

• Touchable*系をラップして独自で作る
• 前回タップとの間隔見て処理する

ドラッグ

• PanResponder

スワイプ

• PanResponder
• 閾値を設定 -閾値を超えたらスワイプ発動

ピンチイン&ピンチアウト

• PanResponder
• gesturesStateの中の情報で拾える

Navigation in a hybrid app

• hotchemi
• Quipper
• https://speakerdeck.com/hotchemi/navigation-in-a-hybrid-app

Navigator

• native開発者視点で

ReactNavigation

• transitionが違和感
• 特定のタイミングで処理をはさみたいとかがしづらい

ReactNativeNavigation

• RNとNativeのハイブリット対応してない

airbnb/native-navigaiton

• まだベータ
• iosがswift3で4でコンパイルできない

自前で書いた

• 自前でもけっこうできちゃう

BLE on React Native

• januswel(CureApp)
• https://speakerdeck.com/januswel/ble-on-react-native

BLEとReactNative

• BLE
  • Bluetooth Low Energy
• ハードウェアと協業
• 技適取得済みチップを使うこと
• react-native-ble-manager
  • react-native-bleはメンテされてない
• セントラル
  • クライアント
• ペリフェラル
  • サーバ
• Androidだと処理が遅くてうまくいかないことも
  • 適宜waitすることで対応

メモ

• pre-commitというnpmモジュール使うとcommitした時にnpm-script動かせる