Universal Apps,

using

React.js

Roman Iakobchuk

Let's go back to the
Dawn of the Dinosaurs

  • Visiting some abstract web-site
  • Clicking some abstract link (e.g. menu item)
  • Rest and make some tea

Meanwhile,
under the hood

  • Browser establishing connection with server
  • Sending GET request to server
  • Server processing request, collecting all data 
  • Building HTML
  • Sending this HTML as a response
  • Browser downloading this HTML
  • Then building new DOM
  • And rendering this DOM

Internet
have changed

  • Connection became faster
  • Servers became faster
  • Browsers became faster
  • We've learned how to cache and optimize

But expectations grown as well

every click is a lose of clients for business

SPA vs Classic

  • Match faster
  • Far better UX
  • Unification of mobile and browser UI's
  • Easier to develop
  • Faster initialisation
  • Indexation by search engines
  • Social and other sharing
  • No need in JavaScript

Maybe this way
is better?

SPA vs Classic

  • Match faster
  • Far better UX
  • Unification of mobile and browser UI's
  • Easier to develop
  • Faster initialisation
  • Indexation by search engines
  • Social and other sharing
  • No need in JavaScript

What can we do?

Universal App
=

SPA
+
Server-rendering

How can we do?

('Currently, the set of Ember applications supported is extremely limited')

React

React.renderToString(<App {...initialState} />)

React.render(<App {...initialState} />, container)

React - is not a
SPA framework

  • Data managing
  • API communications
  • Routing

React - is just a View

Infrastructure

frameworks-friendly

React-way

MVVM vs Flux

Cons of the
Facebook Flux

  • Dispatcher is a Singleton
  • Architecture based on side effects
  • Flux is not a framework, it's just a Pub/Sub library

What do we want?

State 

UI 

Pure Function

How can we get this?

  • Flux + data managing(e.g. Backbone)
  • FRP styled Flux
  • ...
  • 100500 other flux-libararies
  • Redux.js

Let's digress

Fairy world of FP

0. Functions - first-class citizens

1. Pure functions

2. Immutable data

Redux is a FRP for Dummies

Classic Event-driven
Architecture

FRP
Architecture

Action-creators

As Pure functions

  • No dispatcher
  • Return Action as a plain object
function increment(amount) {
    return {
        type: INCREMENT,
        data: {amount}
    }
}

Stores => Reducers

As Pure functions

function counter(number = 0, action) {
    const {type, data} = action
    return type == INCREMENT ? number + data.amount : number
}
  • Doesn't save state
  • Doesn't depend on enveironment

Store

As an Immutable object

Current State

Final State

New State

Action

New State

Action

Action

FP -style

function pow(n, p) {
    let i = 0,
        res = 1;
    for (;i < p; i++) {
        res *= n
    }
    return res;
}
function pow(n, p) {
    return p == 0 ? 1 : 
                    n * pow(n, p -1)
}
function pow(n, p, acc = 1) {
    return p == 0 ? acc : 
                    pow(n, p - 1, acc * n)
}

Where side-effects are?

  • API calls
  • Logging
  • Reporting
  • ...

Middleware

Redux flow

Action Creator

Middlewares

Reducers

Store

UI

dispatch

Side-effects

Middleware

  • Centralised side-effects
  • The only difference between
    - client and server,
    - production and development
  • Single Code-base!

Server responsibilities

  • Routing
  • Template rendering
  • API
  • Statistics
  • Services
  • ...

Extra-thick client

Develop great projects

Roman Iakobchuk

http://roma.if.ua

Skype: r.iakobchuk

Email: r.iakobchuk@gmail.com

Universal Apps using React(English)

By Roman Iakobchuk

Made with Slides.com

Universal Apps using React(English)

  • 1,321

More from Roman Iakobchuk