Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Modern Web Applications using React and Redux

Building Modern Web Applications using React and Redux

React and Redux are latest evolution in modern web application development. This talk covers the concepts and set of technologies of modern web application development.

82765b87655e66799efccebc4f95afcf?s=128

Maxime Najim

May 18, 2017
Tweet

Transcript

  1. BUILDING MODERN WEB APPLICATIONS USING REACT & REDUX Maxime Najim

    Thursday, May 18, 2018 WoW Tech Meetup
  2. About Me • Software architect and a full stack web

    developer • Over 12 years experience building large, highly scalable and reliable web applications for companies like Yahoo!, Apple, Netflix, and Walmart • Co-author of the O'Reilly Media book entitled "Building Isomorphic JavaScript Apps” and an upcoming video series: “Universal JavaScript with React, Node, and Redux”. Publications Sr. Software Architect
 Walmart Global eCommerce September 2016 August 2017
  3. Building Modern Web Applications using React & Redux

  4. Building Modern Web Applications using React & Redux

  5. https://www.uber.com/ https://mobile.twitter.com Modern Web Applications

  6. Modern Web Applications

  7. Unified View of the Current State Cart State Filter State

    Button State
  8. Action - Add to Cart

  9. Action - Add to Cart

  10. Action - Add to Cart State 1 State 2 State

    3 State N Action 1 Action 2 Action N
  11. Action - Add to Cart Old State New State Action

  12. The Problem of Modern Web Applications As an application grows

    it becomes harder to determine the overall state of the application and cumbersome to understand where updates are coming from.
  13. The Anatomy of a Client Application Data View Web App

    Events • Data: Server Data and Input • Display: A visual representation of the data • Event Handlers: User interactions
  14. The Anatomy of a Client Application Redux View Web App

    Events • Data: Server Data and Input • Display: A visual representation of the data • Event Handlers: User interactions
  15. The Anatomy of a Client Application Redux React Web App

    Events • Data: Server Data and Input • Display: A visual representation of the data • Event Handlers: User interactions
  16. Building Modern Web Applications using React & Redux

  17. Redux - 
 Basic Flow • Uni-directional data flow •

    Immutable single store • Action object describing what happened. • All state updates are performed by pure functions ref: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9 (state, action) => state
  18. Redux - 
 Basic Flow • An action is dispatched

    (often in response to user interaction). • The root reducer function is called with the current state and the dispatched action. • It then returns the new state. • React app retrieves the updated state and re-renders (state, action) => state Action Event
  19. Redux - 
 Basic Flow • An action is dispatched

    (often in response to user interaction). • The root reducer function is called with the current state and the dispatched action. • It then returns the new state. • React app retrieves the updated state and re-renders (state, action) => state State Action
  20. Redux - 
 Basic Flow • An action is dispatched

    (often in response to user interaction). • The root reducer function is called with the current state and the dispatched action. • It then returns the new state. • View retrieves the updated state and re-renders (state, action) => state State
  21. Redux - 
 Actions

  22. Redux - 
 Reducer

  23. Redux - 
 Store

  24. Local unified copy of distributed data

  25. Redux - 
 Async Flow • Action creator can have

    logic for communicating with backend APIs • Middleware provides third-party extension point that can be added to redux Redux Side Effects
  26. Async Action Creator - API Call actions.js

  27. Redux - 
 Async Flow • An event in the

    UI causes and action created to be invoked
  28. Redux - 
 Async Flow • An event in the

    UI causes and action created to be invoked • A function is returned by the action creator
  29. Redux - 
 Async Flow • An event in the

    UI causes and action created to be invoked • A function is returned by the action creator • Middleware calls the function
  30. Redux - 
 Async Flow • Dispatches a “Request Started”

    action and calls the API.
  31. Redux - 
 Async Flow • Dispatches a “Request Started”

    action and calls the API. • Once a response is returned from the API call.
  32. Redux - 
 Async Flow • Dispatch a “Request Started”

    action and call the API • A response is returned from the API call • Dispatch a “Request Succeeded” action
  33. Redux - 
 Async Flow • Dispatch a “Request Started”

    action and call the API • A response is returned from the API call • Dispatch a “Request Succeeded” action
  34. Building Modern Web Applications using React & Redux

  35. Redux - 
 Async Flow • Dispatch a “Request Started”

    action and call the API • A response is returned from the API call • Dispatch a “Request Succeeded” action
  36. Redux - 
 Async Flow • Dispatch a “Request Started”

    action and call the API • A response is returned from the API call • Dispatch a “Request Succeeded” action
  37. Web Browser Rendering Engine 
 
 (HTML, CSS) Scripting Engine

    (JavaScript) Browser APIs (Document, Window, Navigator)
  38. HTML DOM createElement() client/App.js

  39. Web Browser Rendering Engine 
 
 (HTML, CSS) Scripting Engine

    Browser APIs (Document, Window, Navigator) React.js Components Data Virtual DOM minimal set of
 real DOM 
 mutations
  40. React - Hello World client/App.jsx

  41. React - Hello World client/App.jsx

  42. React - Hello World client/App.jsx

  43. React - Hello World client/index.jsx

  44. React - Smart Greeting (JSX) client/App.jsx

  45. React - Clickable Image client/ClickableImage.jsx

  46. React - Clickable Image client/App.jsx

  47. React - Product Grid client/App.jsx

  48. React - Product Component client/Product.jsx

  49. React - Component Communication App Product Product Picture Product Descrip.

    props props props
  50. React - Product Component client/Product.jsx

  51. Building Modern Web Applications using React & Redux

  52. Redux - 
 Basic Flow • Uni-directional data flow •

    Immutable single store • Action object describing what happened. • All state updates are performed by pure functions store.dispatch() store.subscribe(…)
  53. Container/Presentational Components Presentational Components Container Components Purpose How things look

    
 (markup, styles) How things work 
 (data fetching, state updates) Aware of Redux No Yes To read data Read data from props Subscribe to Redux state To change data Invoke callbacks from props Dispatch Redux actions ref: http://redux.js.org/docs/basics/UsageWithReact.html
  54. Container/Presentational Components index.jsx

  55. Container/Presentational Components ./containers/CounterContainer.jsx

  56. Container/Presentational Components ./components/Counter.jsx

  57. Container/Presentational Components ./components/Counter.jsx

  58. React-Redux: Connect ./containers/CounterContainer.jsx

  59. React-Redux: Provider index.jsx

  60. Building Modern Web Applications using React & Redux

  61. 61 https://nodejs.org/en/download

  62. Hello World with node.js http://www.modulecounts.com/ $ node > console.log('Hello World');

    Hello World Interactive Shell Execute JavaScript file $ echo "console.log('Hello World');" > hello.js $ node hello.js Hello World
  63. npm - module count http://www.modulecounts.com/ NPM is the fasts growing

    and most active public repository
  64. Creating a package.json { "name": "my-app", "version": "0.1.0", "dependencies": {

    … }, "devDependencies": { … }, "scripts": { … } } package.json
  65. Creating a package.json package.json { "name": "my-app", "version": "0.1.0", "dependencies":

    { "express": "^4.15.2", "react": "^15.4.2", "react-dom": “^15.4.2”, "react-redux": "^5.0.2", "react-router": "^3.0.2", "redux": "^3.6.0", "redux-thunk": "^2.2.0" }, "devDependencies": { … }, "scripts": { $ npm install react react-dom … —save Run
  66. Creating a package.json package.json { "name": "my-app", "version": "0.1.0", "dependencies":

    { … }, "devDependencies": { "babel-core": "^6.24.0", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.24.0", "babel-preset-react": "^6.23.0", "webpack": "^2.3.2" }, "scripts": { … } $ npm install babel-core babel-loader
 .. webpack --save-dev Run
  67. Creating a package.json { "name": "my-app", "version": "0.1.0", "dependencies": {

    … }, "devDependencies": { … }, "scripts": { "start": "node server/index.js”, "build": "webpack --config webpack.config.js" } } package.json
  68. node_modules folder App Directory |-client |-node_modules |-package.json |-server |-webpack.config.js

  69. node_modules folder webpack.config.js var config = { entry:"/index.jsx", output: {

    filename: "bundle.js" }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', include: “client”, }] } };
  70. User List/Card Example Home Component User Component URL: /user/1 URL:

    /
  71. DEMO https://github.com/maximenajim/Universal-JavaScript-with-React-Node-and-Redux

  72. Learn More… Thank You @softwarecrafts www.oreilly.com/pub/au/6521 https://github.com/maximenajim