grokking techtalk #16: react stack at lozi

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 - cuongthinh@lozi.vnWeb 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