Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grokking TechTalk #16: React stack at lozi

515 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Grokking TechTalk #16: React stack at lozi

  1. 1. React stack @Lozi lozi.vn
  2. 2. The front-end heaven - New libraries everyday - Project gets old after a few months - You quickly become old-fashioned man/woman 2
  3. 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. 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. 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. 6. 1. Isomorphic App 6 Server-side Client-side The kind-of Isomorphic React App
  7. 7. 1. Isomorphic App 7 Source: https://reactjsnews.com/isomorphic-react-in-real-life Concept Real life
  8. 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. 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. 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. 11. 2. Trinity Force: React-React Router-Redux 11 Source: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
  12. 12. 3. Self-aware Component? 12 Repeating this all the time
  13. 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. 14. 3. Self-aware Component The base class injects code into the overridden method from the subclass, to do additional tasks. 14
  15. 15. 3. Self-aware Component The base class injects code into the overridden method from the subclass, to do additional tasks. 15
  16. 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. 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. 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

×