Building Modern Web Applications using React and Redux

Slide 1

Slide 1 text

BUILDING MODERN WEB APPLICATIONS USING REACT & REDUX Maxime Najim Thursday, May 18, 2018 WoW Tech Meetup

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Building Modern Web Applications using React & Redux

Slide 4

Slide 4 text

Building Modern Web Applications using React & Redux

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Modern Web Applications

Slide 7

Slide 7 text

Unified View of the Current State Cart State Filter State Button State

Slide 8

Slide 8 text

Action - Add to Cart

Slide 9

Slide 9 text

Action - Add to Cart

Slide 10

Slide 10 text

Action - Add to Cart State 1 State 2 State 3 State N Action 1 Action 2 Action N

Slide 11

Slide 11 text

Action - Add to Cart Old State New State Action

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Building Modern Web Applications using React & Redux

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Redux -   Actions

Slide 22

Slide 22 text

Redux -   Reducer

Slide 23

Slide 23 text

Redux -   Store

Slide 24

Slide 24 text

Local unified copy of distributed data

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Async Action Creator - API Call actions.js

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Building Modern Web Applications using React & Redux

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Web Browser Rendering Engine     (HTML, CSS) Scripting Engine (JavaScript) Browser APIs (Document, Window, Navigator)

Slide 38

Slide 38 text

HTML DOM createElement() client/App.js

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

React - Hello World client/App.jsx

Slide 41

Slide 41 text

React - Hello World client/App.jsx

Slide 42

Slide 42 text

React - Hello World client/App.jsx

Slide 43

Slide 43 text

React - Hello World client/index.jsx

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

React - Clickable Image client/ClickableImage.jsx

Slide 46

Slide 46 text

React - Clickable Image client/App.jsx

Slide 47

Slide 47 text

React - Product Grid client/App.jsx

Slide 48

Slide 48 text

React - Product Component client/Product.jsx

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

React - Product Component client/Product.jsx

Slide 51

Slide 51 text

Building Modern Web Applications using React & Redux

Slide 52

Slide 52 text

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(…)

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Container/Presentational Components index.jsx

Slide 55

Slide 55 text

Container/Presentational Components ./containers/CounterContainer.jsx

Slide 56

Slide 56 text

Container/Presentational Components ./components/Counter.jsx

Slide 57

Slide 57 text

Container/Presentational Components ./components/Counter.jsx

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

React-Redux: Provider index.jsx

Slide 60

Slide 60 text

Building Modern Web Applications using React & Redux

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

npm - module count http://www.modulecounts.com/ NPM is the fasts growing and most active public repository

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Slide 69

Slide 69 text

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”, }] } };

Slide 70

Slide 70 text

User List/Card Example Home Component User Component URL: /user/1 URL: /

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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