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?
- Prerender using some cloud service
- Prerender using PhantomJS
- Make you App Universal
Universal App
=
SPA
+
Server-rendering
How can we do?
- Self-made solution
- Angular/universal
-
Ember FastBoot
- React - by design!
('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
- React-router
- Flux
- Redux
- ...
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
Skype: r.iakobchuk
Email: r.iakobchuk@gmail.com
Universal Apps using React(English)
By Roman Iakobchuk
Universal Apps using React(English)
- 1,322