React in browser, mobile and server

Opi Danihelka & Michal Sänger

Motivation

How to make interactive websites?

1. server render

  • slow, bad user experience

2. jQuery

  • solves only simple problems
  • modifies DOM => slow re-render

3. React

  • solution for complex problems
  • fast re-render
  • usecase Facebook.com

React.js

JavaScript library for building User Interfaces

React.js

  • 2013, by Facebook, open source
  • library not a framework
  • for interactive UI and SPA
  • The V in MVC

 

  • React will solve only rendering of UI for you

React.js

  • Components not templates
  • composition, reusable
  • one way data flow
  • props
  • model in state, not in DOM
  • principles of functional programming

React.js

  • Components not templates
  • composition, reusable
  • props
  • model in state, not in DOM
class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

JSX

React.js

  • Virtual DOM
  • re-render not mutate
  • super fast rendering

React.js

  • for interactive UI and SPA

 

  • facebook.com
  • instagram.com

 

  • seznam.cz
  • airbank.cz

Redux

Predictable state container for JavaScript apps

Redux

Redux

  • single global store of data (=model)
  • one way data flow
  • event based
  • components are dispatching actions, redux listens those actions and produce new state (=> immutable state)
  • time travel, great debugging

React on server

  • JavaScript on server - Node.js
  • server side rendering
  • SEO
  • faster initial load

 

  • Next.js (2.0)
  • SPA, prefetch

React Native

  • React on mobile
  • Feb 2015, by Facebook, open source
  • framework, communicates with native components
  • cross platform (Android/iOS)

Native

React Native

<div> -> <View>
<span> -> <Text>
<img> -> <Image>

  • no browser, no DOM, no HTML

Native

  • access to the device native functions (Bluetooth, camera, gyro, GPS...)

React Native

  • Write once run anywhere
  • Learn once write anywhere

 

  • shared business logic
  • Redux

 

  • truly native app distributed over Apple Store, Google Play

 

  • examples: Airbnb, Instagram, Uber

Native

Full-Stack JavaScript

Full-Stack JavaScript

Native

One team

  • one team, three platforms
  • React, React Native, Node.js