REACT NATIVE
Or how to make mobile development bearable again
"a framework that will wholly replace mobile development as we know it today."
"A javascript framework for cross-platform mobile development"
Best features
- Multiplatform, 80-90% code share!
- Faster iteration and development speed than native
- Can be dropped in existant native apps
- Write once, run anywhere, in JavaScript!
Evaluation criteria
- How is your application flow written/represented?
- How is your code ran, and by what?
- Who renders the user interface, and how?
Phonegap (Cordova)
- You write code in javascript, and you communicate with native modules through a bridge
- Your JS code is interpreted by the device's JS Virtual Machine
- Your views are written in HTML and rendered by the device's webview
But how about React Native?
React Native
- You write code in javascript, communicating with native modules through a bridge
- Your JS code is interpreted by a vendored JavascriptCore
- Your views are written in React and rendered natively
React?
A Javascript library for building user interfaces
React is a library to declaratively to describe and structure UI.
<div class="content">
<div class="profile">
<img src="/avatars/1337.jpg" />
<span class="info">
<i class="name">John Doe</i>
<i class="title">CFO</i>
</span>
</div>
<span class="contentTitle">
Titles!
</span>
...
</div>
<Content title="Titles!">
<Profile photoId="1337" name="John Doe" title="CFO"/>
...
</Content>
Tons more readable!
<ScrollableList>
{
profiles.map( profile => (
<Profile ...profile>
))
}
</ScrollableList>
How the UI changes is up to you.
React isn't just about extracting elements into modules!
- Reusability
- Modulability
- Scope
React Component
Just a function (or a class) that given a state, renders that state
React Component
Large open-source scene, thousands of reusable components
* https://js.coach
* https://github.com/jondot/awesome-react-native#components
* https://github.com/react-native-training/react-native-elements
But enough of that, what about the native?
What is react native?
Implementation-wise, RN is a custom screen that reads a js file to know what, when and where to draw.
This is a massive oversimplification please don't hurt me
But what about using the OS APIs?
Native modules!
React Native has some by default, but you can roll out your own, just implement an interface!
Best features
- Multiplatform, 80-90% code share!
- Faster iteration and development speed than native
- Can be dropped in existant native apps
- JavaScript
Best features
- Multiplatform, 80-90% code share!
Best features
- Faster iteration and development speed than native
Best features
- Can be dropped in existant native apps
Best features
- JavaScript
However, a rose without thorns doesn't exist.
Worst features
- Javascript
{} + [] != [] + {}
Worst features
- Driven by Facebook needs
* https://github.com/airbnb/native-navigation
* https://github.com/wix/react-native-navigation
* https://github.com/react-community/react-navigation
Worst features
- Upgrading and native package management is complicated
'react-native link' doesn't always work
Worst features
- Slight performance overhead
Crossing the bridge takes time.
Worst features
- Long dependency chain
That's a lot to break compared to native toolkits.
Live coding!
Continued future?
- Dogfooded and integrated into products at founding company
- Most code is open sourced, even if Facebook abandons
- Thousands of apps by different companies depend on them
- Microsoft maintains a Modern UI-frontend!
Testing
Jest!
Should you use React?
It depends, but take the plunge!
$ npm install -g create-react-native-app $ create-react-native-app my-app