Grokking TechTalk #16: React stack at lozi
- 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