Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

M.Montalbano/M.Colombo Speroni/S.Sala - Combining React and Websocket to build real time web application: a case study - Codemotion milan 2017

260 views

Published on

Sempre più spesso è presente l'esigenza di costruire applicativi dinamici, interattivi e veloci al punto tale da risultare istantanei e in grado di permettere la fruizione di informazioni aggiornate in tempo reale. Durante il talk vedremo un esempio concreto di come sia possibile creare un’applicazione production ready, basata su uno use-case che rispetti queste esigenze e sfruttando alcune delle principali tecnologie offerte dal mercato come React, Flux, WebSocket e MongoDB.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

M.Montalbano/M.Colombo Speroni/S.Sala - Combining React and Websocket to build real time web application: a case study - Codemotion milan 2017

  1. 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. 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. 3. Use Case - Requirements 3 integrate with an existing system
  4. 4. 4 notify multiple distributed clients Use Case - Requirements
  5. 5. Use Case - Requirements 5 the number of clients can change anytime
  6. 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. 7. Real-Time Web - Practices 7 … a network web using practices … Polling Long Polling HTTP Streaming
  8. 8. Real-Time Web - Technologies 8 PROPRIETARY STANDARD … and technologies …
  9. 9. 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
  10. 10. Use Case - Ajax Polling 10 customer infrastructure client 1 client 2 web service
  11. 11. Use Case - WebSocket 11 customer infrastructure server client 1 client 2 websocketweb service
  12. 12. Use Case - WebSocket 12 customer infrastructure server client 1 client 2 websocketweb service postman
  13. 13. Demo 13
  14. 14. 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.
  15. 15. Client Side? 15
  16. 16. Client Side - React 16 React A JavaScript library for building user interfaces JUST COMPONENTS reusable composable maintainable testable WITHOUT controllers directives templates models
  17. 17. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher StoreView ActionWeb API
  18. 18. Demo 18
  19. 19. Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 client 3 websocketweb service postman ? ? ?
  20. 20. Persistence - Which One? 20
  21. 21. KEY BENEFITS document-based rich querying schema less quick deploy built-in replication MongoDB 21
  22. 22. Use Case - WebSocket & Ajax Polling 22 web service server web service customer infrastructure server client 1 client 2 client 3 websocket postman
  23. 23. Demo 23
  24. 24. 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
  25. 25. Any Question? 25
  26. 26. Thank You 26

×