React Native
Native App Development for Web Developers
Nader Dabit
About Me
- Software developer by trade
- Now a full time consultant and trainer
- Originally a web developer, now doing both web and mobile development
- Transitioned from Angular > React + React Native in early 2015
- Founder of React Native Training
- Author of React Native in Action from Manning Publications
- Host of React Native Radio on Devchat.tv
- Open source contributor to React Native and various React Native projects
What is React Native?
Framework for building Native Mobile Apps using JavaScript
- Built on top of React
- Use React Native to build cross platform mobile applications
- Open sourced and maintained by Facebook
- Apps written in JavaScript
- Learn once, write anywhere
- 80%-95% code reuse
- Compiles to real native mobile applications
- Uses the same fundamental UI building blocks as real native apps under the hood
React Native vs HTML
<div>
<p>Hello World</p>
</div><View>
<Text>Hello World</Text>
</View>HTML
React Native
React Native vs HTML
HTML | React Native
<div> == <View>
<p> || <span> == <Text>
<button> == <TouchableHighlight>
<img /> == <Image />
<input /> == <TextInput />
React Native vs React
import React from "react"
class SomeComponent extends React.Component {
render () {
return (
<div>
<p>Hello World</p>
</div>
)
}
}React
React Native vs React
import React from "react"
import { View, Text } from "react-native"
class SomeComponent extends React.Component {
render () {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}React Native
React Native Elements
import { Button, SocialIcon } from "react-native-elements"
<Button
title="Button" />
<SocialIcon
type="facebook" />
React Native vs Hybrid
Pros
- Project momentum
- React ecosystem / Redux / one way data flow / Mobx
- Better user experience - apps feel much better and smoother
- No longer dealing with browser apis
- Great developer experience
- Hot / live reloading
- Open Source
- Core contributors of React Native are using it in their own production apps and in their companies
- Fun to build once you learn the framework
- Will be able to build for desktop, web, + other platforms
- Continuous deployment easy to integrate (Code Push and similar)
React Native vs Hybrid
Cons
- Still new - 24 months iOS / 18 months Android
- Fairly Unstable - New versions every 2 weeks, some with breaking changes
- Another technology that you have to learn (React), while Cordova can be picked up quickly by anyone who knows HTML + JavaScript.
- Unfamiliar development environments and platforms (xCode, Android IDE)
- Styling inconsistencies with CSS
- Not yet quite to feature parity with Cordova
Is React Native Production Ready?
- Facebook Groups
- Facebook Ads Manager
- Facebook News Feed
- Tesla
- Wix
- WalMart
- Airbnb
- Delivery.com
- Amazon.com
- Microsoft
Current Platforms
Can currently target Android, iOS and Windows
In development to target MacOS, Web, Tizen
Future / Developing Platforms
Compiles this:
React Native Web
<div>
<span>Hello World</span>
</Div>To this:
<View>
<Text>Hello World</Text>
</View>Fundamental changes in the way future engineered teams are designed and organized.
What this means
Single Team => 2 - 5 Platforms
- Organized by technology
- iOS, Android, Web, Desktop teams
- Expensive to build and maintain across platforms
- Inconsistent APIs
- Difficult to test across platforms
- Virtually zero code reuse
- Multiple languages, frameworks, and APIs
Traditional Engineering Teams
- Organized by feature ownership
- Single team working on Mobile, Web, and Desktop
- Much less expensive to build and maintain applications across platforms
- Consistent APIs
- Less context switching
- Large increase in code reuse
- Single or smaller number of languages
- Smaller number of frameworks
- Possible consulting with native developers for complex feature implementations.
- Nodejs backend ++
Engineering Team of the Future
Cross stack engineering is an opportunity that is blossoming with React Native
- James Ide, Engineer at Expo
Team × Technology React Conf 2016
- Faster development time
- Consistent apis
- Can build for Web, Desktop, and Mobile
- Was organized by platform, now by feature
- Consistent user experience across platforms
- Those familiar with native platforms will be especially valuable
- Development is less expensive in terms of time and money
- Cross Stack engineers more valuable, resulting in higher pay
Birth of the Cross Stack Developer
Growing opportunity in this space
Because Native development is becoming more and more expensive, engineers who can deliver applications across platforms and stacks will become extremely valuable and in demand.
Coming to React Native from the web
- Dev environments / IDEs
- Application UI
- Routing
- Styling inconsistencies vs CSS
- Publishing apps to Play and App Store
- Bridging native code (advanced dev)
Main stumbling blocks
Xcode (iOS)
Xcode (iOS)
Coming to React Native from the web
Routing / Navigation
- Different paradigm than web routing
- Navigation flows are hard to reproduce
- Navigation UX is different each platform (managed by some navigation frameworks)
Routing - React
Coming to React Native from the web
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom'
const App = () => (
<Router>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<Switch>
<Route exactly pattern="/" component={Home} />
<Route pattern="/about" component={About} />
<Route pattern="/topics" component={Topics} />
<Route component={NoMatch}/>
</Switch>
</Router>
)
Coming to React Native from the web
Routing / Navigation - Angular 2
const appRoutes: Routes = [
{ path: 'home', component: Home },
]
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
// HTML
<h1>Angular Router</h1>
<nav>
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
</nav>
<router-outlet></router-outlet>Coming to React Native from the web
Routing / Navigation - Vue
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})import React from 'react';
import {
Text,
View,
Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import AboutScreen from './AboutScreen'
class App extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello!!</Text>
<Button
onPress={() => navigate('About')}
title="Chat with Lucy"
/>
</View>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
About: { screen: AboutScreen },
});
export default SimpleAppRouting / Navigation - React-Navigation
Coming to React Native from the web
Navigation - Getting Started
Explore different router Apis, choose one that makes sense to you
- react-navigation - React Native Community
- react-native-navigation - Wix
Coming to React Native from the web
Styling React Native
- Uses JavaScript styling
- Similar api, but not exactly, as css
- Uses Flexbox for layout
- Rely heavily on the documentation, especially at first
Styling React Native
// css
.header {
width: 100%;
background-color: red
}
// html
<div class="header" />Web
// styles variable
styles = {
header: {
width '100%',
backgroundColor: 'red'
}
}
// style
<div style={styles.header} />React
Styling React Native
// styles variable
styles = StyleSheet.create({
header: {
width '100%',
backgroundColor: 'red'
}
})
// style
<View style={styles.header} />React Native
Styling React Native
Reusing styles in React Native vs Web
In web development, we reuse classes:
// css
.button {
background-color: blue;
}
// html
<div>
<button class='button'>Button1</button>
<button class='button'>Button1</button>
<button class='button'>Button1</button>
</div>Styling React Native
Reusing styles in React Native vs Web
In React / React Native, we reuse components:
import React from 'react'
import { View, TouchableHighlight, Text } from 'react-native'
const Button = () => (
<TouchableHighlight style={styles.button}>
<Text style={styles.buttonText}>Hello World</Text>
</TouchableHighlight>
)
class Home extends React.Component {
render () {
return (
<View>
<Button />
<Button />
<Button />
</View>
)
}
}APIs and Built In Components
Coming to React Native from the web
Built In APIs and Components
Coming to React Native from the web
// Images (component)
import { Image } from 'react-native'
<Image
source={require('./img/favicon.png')}
/>
<Image
source={{ uri: 'http://www.myimage.com' }}
/>
// Alert (API)
import { Alert } from 'react-native'
Alert.alert('Alert Title', 'Alert Msg')Browser Polyfills
Coming to React Native from the web
console.{log, warn, error, info, trace, table}
CommonJS require
XMLHttpRequest, fetch
{set, clear} {Timeout, Interval, Immediate}, {request, cancel}
AnimationFrame
navigator.geolocationGet a quick start by using UI Libraries, like bootstrap for the web.
React Native Elements
Get a quick start by using UI Libraries, like bootstrap for the web.
React Native Material Design
Get a quick start by using UI Libraries, like bootstrap for the web.
Shoutem UI
Tips when beginning
React Native
- 99% of work can be accomplished from command line and any text editor
- Rely on third party modules for basic styling and functionality if not 100% certain on implementation
- Reach out to community for questions, a lot of helpful people out there
- Possibly get started with Expo
Getting Started with React Native
Have node installed, then:
npm install -g react-native-cli
react-native init ProjectName
cd ProjectName
react-native run-ios
react-native run-android
Expo - Previously Exponent
Writing an Expo app is like writing a React Native app, except you never need to open Xcode / Android Studio
Entire environment is installed for you, with exception of Simulators
Expo
Expo - Previously Exponent
Getting Started
- Download Expo on Mac or Windows
- Create new project
- Make sure to have iOS or Android simulator installed.
- Run simulator (through exponent)
- Send link to anyone via email or text through expo, bypassing TestFlight
Creating New Project with Expo
Working with New Project in Expo
Working with New Project in Expo
Working with New Project in Expo
create-react-native-app
Expo - Sketch
React Native - Resources
Thanks for having me!
github - twitter - medium
React Native Native App Development for Web Developers Nader Dabit @dabit3 on Twitter & Github