YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: React native sharing

REACT NATIVE 這條 路

SAM LEE

Page 2: React native sharing

Sam Lee : FED : /

Page 3: React native sharing

Demo

Page 4: React native sharing

React Native

Mobile Developer

Javascript

Java

?

FED

Page 5: React native sharing
Page 6: React native sharing

Why Javascript ? Javascript

Page 7: React native sharing

Java Obj-C

Javascript

V8 Engine Javascript Core

Page 8: React native sharing

React Native

V-OBJNATIVEOBJECT

iOSAndroid

WindowsTizen

OSXQT

VRJAVASCRIPT

Page 9: React native sharing

?? ?

Page 10: React native sharing

ReactJS

NativeFunction

V8 engine

Javascript Bridge

RCTBridge

Java bridge

Page 11: React native sharing

React Native ?

Page 12: React native sharing

ReactJS

Native Function

JavascriptCore

Javascript Bridge

RCTBridge

Obj-C bridge

Page 13: React native sharing

React Native ?

Page 14: React native sharing

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

Page 15: React native sharing

- 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

Page 16: React native sharing

? Java

Page 17: React native sharing

Lib / Backend 30%

UI / UX 70%

Page 18: React native sharing

Demo Hot Reload

Page 19: React native sharing

:iOS x 1

Android x 1 FED x 1

Page 20: React native sharing

- App

iOS iOS App

Android Android App

FrontEnd

Page 21: React native sharing

- App

iOS Android

FrontEnd

React Native App(iOS, Android)

Page 22: React native sharing

Bug : 250% up

: 280% up

Page 23: React native sharing

- React Native iOS Web (CP )

- Backend API (Fullstack…)

- Team ( )

Extra Benefits

Page 24: React native sharing

App React Native View App

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

Page 25: React native sharing

?

Page 26: React native sharing

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

Page 27: React native sharing

不必要的 Render

Page 28: React native sharing

ListView

Page 29: React native sharing

Navigator

Page 30: React native sharing

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

Page 31: React native sharing

REACT NATIVE 這條路...

Page 32: React native sharing

其實

Page 33: React native sharing

幹 之 如 飴

Page 34: React native sharing

Why 幹之如飴

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

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

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

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

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

Page 35: React native sharing

react-native init AwesomeProject

“Get your hands Dirty”

Page 36: React native sharing

React Native - Javascript -> ES6

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

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

Page 37: React native sharing

發問吧!


Related Documents