Combining React and Websocket to build real time web application: a case study

Slide 1

Slide 1 text

Combining React and WebSocket to build a real time web application: a case study Marco Montalbano Matteo Colombo Speroni Stefano Sala CODEMOTION MILAN - SPECIAL EDITION 10 – 11 NOVEMBER 2017

Slide 2

Slide 2 text

Stefano Sala Web Developer [email protected] Marco Montalbano Web Developer [email protected] $ whoarewe Matteo Colombo Speroni Web Developer [email protected] 2

Slide 3

Slide 3 text

Use Case - Requirements 3 integrate with an existing system

Slide 4

Slide 4 text

4 notify multiple distributed clients Use Case - Requirements

Slide 5

Slide 5 text

Use Case - Requirements 5 the number of clients can change anytime

Slide 6

Slide 6 text

Real-Time Web - Definition 6 “The real-time web is a network web using practices and technologies that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.”

Slide 7

Slide 7 text

Real-Time Web - Practices 7 … a network web using practices …

Slide 8

Slide 8 text

Real-Time Web - Practices 7 … a network web using practices … Polling Long Polling HTTP Streaming

Slide 9

Slide 9 text

Real-Time Web - Technologies 8 PROPRIETARY … and technologies …

Slide 10

Slide 10 text

Real-Time Web - Technologies 8 PROPRIETARY STANDARD … and technologies …

Slide 11

Slide 11 text

KEY BENEFITS Standard Protocol (IETF) Single persistent bidirectional connection Use HTTP for connection establishment Native support into HTML5 Standards Low server workload Real-Time Web - WebSocket 9

Slide 12

Slide 12 text

Use Case - Ajax Polling 10 customer infrastructure

Slide 13

Slide 13 text

Use Case - Ajax Polling 10 customer infrastructure client 1 client 2

Slide 14

Slide 14 text

Use Case - Ajax Polling 10 customer infrastructure client 1 client 2 web service

Slide 15

Slide 15 text

Use Case - Ajax Polling 10 customer infrastructure client 1 client 2 web service

Slide 16

Slide 16 text

Use Case - WebSocket 11 customer infrastructure server client 1 client 2

Slide 17

Slide 17 text

Use Case - WebSocket 11 customer infrastructure server client 1 client 2 websocket web service

Slide 18

Slide 18 text

Use Case - WebSocket 12 customer infrastructure server client 1 client 2 websocket web service postman

Slide 19

Slide 19 text

Demo 13

Slide 20

Slide 20 text

Server Side? 14 A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale.

Slide 21

Slide 21 text

Server Side? 14 A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale. WS is a Node.js WebSocket library, simple to use, blazing fast and thoroughly tested WebSocket client and server.

Slide 22

Slide 22 text

Client Side? 15

Slide 23

Slide 23 text

Client Side - React 16 React A JavaScript library for building user interfaces

Slide 24

Slide 24 text

Client Side - React 16 React A JavaScript library for building user interfaces JUST COMPONENTS reusable composable maintainable testable

Slide 25

Slide 25 text

Client Side - React 16 React A JavaScript library for building user interfaces JUST COMPONENTS reusable composable maintainable testable WITHOUT controllers directives templates models

Slide 26

Slide 26 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17

Slide 27

Slide 27 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17 View

Slide 28

Slide 28 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17 View Action

Slide 29

Slide 29 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher View Action

Slide 30

Slide 30 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher Store View Action

Slide 31

Slide 31 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher Store View Action

Slide 32

Slide 32 text

Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher Store View Action Web API

Slide 33

Slide 33 text

Demo 18

Slide 34

Slide 34 text

Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 websocket web service postman ? ?

Slide 35

Slide 35 text

Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 client 3 websocket web service postman ? ? ?

Slide 36

Slide 36 text

Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 client 3 web service postman ? ? ?

Slide 37

Slide 37 text

Persistence - Which One? 20

Slide 38

Slide 38 text

KEY BENEFITS document-based rich querying schema less quick deploy built-in replication MongoDB 21

Slide 39

Slide 39 text

Use Case - WebSocket & Ajax Polling 22 web service server customer infrastructure server client 1 client 2 websocket postman

Slide 40

Slide 40 text

Use Case - WebSocket & Ajax Polling 22 web service server customer infrastructure server client 1 client 2 websocket postman

Slide 41

Slide 41 text

Use Case - WebSocket & Ajax Polling 22 web service server web service customer infrastructure server client 1 client 2 websocket postman

Slide 42

Slide 42 text

Use Case - WebSocket & Ajax Polling 22 web service server web service customer infrastructure server client 1 client 2 client 3 websocket postman

Slide 43

Slide 43 text

Demo 23

Slide 44

Slide 44 text

Useful Links 24 REAL-TIME - https://www.codeproject.com/articles/531698/introduction-to-html-websocket - http://www.html5italia.com/script/68/Comunicazione-Bidirezionale-WebSockets-HTML5.aspx - https://www.sitepoint.com/real-time-apps-websockets-server-sent-events/ REACT - https://reactjs.org/ FLUX - https://github.com/facebook/flux - https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture - http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/ MONGODB - https://docs.mongodb.com/manual/introduction/ - https://docs.mongodb.com/manual/replication/ SOURCE CODE - https://github.com/SopraIt/codemotion-milan-2017