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

More Related Content

What's hot

What's hot (20)

Knative goes
 beyond serverless | Alexandre Roman
Knative goes
 beyond serverless | Alexandre RomanKnative goes
 beyond serverless | Alexandre Roman
Knative goes
 beyond serverless | Alexandre Roman
 
Communication Amongst Microservices: Kubernetes, Istio, and Spring Cloud - An...
Communication Amongst Microservices: Kubernetes, Istio, and Spring Cloud - An...Communication Amongst Microservices: Kubernetes, Istio, and Spring Cloud - An...
Communication Amongst Microservices: Kubernetes, Istio, and Spring Cloud - An...
 
Containers and Kubernetes
Containers and KubernetesContainers and Kubernetes
Containers and Kubernetes
 
Breaking tradition the future of package management with kubernetes
Breaking tradition   the future of package management with kubernetesBreaking tradition   the future of package management with kubernetes
Breaking tradition the future of package management with kubernetes
 
Docker Networking with Project Calico
Docker Networking with Project CalicoDocker Networking with Project Calico
Docker Networking with Project Calico
 
Cloud Native Microservices with Spring Cloud
Cloud Native Microservices with Spring CloudCloud Native Microservices with Spring Cloud
Cloud Native Microservices with Spring Cloud
 
利用K8S實現高可靠應用
利用K8S實現高可靠應用利用K8S實現高可靠應用
利用K8S實現高可靠應用
 
网易云K8S应用实践 | practices for kubernetes cluster provisioning, management and ap...
网易云K8S应用实践 | practices for kubernetes cluster provisioning, management and ap...网易云K8S应用实践 | practices for kubernetes cluster provisioning, management and ap...
网易云K8S应用实践 | practices for kubernetes cluster provisioning, management and ap...
 
KUBERNETES AS A FRAMEWORK FOR WRITING DEVOPS & MICROSERVICES TOOLING
KUBERNETES AS A FRAMEWORK FOR WRITING DEVOPS & MICROSERVICES TOOLINGKUBERNETES AS A FRAMEWORK FOR WRITING DEVOPS & MICROSERVICES TOOLING
KUBERNETES AS A FRAMEWORK FOR WRITING DEVOPS & MICROSERVICES TOOLING
 
Securing and Automating Kubernetes with Kyverno
Securing and Automating Kubernetes with KyvernoSecuring and Automating Kubernetes with Kyverno
Securing and Automating Kubernetes with Kyverno
 
Microservices and Best Practices
Microservices and Best Practices Microservices and Best Practices
Microservices and Best Practices
 
SRE & Kubernetes
SRE & KubernetesSRE & Kubernetes
SRE & Kubernetes
 
Calico with docker
Calico with dockerCalico with docker
Calico with docker
 
Security Tips to run Docker in Production
Security Tips to run Docker in ProductionSecurity Tips to run Docker in Production
Security Tips to run Docker in Production
 
Kubernetes Security
Kubernetes SecurityKubernetes Security
Kubernetes Security
 
KubeCon NA 2017: Ambassador and Envoy (Envoy Salon)
KubeCon NA 2017: Ambassador and Envoy (Envoy Salon)KubeCon NA 2017: Ambassador and Envoy (Envoy Salon)
KubeCon NA 2017: Ambassador and Envoy (Envoy Salon)
 
How to Run Kubernetes in Restrictive Environments
How to Run Kubernetes in Restrictive EnvironmentsHow to Run Kubernetes in Restrictive Environments
How to Run Kubernetes in Restrictive Environments
 
容器革命的「利」與「必」
容器革命的「利」與「必」 容器革命的「利」與「必」
容器革命的「利」與「必」
 
Spring Cloud Into Production
Spring Cloud Into ProductionSpring Cloud Into Production
Spring Cloud Into Production
 
Istio
Istio Istio
Istio
 

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

A Brief Note On Asp.Net And Cloud Computing Essay
A Brief Note On Asp.Net And Cloud Computing EssayA Brief Note On Asp.Net And Cloud Computing Essay
A Brief Note On Asp.Net And Cloud Computing Essay
Lanate Drummond
 
CMPE282_009994036_PROJECT_REPORT
CMPE282_009994036_PROJECT_REPORTCMPE282_009994036_PROJECT_REPORT
CMPE282_009994036_PROJECT_REPORT
Sandyarathi Das
 
Asynchronous Mobile Web Services:
Asynchronous Mobile Web Services: Asynchronous Mobile Web Services:
Asynchronous Mobile Web Services:
Dr. Fahad Aijaz
 

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

