Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Combining React and Websocket to build real tim...

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

Marco Montalbano

December 05, 2017
Tweet

More Decks by Marco Montalbano

Other Decks in Technology

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. 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.”
  3. Real-Time Web - Practices 7 … a network web using

    practices … Polling Long Polling HTTP Streaming
  4. 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
  5. Server Side? 14 A Node.js web service framework optimized for

    building semantically correct RESTful web services ready for production use at scale.
  6. 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.
  7. Client Side - React 16 React A JavaScript library for

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

    building user interfaces JUST COMPONENTS reusable composable maintainable testable WITHOUT controllers directives templates models
  9. Flux Data in a Flux application flows in a single

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

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

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

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

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

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

    direction Client Side - Flux 17 Dispatcher Store View Action Web API
  16. Use Case - The number of clients can change anytime

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

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

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

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

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

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

    server web service customer infrastructure server client 1 client 2 client 3 websocket postman
  23. 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