class: middle, center, inverse
#You don't know React Native
@khanght
Employment Hero
facebook.vn/groups/reactvn/
???
What is the purpose of this talk? Just one thing, when you buddy asks you "Hey, i just heard about React Native Native, do you know about it?" you can answer with confidence "Yes, I do"
class: middle, center, inverse
#Architecture
+-------------------------------------------------------+
| |
| |
| |
| |
+----------------------> |
| | |
| | View |
| | |
| | |
| | |
+----------+-----------+ | |
| | | |
| | | |
| | | |
| | | |
| | | |
| Store | | |
| | +-----------------------------------------------+-------+
| | |
| | |
| | |
| | |
+----------+-----------+ | Dispatch
^ |
| |
| |
| |
| +-------------------------------+ +--------------v-------+
| | | | |
| | | | |
+---------+ Reducer <-------------+ Action |
| | | |
+-------------------------------+ +----------------------+class: middle, center, inverse
class: middle, center, inverse
React Native lets you build mobile apps using only JavaScript.
React Native page
??? React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
class: middle, center, inverse
V = func(state);??? Your entire UI is just the output of a pure function that takes your current app state. So when your state changes, React will do the diff-ing and efficientky render parts that need to be updated/changed to reflect your new app state.
What does it look like? It looks sth like this.
import React, { Component } from 'react';
class HelloWorld extends Component {
render() {
return (
<div>
<span>
Hello world
</span>
</div>
);
}
}??? This is the code from React to print out Hello world. You can see that the
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class HelloWorld extends Component {
render() {
return (
<View>
<Text>
Hello world
</Text>
</View>
);
}
}You can find out that there are a lot more "native" components that you can use to build you apps, for example View, ScrollView,
class: middle, center, inverse
??? With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
class: middle, center, inverse
class: middle, center, inverse
React Native is the future. We will use it to build our iOS app from scratch as soon as it becomes public.
@fanghaochen - Discord dev
class: middle, center, inverse
???
class: middle, center, inverse
??? Since we use Javascript on both ios and android, so the percentage of code can be shared is more than 90%. What can't be share is platform specific code, such as on Android you want to have the "feeling" like what on Android Material guideline, the same for iOS. The part can be reused the most is the business logic, API calls...
import React, { Component } from 'react';
import { View, Text } from 'react-native';
const style = StyleSheet.create({
containser: {
flex: 1,
backgroundColor: 'yellow',
}
});
class HelloWorld extends Component {
render() {
return (
<View>
<Text style={{ color: '#333' }}>
Hello world
</Text>
</View>
);
}
}??? React Native uses a subset of css, Flexbox’s style code is about half as long and far easier to understand than the code of Auto Layout (ios). Easy to understand even if we haven't coded any line of css before.
class: middle, center, inverse
???
class: middle, center, inverse
???
class: middle, center, inverse
???
class: middle, center, inverse
???
class: middle, center, inverse
??? Apps is still able to catch up with the lightning speed of webs and desktop development. Apple has recently allowed you to update the app over the air using JavaScriptCore without going through the App Store review process again. It is very helpful for a small startup without a fully dedicated iOS QA team doing thorough tests, since the iOS team is able to apply some hot fixes after shipping new features. The same for Android, as usual.
class: middle, center, inverse
class: center
from https://discord.engineering/using-react-native-one-year-later-91fd5e949933#.7j2w2c656
??? React Native runs Javascript on a background thread and sends a minimal amount of code to main thread. It turns out there is little performance difference between this and native iOS apps which are written in Objective-C or Swift!
class: center
class: middle, center, inverse
class: middle, center, inverse
??? Each platform like iOS/Android/Window Phone has their own impletementation of List View and it's time-tested solution.
If your use-case falls under the second use-case: High variation between rows and a smaller data-source — you should probably stick with the stock ListView implementation. If your use-case falls under the first use-case and you’re unhappy with how the stock implementation performs, it might be a good idea to experiment with alternatives.
class: middle, center, inverse
??? One of those is trying to wrap the native component and use it directly from React Native, for more information http://bit.ly/react-native-native-listview
class: middle, center, inverse
??? ReactART: allow you to play with Vector (SVG) using React and we can use in React Native as well.
class: middle, center, inverse
??? If you app have to use some specific code from your native platforms, you can write bridges from your native code and expose it to React Native,
class: middle, center, inverse
class: center
class: center
class: middle, center, inverse
??? I don't know what does future look like but one thing I can assure with you that it depends on what we do today, you can learn about React Native, it's ok if you love it or not. I would like to end my talk with a quote from a great guy, he said "Stay hungry, stay foolish".
class: middle, center, inverse
??? because knowing that we have nothing to lose (in term of knowledge) is the key for try out a new things, create path to the future, and if we work hard enough and have some lucks, the future will call our names.
class: middle, center, inverse
???
class: middle, center, inverse
???