Wading through the mobile WebRTC developer gauntlet (IIT RTC Conference sessi...
Wading through the mobile WebRTC developer gauntlet (IIT RTC Conference sessi...Wading through the mobile WebRTC developer gauntlet (IIT RTC Conference sessi...
Wading through the mobile WebRTC developer gauntlet (IIT RTC Conference sessi...
 
J web socket
J web socketJ web socket
J web socket
 
WebSockets - Boosting Web Communication - SDC 2011
WebSockets - Boosting Web Communication - SDC 2011WebSockets - Boosting Web Communication - SDC 2011
WebSockets - Boosting Web Communication - SDC 2011
 
4163A - What is Web 2.0.ppt
4163A - What is Web 2.0.ppt4163A - What is Web 2.0.ppt
4163A - What is Web 2.0.ppt
 
Make the Shift from Manual to Automation with Open Source
Make the Shift from Manual to Automation with Open SourceMake the Shift from Manual to Automation with Open Source
Make the Shift from Manual to Automation with Open Source
 
A Brief Note On Asp.Net And Cloud Computing Essay
A Brief Note On Asp.Net And Cloud Computing EssayA Brief Note On Asp.Net And Cloud Computing Essay
A Brief Note On Asp.Net And Cloud Computing Essay
 
CMPE282_009994036_PROJECT_REPORT
CMPE282_009994036_PROJECT_REPORTCMPE282_009994036_PROJECT_REPORT
CMPE282_009994036_PROJECT_REPORT
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
Signal R 2015
Signal R 2015Signal R 2015
Signal R 2015
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
 
Real-time Communications at Internet Speed
Real-time Communications at Internet SpeedReal-time Communications at Internet Speed
Real-time Communications at Internet Speed
 
Web APIs - Infrastructure for the (Intelligent) Programmable Web (R&D Talk)
Web APIs - Infrastructure for the (Intelligent) Programmable Web (R&D Talk)Web APIs - Infrastructure for the (Intelligent) Programmable Web (R&D Talk)
Web APIs - Infrastructure for the (Intelligent) Programmable Web (R&D Talk)
 
Testing IoT Apps with the Cloud
Testing IoT Apps with the CloudTesting IoT Apps with the Cloud
Testing IoT Apps with the Cloud
 
Wavefront-by-VMware-April-2019
Wavefront-by-VMware-April-2019Wavefront-by-VMware-April-2019
Wavefront-by-VMware-April-2019
 
Decoupled Architecture and WordPress
Decoupled Architecture and WordPressDecoupled Architecture and WordPress
Decoupled Architecture and WordPress
 
WebSphere Liberty Rtcomm: WebRTC Middleware for the Enterprise
WebSphere Liberty Rtcomm: WebRTC Middleware for the EnterpriseWebSphere Liberty Rtcomm: WebRTC Middleware for the Enterprise
WebSphere Liberty Rtcomm: WebRTC Middleware for the Enterprise
 
Asynchronous Mobile Web Services:
Asynchronous Mobile Web Services: Asynchronous Mobile Web Services:
Asynchronous Mobile Web Services:
 
The introduction of nexaweb flatform v4
The introduction of nexaweb flatform v4The introduction of nexaweb flatform v4
The introduction of nexaweb flatform v4
 
ASP.NET MVC 4 Overview
ASP.NET MVC 4 OverviewASP.NET MVC 4 Overview
ASP.NET MVC 4 Overview
 
The Three Stages of Cloud Adoption - RightScale Compute 2013
The Three Stages of Cloud Adoption - RightScale Compute 2013The Three Stages of Cloud Adoption - RightScale Compute 2013
The Three Stages of Cloud Adoption - RightScale Compute 2013
 

More from Codemotion

More from Codemotion (20)

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
 
Pompili - From hero to_zero: The FatalNoise neverending story
Pompili - From hero to_zero: The FatalNoise neverending storyPompili - From hero to_zero: The FatalNoise neverending story
Pompili - From hero to_zero: The FatalNoise neverending story
 
Pastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storiaPastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storia
 
Pennisi - Essere Richard Altwasser
Pennisi - Essere Richard AltwasserPennisi - Essere Richard Altwasser
Pennisi - Essere Richard Altwasser
 
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
 
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
 
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
 
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Francesco Baldassarri  - Deliver Data at Scale - Codemotion Amsterdam 2019 - Francesco Baldassarri  - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
 
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
 
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
 
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
 
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
 
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
 
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
 
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
 
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
 
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
 
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
 
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
 
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
 

Recently uploaded

Recently uploaded (20)

Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 

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

  • 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 … Polling Long Polling HTTP Streaming
  • 8. Real-Time Web - Technologies 8 PROPRIETARY STANDARD … and technologies …
  • 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. Use Case - Ajax Polling 10 customer infrastructure client 1 client 2 web service
  • 11. Use Case - WebSocket 11 customer infrastructure server client 1 client 2 websocketweb service
  • 12. Use Case - WebSocket 12 customer infrastructure server client 1 client 2 websocketweb service postman
  • 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.
  • 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. Flux Data in a Flux application flows in a single direction Client Side - Flux 17 Dispatcher StoreView ActionWeb API
  • 19. Use Case - The number of clients can change anytime 19 server customer infrastructure server client 1 client 2 client 3 websocketweb service postman ? ? ?
  • 21. KEY BENEFITS document-based rich querying schema less quick deploy built-in replication MongoDB 21
  • 22. Use Case - WebSocket & Ajax Polling 22 web service server web service customer infrastructure server client 1 client 2 client 3 websocket postman
  • 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