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
Ad

More Related Content

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
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
 
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
 
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
 

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...
Brian Pulito
 
J web socket
J web socketJ web socket
J web socket
Hiroshi Ochi
 
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
 
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
 
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
 
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
 
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
 
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
 
Ad

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...
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
 
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
 
Ad

Recently uploaded (20)

Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdfAre Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Telecoms Supermarket
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Vaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without HallucinationsVaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without Hallucinations
john409870
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Web and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in RajpuraWeb and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in Rajpura
Erginous Technology
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)
Ortus Solutions, Corp
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdfAre Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Telecoms Supermarket
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Vaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without HallucinationsVaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without Hallucinations
john409870
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Web and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in RajpuraWeb and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in Rajpura
Erginous Technology
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)
Ortus Solutions, Corp
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 

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 [email protected] Marco Montalbano Web Developer [email protected] $ whoarewe Matteo Colombo Speroni Web Developer [email protected] 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