JOSA TechTalks - Better Web Apps with React and Redux
8 likes409 views
The document discusses the implementation of web applications using React and Redux, highlighting React's capabilities as a UI library for creating interactive and reusable components. It outlines the necessary tools for a modern React project, such as Babel and Webpack, and explains the importance of state management in scaling applications with Redux. Key concepts include unidirectional data flow and the handling of state consistency, scalability, and correctness in responsive web applications.
JOSA TechTalks - Better Web Apps with React and Redux
- 1. Better Web Apps with React & Redux
- 2. Improve your web apps with React Ali Al-Sa’o
- 3. About Me Ali Hussein Al-Sa’o Senior Front End Engineer @MBC group 10+ years in web development alsao ali-sao ali_sao
- 4. What is React React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React. One of it's unique selling points is that not only does it perform on the client side, but it can also be rendered server side (Isomorphic). It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.
- 5. What does it need to make it work and why A typical modern React project needs the following to run productively and successfully Babel : babel is a javascript transpiler that converts code from one syntax to another. Mainly responsible for converting JSX and ES6 into valid ES5 all browsers can understand Webpack : A javascript bundler and task runner. You can uglify your code, deploy to live server , import assets as modules , lint and test your code , compile css preprocessors and tons of other tasks.
- 6. What special about React Let’s try to clone Facebook messenger using my React And your old fatty jQuery
- 7. React is all about components With React we can build reusable components that would allow us to share code all over our project
- 8. Components have data containers Components can receive data via props. Components has inner state object. Data flow is unidirectional. Data containers are separating concern.
- 10. Components have Lifecycle Hooks Do something at a certain lifecycle time Mounting hooks : • componentWillMount() • render() • componentDidMount() Updating hooks : • componentDidUpdate() Unmounting • componentWillUnmount()
- 11. What about this
- 12. Really , what about this? React will do the magic for you With jQuery you have to re-render the whole list
- 13. Virtual DOM VS DOM manipulation
- 14. How VDOM works
- 15. React is Functional Do one single thing at a time without side effects
- 16. React is super easy to debug Thanks to React developer tools
- 17. React unit testing is heaven Declarative = Predictable
- 18. React is Universal write once, run anywhere. React Native React VR
- 19. One more thing… يرجعها القداحه سرق اللي
- 20. Questions?
- 21. Scaling React Apps With Redux Omar Abdelhafith
- 22. About Me Omar Abdelhafith Staff Software Engineer @Zendesk iOS/Android and Backend nsomar nsomar @ifnottrue http://nsomar.com
- 24. Recap…
- 25. Recap…
- 26. Recap…
- 28. Structure - State App Component Messages Component Chat Component Header Component Body Component Controls Component Messages Selected Main State Text Field State
- 29. Structure - State App Component Messages Component Chat Component Header Component Body Component Controls Component Messages State Chat State Text Field StateBody State Header State Singleton Other Singleton
- 32. We gonna talk about 3 issues
- 37. Adding more components Adding GifChooser and UserInfo - App.js state grows - App.js action handling grows
- 39. Updating the state Chat Web App User Typing Uploading Images Web Sockets Messages Web Sockets Status and updates Async Http requests MQTT Searching Gifs Searching Gifs
- 40. Updating the state - Real-life applications receive many events - These events change the state - Leads to incorrect UI updates
- 41. Example Message Received Message Updated Message Deleted
- 42. Example - Off Order Message Received Message Updated Message Deleted
- 43. Example Correct Order Of Event Incorrect Order Of Event
- 47. Facebook tired to solve these issues
- 50. Unidirectional architectures Two popular architectures - Flux - Redux
- 52. We will focus on Redux
- 53. Redux
- 54. Redux - Flow
- 55. Redux - Connect
- 60. Scalability? Solved by connecting multiple views to a single reducer! Works for Actions and State
- 63. Redux - Action
- 66. Redux - Reducer
- 67. Redux
- 68. Redux - Reducer
- 69. Redux - Reducer
- 70. Redux
- 72. Consistence? - State is only changed when actions are dispatched - Only the Reducer changes the state - All connected views are notified
- 75. Correctness? - Only the Reducer changes the state - The Reduce function CANNOT be called twice
- 78. Almost done!
- 79. 2 More things First Redux focuses on developer tooling and happiness
- 82. 2 More things Second Are you a Mobile Developer (iOS/Android)?
- 83. 2 More things Second Are you a Mobile Developer (iOS/Android)? We Got you covered!!
- 84. Suas
- 85. Suas also makes developers happy
- 89. To Sum Up React: State controls the view Redux: State controls the app
- 90. Questions?
- 91. Thanks