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

React Nativeを使えば、Reactの考え方でモバイル開発ができる。
Universal JSの考え方がわかれば、React / React Native両方で動くコードが書ける。
WebとモバイルアプリのUIは別。モデルとその状態管理を共有してみよう。

Transcript

1. ルチプラットフォーム時代の マ React Universal JS Shin Suzuki CureApp, Inc. React Native
2. 今日お伝えしたいこと React Nativeを使えば、 Reactの考え方でモバイル開発ができる。 Universal JSの考え方がわかれば、 React / React Native両方で動くコードが書ける。 両方で動くコードを書くべきなのか、 に関する私なりの答え。
3. プリで治療する未来を創造する ア 提 供 キュア・アップ http://jobs.cureapp.co.jp/engineers
4. ルチプラットフォーム時代 マ コードひとつで、様々な環境に対応したい。 リソースの少ないスタートアップは特に。
5. 国時代に突入した クロスプラットフォーム言語 戦 JavaScript Swift3 C# Java
6. avaScriptは、今選ぶべき言語 J 圧倒的なWebエンジニアの量 互換性を保ちながら 進化してゆくECMAScript npm上の豊富な資産
7. acebookを中心にしたJSのエコシステム babel flow React React Native
8. eact Nativeって？ R クロスプラットフォームアプリ開発用フレームワーク Bridgeというしくみでネイティブコードを呼び出す ≠ HTML5アプリ iOS, Android対応。 MacOSやWindowsに対応したプラグインもある。
9. earn once, Write anywhere L 「覚えるのは一回でいい」 => Reactの流儀さえわかれば、アプリがつくれる。
10. rite once, Run anywhere? W では、すでにあるReact製Webアプリのコード どこまでReact Nativeで動くの？
11. プ ラットフォーム間のコードの共有は、 できる。
12. ただし
13. niversal U JavaScriptを 理解することができれば。
14. niversal U JavaScript? JavaScriptの言語仕様 (ECMAScript) のみに依存したコード ※サーバーサイドレンダリングなどの特定技術に限らない。 プラットフォームAPIに依存しないので、 環境を問わず利用できる。 commonjs/ESModulesのコード呼び出し部は、 bundlerによって非Node環境で実現される。
15. 語仕様とそうでないものを知る 言 言語仕様 そうでない window Array Date Promise setTimeout() XMLHttpRequest localStorage process.exit() EventEmitter Object.freeze() console.log() そうじゃないけど実質Universal
16. 語仕様とそうでないものを知る 言 JavaScript window Array Date Promise setTimeout() XMLHttpRequest WebAudio process.exit() fs Object.freeze() RegExp http Universal console.log() 実質Universal
17. 例：fetch WhatWGが定めたWebでのHTTP Clientの仕様だが、 NodeやReact NativeにPolyfill実装があり、 実質どの環境でも動くことができる。 境の違いを吸収すれば、 「実質Universal」を作れる。 環 => HTTP Clientも実質Uniersal
18. JavaScript window Array Date Promise setTimeout() XMLHttpRequest WebAudio Object.freeze() RegExp Buffer Universal console.log() 実質Universal = 実質どこでも動く fetch() require() process.exit() fs http
19. 語仕様だけでやれること 言 markdown parser moment.js Redux deep-equal などなど…実はたくさん。 csv-parse power-assert Reactの一部 aws-sdk
20. UI Layer React ビジネスロジック => プラットフォームに依存しない App Layer Domain Layer Infra Layer 質Universal だけで、 アプリケーションの何ができるか。 実 flux(Redux) (インターフェイスを統一すればいい) UI以外は共有可能 実質UNIVERSAL
21. 実際に、UI以外を共有して開発した例
22. 医師用管理画面 アプリ 発例 開 CureApp NASH ドメインモデルと、 その状態管理 React Native React Universal JS ドメインモデル部を 別ライブラリとして開発 UI Layer App Layer Domain Layer Infra Layer 画面の状態管理 モデルの状態管理 redux REST API層 fetch ファイルなど jsonに変換してimport
23. メインモデル? ド import { PatientRepository, Patient, LessonProgressService } from 'domain' const repo = new PatientRepository() const patient = await repo.login(username, password) assert(patient instanceof Patient) const service = new LessonProgressService() Domain Driven Design Serviceは複雑な手続きを担う。 データ更新の際は差分イベント(後述)を発行。 RepositoryはデータのReadを担う ModelはObject.freeze()がかかっていて、 強制的にimmutableになっている。 クライアントがドメイン知識を利用するためのAPIを提供。 インフラ層へのアクセスはfetch等で抽象化されているので 実質Universal => Nodeで入念にテストできる。
24. メインモデルの状態管理? ド Event Sourcing storeの状態変更。およびmiddlewareでサーバーと同期 import { DomainState, createMiddleware, actions, reducer } from 'domain/redux' const patient = this.props.authPatient const event = service.finishLesson(patient, lessonId) boundActions.applyEvent(event) 状態は変えず、状態変更イベントを返す サーバーとの同期、アクセス認可、オフライン対応などは複雑で Middlewareが膨らむが、 ロジックに閉じているため、Nodeで入念にテストできる。 dispatcherをbindしたaction
25. 2つのアプリはユースケースは違うが、 扱いたい領域は同じ。 そこで、 Universalな部分を抜き出してコードを共有。 特にモデルの状態管理の複雑なロジックを Universal化し、テストを容易にできた。
26. っとWrite Onceできないのか？ も 例： モバイルWebとアプリで同じ機能にしたい。
27. omponentの抽象化で、 再利用できる未来 C <p> <div> <View> <Text> <img> <Image> <ul> <ListView> React: DOMを意識したComponent => Webにしか使えない React Native: iOS,Android両方を意識したComponent => より抽象化されている ☓ ◯ React React Native
28. eact Native Webで クロスプラットフォームは加速する？ R react-native-web: 抽象化されたReact NativeのComponentを解釈し、 DOMに落としこむライブラリ。
29. UI Layer App Layer Domain Layer Infra Layer UIも共有可能！? 実質UNIVERSAL eact Native Webで クロスプラットフォームは加速する？ R React Native的Componentは、 「実質Universal」にできるかも。 react-native-web: 抽象化されたReact NativeのComponentを解釈し、 DOMに落としこむライブラリ。 まだβ。以下のコンセプト
30. だが待って欲しい。
31. そんなにWebとアプリは UIが同じなのか？
32. バイルWebとモバイルアプリは 結構違う。 モ アクセスできるデバイスの機能 URLの有無、Routing UIイベント などなど…
33. RYと密結合のバランス D UI Layer App Layer Domain Layer Infra Layer プラットフォームごとの違いに 柔軟に対応したいレイヤー。 Universalにして再利用、 Nodeでテストして 信頼性を高めたいレイヤー UIを部分的に再利用したいなら、 密結合を防ぐために「コピー」したほうがいい。
34. 今日お伝えしたいこと React Nativeを使えば、 Reactの考え方でモバイル開発ができる。 Universal JSの考え方がわかれば、 React / React Native両方で動くコードが書ける。 WebとモバイルアプリのUIは別。 モデルとその状態管理を共有してみよう。