Speaker: Thinh Nguyen - Web Developer @ Lozi.vn Bio: I don't know what I've done, but people keep blaming me when they can't access the website ¯\_(ツ)_/¯ Description: How we build Lozi website with React and a team of 2

1. React stack
@Lozi
lozi.vn

2. The front-end heaven
- New libraries everyday
- Project gets old after a few months
- You quickly become old-fashioned man/woman
2

3. 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

4. React stack @Lozi
1. Isomorphic App
2. Trinity Force: React, React Router & Redux
3. Self-aware Component
4
by Thinh Nguyen Cuong - cuongthinh@lozi.vn
Web Developer at Lozi.vn

5. 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

6. 1. Isomorphic App
6
Server-side Client-side
The kind-of Isomorphic React App

7. 1. Isomorphic App
7
Source: https://reactjsnews.com/isomorphic-react-in-real-life
Concept Real life

8. 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

9. 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

10. 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

11. 2. Trinity Force: React-React Router-Redux
11
Source: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production

12. 3. Self-aware Component?
12
Repeating this all the time

13. 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

14. 3. Self-aware Component
The base class injects code into the overridden method from the subclass, to do additional tasks.
14

15. 3. Self-aware Component
The base class injects code into the overridden method from the subclass, to do additional tasks.
15

16. 3. Self-aware Component
The base class injects code into the overridden method from the subclass, to do additional tasks.
16
The same with componentDidUpdate()

17. 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

18. 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