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

Nowadays, applications need to be more and more dynamic, interactive and fast, so much so as to allow content and information to be updated in real time.

During this talk, we will see a real example of how to create such a production-ready application, based on a use-case answering this need for interactivity and usability, and using some of the most known technologies the market has to offer, such as React, Flux, WebSocket and MongoDB.

Source code: https://github.com/SopraIt/codemotion-milan-2017

Transcript

1. 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
2. Stefano Sala Web Developer stefano.sala@soprasteria.com Marco Montalbano Web Developer marco.montalbano@soprasteria.com $ whoarewe Matteo Colombo Speroni Web Developer matteo.colombo@soprasteria.com 2
3. Use Case - Requirements 3 integrate with an existing system
4. 4 notify multiple distributed clients Use Case - Requirements
5. Use Case - Requirements 5 the number of clients can change anytime
6. 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.”
7. Real-Time Web - Practices 7 … a network web using practices …
8. Real-Time Web - Practices 7 … a network web using practices … Polling Long Polling HTTP Streaming
9. Real-Time Web - Technologies 8 PROPRIETARY … and technologies …
10. Real-Time Web - Technologies 8 PROPRIETARY STANDARD … and technologies …
11. 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
12. Use Case - Ajax Polling 10 customer infrastructure
13. Use Case - Ajax Polling 10 customer infrastructure client 1 client 2
14. Use Case - Ajax Polling 10 customer infrastructure client 1 client 2 web service
15. Use Case - Ajax Polling 10 customer infrastructure client 1 client 2 web service
16. Use Case - WebSocket 11 customer infrastructure server client 1 client 2
17. Use Case - WebSocket 11 customer infrastructure server client 1 client 2 websocket web service
18. Use Case - WebSocket 12 customer infrastructure server client 1 client 2 websocket web service postman
19. Demo 13
20. Server Side? 14 A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale.
21. 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.
22. Client Side? 15
23. Client Side - React 16 React A JavaScript library for building user interfaces
24. Client Side - React 16 React A JavaScript library for building user interfaces JUST COMPONENTS reusable composable maintainable testable
25. Client Side - React 16 React A JavaScript library for building user interfaces JUST COMPONENTS reusable composable maintainable testable WITHOUT controllers directives templates models
26. Flux Data in a Flux application flows in a single direction Client Side - Flux 17
27. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 View
28. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 View Action
29. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher View Action
30. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher Store View Action
31. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher Store View Action
32. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher Store View Action Web API
33. Demo 18
34. Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 websocket web service postman ? ?
35. Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 client 3 websocket web service postman ? ? ?
36. Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 client 3 web service postman ? ? ?
37. Persistence - Which One? 20
38. KEY BENEFITS document-based rich querying schema less quick deploy built-in replication MongoDB 21
39. Use Case - WebSocket & Ajax Polling 22 web service server customer infrastructure server client 1 client 2 websocket postman
40. Use Case - WebSocket & Ajax Polling 22 web service server customer infrastructure server client 1 client 2 websocket postman
41. Use Case - WebSocket & Ajax Polling 22 web service server web service customer infrastructure server client 1 client 2 websocket postman
42. Use Case - WebSocket & Ajax Polling 22 web service server web service customer infrastructure server client 1 client 2 client 3 websocket postman
43. Demo 23
44. 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
45. Any Question? 25
46. Thank You 26