react-native meetup#3 勉強会に参加した

勉強会の基本情報

• 【日　時】2016年10月28日 19:00~22:00
• 【会　場】リレーションズ株式会社
• 【参加費】無料
• 【主　催】kazunari.NAKATA
• 【申し込み】http://react-native-meetup.connpass.com/event/40745/

概要

• About Test
  • @janus_wel
• マルチプラットフォーム時代のReact, React Native Universal JS
  • @shinout
• LT:TexInputと戦う話
  • @YutamaKotaro
• LT:ReactNativefor...
  • @besutome

内容

About Test

株式会社キュア・アップの技術について

• 言語
  • server: node.js
  • web: React.js
  • mobile: React Native
  • desktop: Electron
• common tools
  • Babel
  • ESLint
  • browserify
  • webpack
  • mocha
  • flowtype
  • npm
  • documentationjs

補足

• 発表内容が多いが、気になることをここに記述した

マルチプラットフォーム時代のReact, React Native Universal JS

React Nativeって何？

• クロスプラットフォームアプリ開発用フレームワーク
• iOS, Android対応
• MacOSやWindowsに対応したプラグインもある
• Bridgeという死喰いでネイティブコードを呼び出す(HTML5アプリじゃない)

Learn once, write anywhere

• 覚えるのは１回でいい
• プラットフォーム間のコードの共有は、できるか？
• Universal Javascriptを理解することができれば。

Universal Javascriptとは？

• javascriptの言語仕様(ECMAScript)のみに依存したコード
• プラットフォームAPIに依存しないので環境を問わず利用できる
• commonjs/ESModulesのコード呼び出し部は、bundlerによって非node環境で実現される

言語仕様とそうでないものを知る

• Universal
  • RegExp, Array, Date, Object.freeze(), setTimeout(), Promise
• 実質Universal
  • console.log()
• その以外
  • fs, http, process.exit(), window, webAudio, XMLHttpRequest

実質Universalだけで、アプリケーしょんの何ができるか

• UI Layer
  • なし
• App Layer
  • React, flux(Redux)
• Domain Layer
  • ビジネスロジック（プラットフォームに依存しない)
• Infra Layer
  • インターフェイスを同じすればいい
• 結論： UI以外は共有可能

LT:TexInputと戦う話

• 問題
  • TextInputとキーボードがかぶっていて何を入力している分からない
• Swiftだとどうなの？
  • Swiftエンジニアに聞いたところ
  • Swiftでも対策が必要らしい
  • React Native特有の問題ではない
• 経過
  • react-native-keyboard-spacer
    • https://github.com/Andr3wHur5t/react-native-keyboard-spacer
    • 単一かつflexレイアウトの時に有効
    • 自動で動作してとても便利
  • react-native-keyboard-aware-scroll-view
    • https://github.com/APSL/react-native-keyboard-aware-scroll-view
    • Scroll Viewの時に有効
    • 複数入力フォームがあっても問題なし
    • 手動でbindingする
  • 不満
    • 複数フォームがあっても大丈夫にしたい
    • flexでやりたい
• 自作
  • react-native-flex-keyboard-spacer
  • https://github.com/YutamaKotaro/react-native-flex-keyboard-spacer
  • 複数項目とflex両方に対応できる

React Native for...

• React Native for Web
  • https://github.com/necolas/react-native-web
  • star数： 3264
  • React NativeのコンポーネントとAPIをwebでも使えるようにした
• React Web
  • https://github.com/taobaofed/react-web
  • star数： 2030
  • タオバオの二人がメインで開発
• React Native for macOS
  • https://github.com/ptmt/react-native-macos
  • star数： 7952
• React Desktop
  • https://github.com/gabrielbull/react-desktop
  • star数： 5267
  • React UI ComponentsがmacOS Sierraとwindows10で働く
  • node-webkitかElectron.jsで働かす
• A framework for building native apps with React. http://facebook.github.io/react-native/
  • https://github.com/ReactWindows/react-native-windows
  • star数： 1134
  • FacebookとWindows公認
• React VR
  • https://developer.oculus.com/webvr/
  • 開発中

感想

• React Native, Reactが初耳じゃないが、React Native勉強会に参加することが初めてである
• いろいろな会社は、React Nativeを使ってモバイルアプリを開発している。開発者は、一つの言語を把握して、サーバー側やクライアント側も作れることが素晴らしい
• ReactとReact Nativeは、共通できるかどうかことがわかっている。今後は、Learn once write anywhereできれば、開発効率が高くなれるね
• 今回は、用事があるので、懇親会に参加できなかったことが残念