React_Nativeとそのアーキテクチャ

Transcript

1. React Na(veと そのアーキテクチャ 2017/10/13 笹渕 弘輝
2. React Na(ve 概要 　React(JavaScript)によりネイティブアプリをクロスプラット フォーム開発できるフレームワーク •  Orange Opera(on POSで採用 •  開発：Facebook •  Target OS：iOS、Android、（Windowsは別ライブラリ追加によ りUWP開発が可能） 　　長所：Webエンジニアがネイティブ開発に参加しやすい React Na(ve iOS Android windows
3. React Na(ve Build iOS App Run JavaScriptCore Babel JavaScript compiler JavaScriptCore内のスレッドにおいて、 Reactが実行される。 Na(ve UI(Objec(ve-C) Bridge(Objec(ve-C/C++) Bridgeにより、ReactのUI Componentが Na(veを実行 Na(veのUIを表示する
4. Component Objec(ve-C Class Bridge RCTView <View> RCTTextView <Text> React Component React Na(veのComponentは、Bridigeを通して、 Objec(ve-CのUIViewへと対応する。 Touch Event →　ネイティブアプリに近いパフォーマンス →　Reactに足りないNa(veの機能があれば、 　　対応するNa(veのClassを作成すれば利用できる。
5. Develop index.ios.js コマンド；react-na(ve run-ios localhost server Xcode Build App run RCTRootView Cmd + R reload Xcode Debugging Bundle Reload Na(ve(objec(ve-C、SwiY) をデバッグ可能 JavaScriptのみリロードして、 高速にアプリ反映すること ができる。 JS実行環境をChrome V8に切替 Chrome Developer toolsを利用。 Chrome V8 Web Socket Na(ve UI →　高速なプロトプログラミング開発 　　の実現 JS and Bridge Google Chrome Debug時
6. Archive(Produc(on) index.ios.js コマンド；react-na(ve run-ios main bundle Xcode Build App run RCTRootView Bundle Na(ve UI →　Produc(onとDevelopでは、UIへの反映速度には 　　差がある。 JS and Bridge
7. 引用 •  React Na(ve JS Enviroment: h]ps://facebook.github.io/react- na(ve/releases/0.27/docs/javascript-environment.html •  React Na(ve Bridge: h]ps://facebook.github.io/react-na(ve/ docs/na(ve-modules-ios.html •  JavaScriptCore: h]p://trac.webkit.org/wiki/JavaScriptCore •  Chrome V8: h]ps://developers.google.com/v8