Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React_Nativeとそのアーキテクチャ

S-cubism
October 13, 2017

 React_Nativeとそのアーキテクチャ

S-cubism

October 13, 2017
Tweet

More Decks by S-cubism

Other Decks in Technology

Transcript

  1. React Na(ve 概要  React(JavaScript)によりネイティブアプリをクロスプラット フォーム開発できるフレームワーク •  Orange Opera(on POSで採用 • 

    開発:Facebook •  Target OS:iOS、Android、(Windowsは別ライブラリ追加によ りUWP開発が可能)   長所:Webエンジニアがネイティブ開発に参加しやすい React Na(ve iOS Android windows
  2. 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を表示する
  3. 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を作成すれば利用できる。
  4. 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時
  5. 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
  6. 引用 •  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