React native sharing

REACT NATIVE 這條 路

SAM LEE

Sam Lee : FED : /

Demo

React Native

Mobile Developer

Javascript

Java

?

FED

Why Javascript ? Javascript

Java Obj-C

Javascript

V8 Engine Javascript Core

React Native

V-OBJNATIVEOBJECT

iOSAndroid

WindowsTizen

OSXQT

VRJAVASCRIPT

?? ?

ReactJS

NativeFunction

V8 engine

Javascript Bridge

RCTBridge

Java bridge

React Native ?

ReactJS

Native Function

JavascriptCore

Javascript Bridge

RCTBridge

Obj-C bridge

React Native ?

https://facebook.github.io/react-native/showcase.html

- 2015/10 - React Native v0.11 ( Support Android)

- 2016/04 in Facebook F8 conference , Microsoft and Samsung have committed to bringing React Native to Windows 10 and Tizen

- 2016/10/06 React VR announcement!

- 2017/02 React Native v0.41 2 1 release

? Java

Lib / Backend 30%

UI / UX 70%

Demo Hot Reload

:iOS x 1

Android x 1 FED x 1

- App

iOS iOS App

Android Android App

FrontEnd

- App

iOS Android

FrontEnd

React Native App(iOS, Android)

Bug : 250% up

: 280% up

- React Native iOS Web (CP )

- Backend API (Fullstack…)

- Team ( )

Extra Benefits

App React Native View App

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

?

在 React Native經過, 路過, 也不會錯過的

坑

不必要的 Render

坑

ListView

坑

Navigator

坑

React Native更新太快!! (好? 壞?)

坑

REACT NATIVE 這條路...

其實

幹 之 如 飴

Why 幹之如飴

1.不⽤怕沒有 Solution (上⾯⼀群神⼈在幫你)

2.更新很快, 這次沒有的 Feature 下次可能就有了

3.刻 UI 不⽤等 !!! (省太多時間了)

4.⼀套 Code 同時開發 2 個平台 (Reuse rate ⾼達 80%)

5. 80%的問題都是 1個 solution for 2 個平台(當然 bug 也是⼀次 2 個平台...)

react-native init AwesomeProject

“Get your hands Dirty”

React Native - Javascript -> ES6

- ReactJShttps://facebook.github.io/react/

- Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

發問吧!