Embed Size (px)
Citation preview
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!!
