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

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

13. Demo
13

14. Server Side?
14
A Node.js web service framework optimized for building
semantically correct RESTful web services ready for
production use at scale.
WS is a Node.js WebSocket library, simple to use, blazing
fast and thoroughly tested WebSocket client and server.

15. Client Side?
15

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

18. Demo
18

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

20. Persistence - Which One?
20

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

23. Demo
23

24. Useful Links
24
REAL-TIME
- https://www.codeproject.com/articles/531698/introduction-to-html-websocket
- http://www.html5italia.com/script/68/Comunicazione-Bidirezionale-WebSockets-HTML5.aspx
- https://www.sitepoint.com/real-time-apps-websockets-server-sent-events/
REACT
- https://reactjs.org/
FLUX
- https://github.com/facebook/flux
- https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
- http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/
MONGODB
- https://docs.mongodb.com/manual/introduction/
- https://docs.mongodb.com/manual/replication/
SOURCE CODE
- https://github.com/SopraIt/codemotion-milan-2017

25. Any Question?
25

26. Thank You
26