The state of React Native in 2018

https://www.meetup.com/ReactJS-CWB/events/256217546/
https://www.meetup.com/gdgcuritiba/events/257867182/
https://www.sympla.com.br/code-for-tuba---meetup__377075

Transcript

1. The state of React Native in 2018 Guilherme Coelho Piovesan
2. $ whoami guilhermepiovesan guilherme-coelho-piovesan
3. Framework to build native mobile apps through bridged JavaScript components.
6. 2018 Downloads: +8M Stars: +71k Contributors: +1,7k
7. React Native does not compile the JS code in native code
8. Advantages over Hybrid apps • Render using native views. • Have the same feel and performance as that of a native app. • Have direct access to Native APIs. • Use Objective-C / Swift or Java code when you need to.
9. Advantages over Native • Quick development through code re-use. • Cross platform (iOS, Android). • Don't waste time recompiling (Hot Reloading). • Smaller Teams. • Can use non-DOM libraries from NPM.
10. Disadvantages over Native • Lagging SDK Updates. • Tricky development environment (without Expo). • Restrictions based on API and native components. • Memory issues in Android. • Unfamiliar Tools for debugging.
11. Native Modules Android - Java / Kotlin iOS - Obj C / Swift JS Virtual Machine JavaScriptCore RN Bridge (Java / C++) JSON asynchronous serializable batched
13. Start JS startup React
 render Layout Native components Main JS Shadow Native
 Modules
14. Hello World
15. Hello World <App> <View> <Text>
 Hello World 1 2 3 JSC
16. <Text>
 Hello World Yoga <App> <View> createView(2, RCTRawText, …) 1 (1) Root (4) RCTView (3) RCTText (2) RCTRawText JSC Hello World createView(3, RCTText, …) setChildren(3, [2]) createView(4, RCTView, …) setChildren(4, [3]) setChildren(1, [4])
17. <Text>
 Hello World Yoga <App> <View> createView(2, RCTRawText, …) 1 (1) Root (4) RCTView (3) RCTText (2) RCTRawText JSC Hello World createView(3, RCTText, …) setChildren(3, [2]) createView(4, RCTView, …) setChildren(4, [3]) setChildren(1, [4])
18. Yoga <App> <View> createView(2, RCTRawText, …) 1 3 (1) Root (4) RCTView (3) RCTText <Text>
 Hello World (2) RCTRawText JSC Hello World createView(3, RCTText, …) setChildren(3, [2]) createView(4, RCTView, …) setChildren(4, [3]) setChildren(1, [4])
19. Yoga <App> <View> createView(2, RCTRawText, …) 1 4 3 (1) Root (4) RCTView (3) RCTText <Text>
 Hello World (2) RCTRawText JSC Hello World createView(3, RCTText, …) setChildren(3, [2]) createView(4, RCTView, …) setChildren(4, [3]) setChildren(1, [4])
20. Yoga <App> <View> createView(2, RCTRawText, …) 1 4 3 (1) Root (4) RCTView (3) RCTText <Text>
 Hello World (2) RCTRawText JSC Hello World createView(3, RCTText, …) setChildren(3, [2]) createView(4, RCTView, …) setChildren(4, [3]) setChildren(1, [4])
22. Created in 2015 800M+ monthly user 100+ screens
29. “Learn once, write anywhere” Thank you!