Leandro Nunes
a.k.a. "Little Big Nunes". I'm a web development enthusiast who believes Little things make a Big difference!
LEANDRO NUNES
software ENGINEER @
TWITTER | GITHUB | medium @LNFNUNES
react native
let's talk
let's talk
mobile apps
not
mobile web app
aka "responsive"
not
progressive web app
AKA "pwa"
not
hybrid app
aka "webview"
let's talk
native mobile apps
heaven
* Platform apis
* platform ui/ux
* PERFORMANCE
glamour
hell
* learning curve
* SINGLE PLATFORM
* "SLOW" DEVELOPMENT
* "HARD" TO DEBUG
Build
using
and
native mobile apps
JavaScript
React
who's using ?
rn reasons why
* learning curve
ios
android
objective-c
java
objective-c / swift
java / kotlin
Learn once,
write anywhere
Javascript
one language
to rule them all
REACT JS
A JAVASCIPT LIBRARY
FOR BUILDING USER INTERFACEs
import React, { Component } from 'react'
class HelloWorldApp extends Component {
render() {
return (
<h1>Hello World!</h1>
)
}
}
ReactDOM.render(<HelloWorldApp />,
document.getElementById('root'))
React "hello world"
REACT js
x
Learn once,
write anywhere
REACT-NATIVE ARCHITECTURE
MAIN THREAD
- Platform-Specific views
- Scrolling
- Native Events
LAYOUT THREAD
- Flexbox
JS THREAD
- User (app) code
JS CORE - bridge
// 1. Platform
Install Xcode // Android SDK
brew install node
brew install watchman
// 2. React Native CLI
npm install -g react-native-cli
// 3. Creating and Running
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios // run-androidSetup
import React, { Component } from 'react'
import { AppRegistry, View, Text, StyleSheet } from 'react-native'
class HelloWorldApp extends Component {
render() {
return (
<View style={styles.container}>
<Text>Hello World</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
AppRegistry.registerComponent('App', () => HelloWorldApp)
ReactNative jsx (ES7)
React native "hello world"
components "html'
| <div> | <View> |
|---|---|
| <span> / <p> | <Text> |
| <input type="text"> | <InputText> |
| <a> / <button> | <Button> |
| <img> | <Image> |
render() {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
Styling "css"
render() {
return (
<View style={styles.container}>
<Text style={{color: 'black'}}>Hello World</Text>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
* STYLESHEET MODULE OR INLINE STYLES
*"css like" name/value
* Layout Flexbox
* single platform
ios
android
#teamios
#teamandroid
almost
no code reuse
very
expensive
nearly
shared skills
Universal js WEb team
android / ios
more than 85% shared code
platform specific code
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
height: (Platform.OS === 'ios') ? 200 : 100,
});
// ...
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: { backgroundColor: 'red' },
android: { backgroundColor: 'blue' },
}),
},
});By Platform module
platform specific code
// |- BigButton.ios.js
// |- BigButton.android.js
const BigButton = require('./BigButton');
// React Native will automatically pick up
// the right file based on the running platform.By file extention
* "slow" development
ios
android
build the app
build the same app
each change
manually re-compile entire app
common js development
live-reload / hot-reload
* "hard" debug
ios
android
platform specific
TOOLING
consistant js tooling
custom js debugger / chrome devtools
in-app errors warnings
performance overlay
app store
process
approval
7 - 14 days
~
Updates
1 - 3 days
~
cherry on the cake
ota
over-the-air deployment
Microsoft
wallmartlabs
more about wallmart's ota https://adtmag.com/articles/2016/11/01/react-native-ota.aspx
apphub
SHOW ME THE CODE
DEMO
Where to go ?
thank you ! @lnfnunes
Let's talk React Native
By Leandro Nunes
Let's talk React Native
Introduction to React-Native v0.51
