React Native is a JavaScript library for building user interfaces that allows developers to build mobile apps using React and write native code for iOS and Android. It allows building native UI components with JavaScript and rendering them using the native platform, avoiding cross-platform issues. While not a hybrid framework, it allows fully integrating with native APIs and using native components while writing application logic in JavaScript.

1. React Native
introduction
1

2. About the author
● CTO @ Polidea
● Founder of Mobile Warsaw
● Founder and organizer of mceconf.com
2

3. ● not a Hybrid App framework
● no HTML/DOM, CSS*
● no cross-platform app tool
● no application architecture framework
● no, you cannot use jquery plugins with it*
What RN is not
3

4. A JAVASCRIPT LIBRARY
FOR BUILDING USER INTERFACES
What RN is
Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.
4

5. ● native UI components
● fully asynchronous UI
● no two-way data-binding
● no application architecture lock-in
● great for modern patterns
○ CQRS (Domain Driven Design and Event Sourcing)
○ Flux (Facebook pattern)
No architecture lock-in
5

6. Components - fundamental building blocks
● state machine
● properties
● render method (JSX)
● flexbox css-like style
● composable
6

7. Component demo
7

8. Rethink established best practicesTM
Component Example
8

9. Everything*
is javascript
● code is javascript
● styles are … javascript
● views are … javascript
● layout calculation is … javascript
9

10. We all love Javascript
10

11. JSX example
var app = <Nav color="blue">
<Profile>click</Profile>
</Nav>
var Nav, Profile;
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
11

12. Styles example
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
bckg: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
12
<Text style={styles.base} />
<View style={styles.bckg} />
<View style={[styles.base, styles.bckg]} />
<View style={[styles.base,
this.state.active && styles.active]} />

13. Not your grand-father’s javascript
● use ‘strict’
● Runtime: JavascriptCore/V8
● Node 4.0.0 : Node.js + io.js converged
● (some) ES6 + ES7: Babel transpiler
● @flow - compile time - static type check
13

14. Why react is different?
14

15. Application demo
15

16. States and Virtual View Hierarchy
Component
State
Your
code
Render
(in javascript)
View
Virtual View Hierarchy
Javascript objects
Image
Image
Text
React
Build native views
(native code)
16

17. State changes
Component
State: {}
Component
State: {workshops: {...} }
Update State
Reconciliation
Incremental changes
Animations
Javascript
Native code
17

18. Incremental updates / animations
Update
Create
18

19. Is react fast (enough)?
19

20. Native/Javascript bridge
● Javascript runs in non-UI thread
● Asynchronous, serializable communication
● Batching requests
● Lots of optimisations
● More potential optimisations in the future
● Flexible threading model
20

21. Animations
● LayoutAnimations - simple
● Animated - fine grained control
○ Value animations still in javascript
○ Will be native soon
○ Declarative
21

22. Animation example
22

23. Developers first
23

24. Integration with native code
● Native APIs: iOS/Android
● Native UI components: iOS/Android
● Direct Properties access: iOS/Android (?)
● Embed RN view in Native app: iOS for now
24

25. ● Intellij Idea/Webstorm with JSX Harmony
● Live Reloads
● Support for debugging via Chrome tools
● React Chrome extension
● Modify code in debugger
Developer’s toolchain - web-developer’s like
25

26. Developer’s toolchain goodies
● Fast packager
● Verbose error diagnostic
● Element Inspections
● Profiling
● JS Tests
● Integration tests and Snapshot tests (iOS for now)
● UIExplorer
26

27. Deployment options
27

28. Internal Architecture
28

29. Standalone app
29

30. Development
30

31. Debugging
31

32. Remote server
32

33. Live AppStore application update - AppHub.io (iOS for now)
33

34. Facebook goals (what they told)
● Learn once - write anywhere
● No “cross-platform app framework”
● Less complex apps with React
34

35. ● A lot of common code shared
● Reuse of existing libraries
● Built-in cross-platform support (soon)
● Dynamic app updates (A/B testing)
Facebook achievements
35

36. Is it ready yet?
● Still changing fast
● Some small issues with performance
● Needs verification with big application
● (but Facebook made AdsManager)
● Some components are beta
● A number of community components
● Slowly growing community
● “Distributed” documentation
36

37. 37
polidea.com, jarek.potiuk@polidea.com, jobs@polidea.com
Q & A