Embed Size (px)
Citation preview
React stack @Lozi
lozi.vn
The front-end heaven- New libraries everyday
- Project gets old after a few months
- You quickly become old-fashioned man/woman
2
The front-end heaven- New libraries everyday
- Project gets old after a few months
- You quickly become old-fashioned man/woman=> https://uptodate.frontendrescue.org/
3
React stack @Lozi1. Isomorphic App2. Trinity Force: React, React Router &
Redux3. Self-aware Component
4
by Thinh Nguyen Cuong - [email protected] Developer at Lozi.vn
1. Isomorphic App
5
"Isomorphism is the functional aspect of seamlessly switching between client- and server-side rendering without losing state."
Source: https://reactjsnews.com/isomorphic-react-in-real-life
Concept
"Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments." @ghengeveld on
Medium
1. Isomorphic App
6
Server-side Client-side
The kind-of Isomorphic React App
1. Isomorphic App
7
Source: https://reactjsnews.com/isomorphic-react-in-real-life
Concept Real life
8
Flummox: Nice and friendly and do-whatever-you-want Flux
⇒ Anti-pattern: “Cannot dispatch in a middle of a dispatch” a.k.a. Hard to make side effects
⇒ Hard to debug: data comes from nowhere
⇒ Took a lot of time to get on with the project, then to add new features ...
Life at Lozi before web v3.0
2. Trinity Force: React-React Router-Redux
9
React & React Router: API changes on each release, which
encourages you to build a new app, rather than upgrade the old one
2. Trinity Force: React-React Router-Redux
10
TONS OF DAMAGE!!
React & React Router: API changes on each release, which
encourages you to build a new app, rather than upgrade the old one
Redux: Keeps you on the right track!
⇒ Completely “predictable”
⇒ Hot reloading & Time travel with Redux Devtool
⇒ Flummox’s creator (@acdlite) recommends Redux
2. Trinity Force: React-React Router-Redux
11
Source: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
3. Self-aware Component?
12
Repeating this all the time
3. Self-aware Component?
A component that:
- Is a base component to be extended
- Can check if it has data in store
- Can fetch data from api on its own
- Decide to render itself, based on data status in store
13
3. Self-aware Component
The base class injects code into the overridden method from the subclass, to do additional tasks.
14
3. Self-aware Component
The base class injects code into the overridden method from the subclass, to do additional tasks.
15
3. Self-aware Component
The base class injects code into the overridden method from the subclass, to do additional tasks.
16The same with componentDidUpdate()
3. Self-aware Component
Self-aware Component required props:
- actionCreator(): Redux’s action object, API is fetched here
- dataGetter(): used in Redux’s connect() to get the specific data from the store
- params: used as params for actionCreator & dataGetter
17
3. Self-aware Component
But first, the component needs to be wrapped by Redux’s connect() so it can access the data.
18
A custom mapStateToProps() will execute dataGetter() to get the data for the component
