tpse thailand 2015 - rethinking web with react and flux
TRANSCRIPT
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!!