Downloaded 22 times
Uploaded byJordan Open Source Association
JOSA TechTalks - Better Web Apps with React and Redux
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 Appswith React & Redux
- 2. Improve your webapps with React Ali Al-Sa’o
- 3. About Me Ali HusseinAl-Sa’o Senior Front End Engineer @MBC group 10+ years in web development alsao ali-sao ali_sao
- 4. What is React Reactis 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 itneed 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 aboutReact Let’s try to clone Facebook messenger using my React And your old fatty jQuery
- 7. React is allabout components With React we can build reusable components that would allow us to share code all over our project
- 8. Components have data containers Componentscan receive data via props. Components has inner state object. Data flow is unidirectional. Data containers are separating concern.
- 9.
- 10. Components have Lifecycle Hooks Dosomething at a certain lifecycle time Mounting hooks : • componentWillMount() • render() • componentDidMount() Updating hooks : • componentDidUpdate() Unmounting • componentWillUnmount()
- 11.
- 12. Really , whatabout this? React will do the magic for you With jQuery you have to re-render the whole list
- 13. Virtual DOM VSDOM manipulation
- 14.
- 15. React is Functional Doone single thing at a time without side effects
- 16. React is supereasy to debug Thanks to React developer tools
- 17. React unit testingis heaven Declarative = Predictable
- 18. React is Universal writeonce, run anywhere. React Native React VR
- 19. One more thing… يرجعهاالقداحه سرق اللي
- 20.
- 21. Scaling React AppsWith Redux Omar Abdelhafith
- 22. About Me Omar Abdelhafith StaffSoftware Engineer @Zendesk iOS/Android and Backend nsomar nsomar @ifnottrue http://nsomar.com
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Structure - State App Component Messages Component Chat Component Header Component Body Component Controls Component MessagesState Chat State Text Field StateBody State Header State Singleton Other Singleton
- 30.
- 31.
- 32. We gonna talkabout 3 issues
- 33.
- 34.
- 35.
- 36.
- 37. Adding more components AddingGifChooser and UserInfo - App.js state grows - App.js action handling grows
- 38.
- 39. Updating the state Chat WebApp 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.
- 42. Example - OffOrder Message Received Message Updated Message Deleted
- 43. Example Correct Order OfEvent Incorrect Order Of Event
- 44.
- 45.
- 46.
- 47. Facebook tired tosolve these issues
- 48.
- 50. Unidirectional architectures Two populararchitectures - Flux - Redux
- 51.
- 52. We will focuson Redux
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. Scalability? Solved by connectingmultiple views to a single reducer! Works for Actions and State
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72. Consistence? - State isonly changed when actions are dispatched - Only the Reducer changes the state - All connected views are notified
- 73.
- 74.
- 75. Correctness? - Only theReducer changes the state - The Reduce function CANNOT be called twice
- 76.
- 77.
- 78.
- 79. 2 More things First Reduxfocuses on developer tooling and happiness
- 80.
- 81.
- 82. 2 More things Second Areyou a Mobile Developer (iOS/Android)?
- 83. 2 More things Second Areyou a Mobile Developer (iOS/Android)? We Got you covered!!
- 84.
- 85.
- 88.
- 89. To Sum Up React:State controls the view Redux: State controls the app
- 90.
- 91.