React Native
native mobile apps with JavaScript
René Viering
Frontend Developer
working for @micromata
http://rene.js.org
http://github.com/revrng
@rvrng
Native
or
web technologies?
NATIVE
- flexibility
- native performance
- newest APIs
- user experience
- learning curve for each platform
- increased development affort
- multiple code-bases
Web-View
Cordova
- use of well-known web-technologies
- access native APIs via plugins
- cross-platform
- look and feel
- performance
- gestures / touch-handling
- platform-specific representation
Web-View
React Native
React
- a JavaScript library for creating UIs
- everything is a component
- one-way data-flow
- virtual DOM
React
COMPONENTS...
var ArticlesOverview = React.createClass({
getInitialState() {...},
componentDidMount() {...},
render: function() {
return (
<div>
<h1>Articles</h1>
<ArticleFilter />
<ShoppingCart />
<ArticleList articles={this.props.articles} />
</div>
);
}
});
f(data) => view
Virtual DOM
<Component data="foo">
<SubComponent/>
</Component>
<!DOCTYPE html>
<html>
<head>
<title>Awesome Page</title>
</head>
<body>
<h1>Hello!</h1>
<p>lorem ipsum...</p>
</body>
</html>
Virtual DOM
Component
the real DOM
diff
render
calculate
f(data) => view
React
React Native
<Component data="foo">
<SubComponent/>
</Component>
<Component data="foo">
<SubComponent/>
</Component>
Virtual DOM
React
React Native
<Component data="foo">
<SubComponent/>
</Component>
<Component data="foo">
<SubComponent/>
</Component>
Virtual DOM
Virtual »UI-Kit«
one-way data-flow
React concepts...
»LEARN ONCE, WRITE ANYWHERE«
React Native »the big picture«
JavaScriptCore
React Native »the big picture«
Background-Thread
Main-Thread
- runs your JS (Bundle)
- renders the real UI
Virtual »DOM«
aka UI-KIT
React Native »the big picture«
Dev-Server
- Live-Reload
- Hot-Reload
- Bundling
Debugging
ES6
Flexbox
$ brew install node
$ brew install watchman
$ npm install -g react-native-cli
$ react-native init AwesomeProject
Example App
Thanks to:
https://newsapi.org/
ArticleList (MainComponent)
Header
ArticleListView
ArticleListViewItem
Text
Image
DEMO TIME!
The end
React Native
By René Viering
React Native
- 2,105