Rethinking Web AppWith React.JS and Flux

Rethinking Web AppWith React.JS and Flux

Rethinking Web AppWith React.JS and Flux

JIRAT KIJLERDPORNPAILOJ

NET

n3tr

Software Engineer - iOS, Javascript, Python

Web

17mDaily PV

App

14mDaily PV

Why a new web app?

Platform Maturity + Mobile FirstWhy a new web app?

Monolithic(WEB)

WEBBROWSER DATABASE

WEB

API

BROWSER

MOBILE APP

DATABASE

WEB

API

BROWSER

MOBILE APP

DATABASE

WEB

API

BROWSER

MOBILE APPDATABASE

! Direct connection

! Caching

! Caching

- Expensive works!!- Template- Large data transfer

!

- Cheap and fast!!- JSON Response- Small data transfer

!

SERVER

API

CLIENT

MOBILE APP

DATABASE

FrontendPlatform

Let’s see

How Web App Works

Sever Rendered Web App

PAGE SERVER DATABASEGET

HTML

• Pros• SEO Friendly• User perceive page load performance• Easy to develop and maintain

• Cons• Lack of User experience• Reload page on every next request

Sever Rendered Web App

Ajax Era

PAGESERVER DATABASE

AJAX

eg. contact form, load more, etc.

GET

JSON

Server Rendered + Ajax

• Pros• SEO (still) Friendly• Better Load Performance• Better UX

• Cons• Hard to develop and maintain

• Different in server-client script language

Single Page Web App (Fat Client)

PAGESERVER DATABASE

FAT JSFAT JS

GET

Single Page App (SPA)

• Pros• Best for User Experience• Maintenance (one or two languages)

• Cons• Load performance• Lack of SEO

SEO vs UX ?

SEO vs UX ?We need both

Wait - There is still hope

Hybrid Rendered Web

Hybrid Rendered

SERVERPAGE

2. HTML Content + FAT JS

1. GET

4. JS LOADED AND RERENDER

3. LOADING JS

(User see content)

Hybrid Rendered

SERVER

2. HTML Content + FAT JS

1. GET

4. JS LOADED AND RERENDER

3. LOADING JS

(User see content)

APP

ServerNode.js

PHPRuby

Python Go

JavaEtc

ClientJavascript

ServerNode.js

PHPRuby

Python Go

JavaEtc

ClientJavascript

PHP

Javascript

@foreach ($users as $user)

<p>This is user {{ $user->id }}</p>

@endforeach

{{#each users}}

<p>{{id}}</p>

{{/each}}

Template

PHP

Javascript

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "example.com");

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($ch);

curl_close($ch);

request

.get('example.com')

.end(function(err, res){

});

Networking

Isomorphic Web Application

Javascript code that can be shared between envoriments

Why Isomorphic web app

- One launguage to rule them all (Javascript)- Reduce duplicated code and Increase reusable.- Server Rendered == SEO- Client Rendered == UX

Here comes IsomorhicClient

View

Utils

Router

Model

Server

View

Utils

Router

Model

Here comes IsomorhicClient

Utils

Model

Server

Router

ViewSome cannot be share

- Persistent

What are our options?

- Rendr.js- Angular.js- React.js

Angular.js

Angular.jsNot support server-side rendering

ReactSay hello to...

V in MVCnot a framework

React.js- Developed by Facebook- Designed for Isomorphic rendering

- Works on the server and the client with on simple API- Virtual DOM diff implementation for ultra-high performance- Component-based

- Reusable & Composable- When you scale, just build more modular components

- Testable (support Unit Tests)

React.js Component- Composable and Reusable- Data pass-in from Parent component called props- Data owned by component itself called state- Re-render whole component when state or props changed!!

var HelloComponent = React.createClass({

getInitialState: function(){

name: 'Net'

},

render: function() {

return <p>Hello, {this.state.name}</p>;

}

});

What it look like?

// <p>Hello, Net</p>

Render your component

React.render(<HelloComponent />, document.getElementById('example'));

var html = React.renderToString(<HelloComponent />);

// "<p>Hello, Net</p>"

Client

Server

Let’s build React - TodoAppTodoApp

TodoTextField

TodoList

TodoListItem

TodoListItem

TodoListItem

1. TodoApp2. TodoTextField3. TodoList4. TodoListItem

Demo

MVC

MVC is hard to Scale on webWhy?

Got a new message or friend go offline, what’s happen?

Remember TodoList

“We want History panel in TodoApp”

Okay, Let’s do it

onSubmitTodo: function(todo){

addTodo(todo);

}

Okay, Let’s do it

onSubmitTodo: function(todo){

addTodo(todo);

addHistory(todo); // Easy, Right?

}

What if we need more?

onSubmitTodo: function(todo){

addTodo(todo);

addHistory(todo); // Easy, Right?

}

What if we need more?

onSubmitTodo: function(todo){

addTodo(todo);

addHistory(todo);

doSomething(todo);

}

What if we need more? and more?

onSubmitTodo: function(todo){

addTodo(todo);

addHistory(todo);

doSomething(todo);

doMore(todo);

}

What if we need more? and more? ...

onSubmitTodo: function(todo){

addTodo(todo);

addHistory(todo);

doSomething(todo);

doMore(todo);

andMore(todo);

}

3 months later

We do not need History anymore, let’s remove it

3 months laterWe do not need History anymore, let’s remove it

FluxLet’s it

Flux & You- Developed by Facebook- Unidirectional Data Flow- Flux is Software Architecture not a framework or even Library

View

View

Store

Add Change Listener

View

Store

Dispatcher

Add Change Listener

Register for Event

View

Store

Dispatcher

Real-time update Form InputInitial Data

Add Change Listener

Register for Event

View

Store

Dispatcher

Real-time update Form InputInitial Data

Add Change Listener

Register for Event Dispatch

View

Store

Dispatcher

Real-time update Form InputInitial Data

Add Change Listener

Register for Event Dispatch

Emit

TodoView

HistoryView

TodoStore

TodoTextField

TodoList

TodoHistoryList

CREATE_TODOAction

HistoryStore

Dispatch

Dispatch

Flux TodoList and History Demo

No time to explain

Yahoo’s flux implement - support client and serverhttps://github.com/yahoo/fluxible

Fluxible

AirBnB’s Flux implement - support both server and renderhttps://github.com/goatslacker/alt

Alt.js

Ajax with less suckhttps://github.com/visionmedia/superagent

Superagent

Forget about it - a lot of better tool out there

jQuery

Module bundle - Grunt/Gulp replacementhttp://webpack.github.io/

Webpack

One more thing

Frontend Engineer

HTML + CSS + Javascript

HTML + CSS + Javascript

https://github.com/n3tr/TPSE-react-demo

Demo Code

https://github.com/n3tr/isomorphic-weather

Fluxible Example (Server+Client rendered)

http://www.slideshare.net/spikebrehm/building-isomorphic-apps-jsconfasia-2014

Isomophic

Hacker Way: Rethinking Web App Development at Facebook

https://www.youtube.com/watch?v=nYkdrAPrdcw

Flux over MVC

Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 2013

https://www.youtube.com/watch?v=DgVS-zXgMTk

This is show why they create React

OSCON 2014: How Instagram.com Works; Pete Hunt

https://www.youtube.com/watch?v=VkTCL6Nqm6Y

Why Webpack is Rocks!!