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

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

Cda625b443cb7261a67f6dafc043439c?s=128

Marco Montalbano

December 05, 2017
Tweet

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