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