Slide 1

Slide 1 text

ルチプラットフォーム時代の マ React Universal JS Shin Suzuki CureApp, Inc. React Native

Slide 2

Slide 2 text

今日お伝えしたいこと React Nativeを使えば、 Reactの考え方でモバイル開発ができる。 Universal JSの考え方がわかれば、 React / React Native両方で動くコードが書ける。 両方で動くコードを書くべきなのか、 に関する私なりの答え。

Slide 3

Slide 3 text

プリで治療する未来を創造する ア 提 供 キュア・アップ http://jobs.cureapp.co.jp/engineers

Slide 4

Slide 4 text

ルチプラットフォーム時代 マ コードひとつで、様々な環境に対応したい。 リソースの少ないスタートアップは特に。

Slide 5

Slide 5 text

国時代に突入した クロスプラットフォーム言語 戦 JavaScript Swift3 C# Java

Slide 6

Slide 6 text

avaScriptは、今選ぶべき言語 J 圧倒的なWebエンジニアの量 互換性を保ちながら 進化してゆくECMAScript npm上の豊富な資産

Slide 7

Slide 7 text

acebookを中心にしたJSのエコシステム babel flow React React Native

Slide 8

Slide 8 text

eact Nativeって? R クロスプラットフォームアプリ開発用フレームワーク Bridgeというしくみでネイティブコードを呼び出す ≠ HTML5アプリ iOS, Android対応。 MacOSやWindowsに対応したプラグインもある。

Slide 9

Slide 9 text

earn once, Write anywhere L 「覚えるのは一回でいい」 => Reactの流儀さえわかれば、アプリがつくれる。

Slide 10

Slide 10 text

rite once, Run anywhere? W では、すでにあるReact製Webアプリのコード どこまでReact Nativeで動くの?

Slide 11

Slide 11 text

プ ラットフォーム間のコードの共有は、 できる。

Slide 12

Slide 12 text

ただし

Slide 13

Slide 13 text

niversal U JavaScriptを 理解することができれば。

Slide 14

Slide 14 text

niversal U JavaScript? JavaScriptの言語仕様 (ECMAScript) のみに依存したコード ※サーバーサイドレンダリングなどの特定技術に限らない。 プラットフォームAPIに依存しないので、 環境を問わず利用できる。 commonjs/ESModulesのコード呼び出し部は、 bundlerによって非Node環境で実現される。

Slide 15

Slide 15 text

語仕様とそうでないものを知る 言 言語仕様 そうでない window Array Date Promise setTimeout() XMLHttpRequest localStorage process.exit() EventEmitter Object.freeze() console.log() そうじゃないけど実質Universal

Slide 16

Slide 16 text

語仕様とそうでないものを知る 言 JavaScript window Array Date Promise setTimeout() XMLHttpRequest WebAudio process.exit() fs Object.freeze() RegExp http Universal console.log() 実質Universal

Slide 17

Slide 17 text

例:fetch WhatWGが定めたWebでのHTTP Clientの仕様だが、 NodeやReact NativeにPolyfill実装があり、 実質どの環境でも動くことができる。 境の違いを吸収すれば、 「実質Universal」を作れる。 環 => HTTP Clientも実質Uniersal

Slide 18

Slide 18 text

JavaScript window Array Date Promise setTimeout() XMLHttpRequest WebAudio Object.freeze() RegExp Buffer Universal console.log() 実質Universal = 実質どこでも動く fetch() require() process.exit() fs http

Slide 19

Slide 19 text

語仕様だけでやれること 言 markdown parser moment.js Redux deep-equal などなど…実はたくさん。 csv-parse power-assert Reactの一部 aws-sdk

Slide 20

Slide 20 text

UI Layer React ビジネスロジック => プラットフォームに依存しない App Layer Domain Layer Infra Layer 質Universal だけで、 アプリケーションの何ができるか。 実 flux(Redux) (インターフェイスを統一すればいい) UI以外は共有可能 実質UNIVERSAL

Slide 21

Slide 21 text

実際に、UI以外を共有して開発した例

Slide 22

Slide 22 text

医師用管理画面 アプリ 発例 開 CureApp NASH ドメインモデルと、 その状態管理 React Native React Universal JS ドメインモデル部を 別ライブラリとして開発 UI Layer App Layer Domain Layer Infra Layer 画面の状態管理 モデルの状態管理 redux REST API層 fetch ファイルなど jsonに変換してimport

Slide 23

Slide 23 text

メインモデル? ド 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で入念にテストできる。

Slide 24

Slide 24 text

メインモデルの状態管理? ド 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

Slide 25

Slide 25 text

2つのアプリはユースケースは違うが、 扱いたい領域は同じ。 そこで、 Universalな部分を抜き出してコードを共有。 特にモデルの状態管理の複雑なロジックを Universal化し、テストを容易にできた。

Slide 26

Slide 26 text

っとWrite Onceできないのか? も 例: モバイルWebとアプリで同じ機能にしたい。

Slide 27

Slide 27 text

omponentの抽象化で、 再利用できる未来 C

    React: DOMを意識したComponent => Webにしか使えない React Native: iOS,Android両方を意識したComponent => より抽象化されている ☓ ◯ React React Native

Slide 28

Slide 28 text

eact Native Webで クロスプラットフォームは加速する? R react-native-web: 抽象化されたReact NativeのComponentを解釈し、 DOMに落としこむライブラリ。

Slide 29

Slide 29 text

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に落としこむライブラリ。 まだβ。以下のコンセプト

Slide 30

Slide 30 text

だが待って欲しい。

Slide 31

Slide 31 text

そんなにWebとアプリは UIが同じなのか?

Slide 32

Slide 32 text

バイルWebとモバイルアプリは 結構違う。 モ アクセスできるデバイスの機能 URLの有無、Routing UIイベント などなど…

Slide 33

Slide 33 text

RYと密結合のバランス D UI Layer App Layer Domain Layer Infra Layer プラットフォームごとの違いに 柔軟に対応したいレイヤー。 Universalにして再利用、 Nodeでテストして 信頼性を高めたいレイヤー UIを部分的に再利用したいなら、 密結合を防ぐために「コピー」したほうがいい。

Slide 34

Slide 34 text

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