SlideShare a Scribd company logo
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

Knative goes
 beyond serverless | Alexandre Roman
Knative goes
 beyond serverless | Alexandre RomanKnative goes
 beyond serverless | Alexandre Roman
Knative goes
 beyond serverless | Alexandre Roman
KCDItaly
 
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...
VMware Tanzu
 
Containers and Kubernetes
Containers and KubernetesContainers and Kubernetes
Containers and Kubernetes
Nills Franssens
 
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
LibbySchulze
 
Docker Networking with Project Calico
Docker Networking with Project CalicoDocker Networking with Project Calico
Docker Networking with Project Calico
Andrew Kennedy
 
Cloud Native Microservices with Spring Cloud
Cloud Native Microservices with Spring CloudCloud Native Microservices with Spring Cloud
Cloud Native Microservices with Spring Cloud
Conor Svensson
 
利用K8S實現高可靠應用
利用K8S實現高可靠應用利用K8S實現高可靠應用
利用K8S實現高可靠應用
inwin stack
 
网易云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...
Xiaohui Chen
 
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
CodeOps Technologies LLP
 
Securing and Automating Kubernetes with Kyverno
Securing and Automating Kubernetes with KyvernoSecuring and Automating Kubernetes with Kyverno
Securing and Automating Kubernetes with Kyverno
Saim Safder
 
Microservices and Best Practices
Microservices and Best Practices Microservices and Best Practices
Microservices and Best Practices
Weaveworks
 
SRE & Kubernetes
SRE & KubernetesSRE & Kubernetes
SRE & Kubernetes
Afkham Azeez
 
Calico with docker
Calico with dockerCalico with docker
Calico with docker
D.Rajesh Kumar
 
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
Gianluca Arbezzano
 
Kubernetes Security
Kubernetes SecurityKubernetes Security
Kubernetes Security
inovex GmbH
 
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)
Ambassador Labs
 
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
Kublr
 
容器革命的「利」與「必」
容器革命的「利」與「必」 容器革命的「利」與「必」
容器革命的「利」與「必」
inwin stack
 
Spring Cloud Into Production
Spring Cloud Into ProductionSpring Cloud Into Production
Spring Cloud Into Production
Todd Miller
 
Istio
Istio Istio
Istio
Arun prasath
 

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

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...
Brian Pulito
 
WebSockets - Boosting Web Communication - SDC 2011
WebSockets - Boosting Web Communication - SDC 2011WebSockets - Boosting Web Communication - SDC 2011
WebSockets - Boosting Web Communication - SDC 2011
Innotrade GmbH, jWebSocket.org, Alexander Schulze
 
J web socket
J web socketJ web socket
J web socket
Hiroshi Ochi
 
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
Matthew Perrins
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
confluent
 
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
Perfecto by Perforce
 
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
 
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
Mohanadarshan Vivekanandalingam
 
Signal R 2015
Signal R 2015Signal R 2015
Signal R 2015
Mihai Coscodan
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
Muhammad Younis
 
Real-time Communications at Internet Speed
Real-time Communications at Internet SpeedReal-time Communications at Internet Speed
Real-time Communications at Internet Speed
Brian Pulito
 
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)
Steven Willmott
 
Testing IoT Apps with the Cloud
Testing IoT Apps with the CloudTesting IoT Apps with the Cloud
Testing IoT Apps with the Cloud
Josiah Renaudin
 
Wavefront-by-VMware-April-2019
Wavefront-by-VMware-April-2019Wavefront-by-VMware-April-2019
Wavefront-by-VMware-April-2019
Anil Gupta (AJ) - vExpert
 
Decoupled Architecture and WordPress
Decoupled Architecture and WordPressDecoupled Architecture and WordPress
Decoupled Architecture and WordPress
Pantheon
 
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
Brian Pulito
 
Asynchronous Mobile Web Services:
Asynchronous Mobile Web Services: Asynchronous Mobile Web Services:
Asynchronous Mobile Web Services:
Dr. Fahad Aijaz
 
The introduction of nexaweb flatform v4
The introduction of nexaweb flatform v4The introduction of nexaweb flatform v4
The introduction of nexaweb flatform v4
Duc Nguyen
 
ASP.NET MVC 4 Overview
ASP.NET MVC 4 OverviewASP.NET MVC 4 Overview
ASP.NET MVC 4 Overview
Gunnar Peipman
 

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...
 
WebSockets - Boosting Web Communication - SDC 2011
WebSockets - Boosting Web Communication - SDC 2011WebSockets - Boosting Web Communication - SDC 2011
WebSockets - Boosting Web Communication - SDC 2011
 
J web socket
J web socketJ web socket
J web socket
 
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
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
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
 

More from Codemotion

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...
Codemotion
 
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
Codemotion
 
Pastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storiaPastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storia
Codemotion
 
Pennisi - Essere Richard Altwasser
Pennisi - Essere Richard AltwasserPennisi - Essere Richard Altwasser
Pennisi - Essere Richard Altwasser
Codemotion
 
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...
Codemotion
 
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
Codemotion
 
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
Codemotion
 
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 -
Codemotion
 
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...
Codemotion
 
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...
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 ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
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...
Codemotion
 
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
Codemotion
 
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
Codemotion
 
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
Codemotion
 
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...
Codemotion
 
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...
Codemotion
 
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
Codemotion
 
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
Codemotion
 
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
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

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 

Recently uploaded (20)

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 

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