A reactive and scalable full stack architecture for live push updates

The interest in Real time web technologies increased a lot during last years with the spread of live trading, IoT data visualization, live betting, real time monitoring and other applications where instantaneous updates of clients are required, in few hundred of milliseconds without having to check periodically a specific source for changes. The proposed architecture links together React/Redux, WebSocket, AWS IoT, AWS Lambda, S3 and CloudFront CDN to provide a fast, full scalable and elastic real time web application. Including server side rendering to speed up initial Single Page Application loading. One of the more interesting component of the architecture is a Redux middleware, managing the connection with the message broker using a decoupled client (based on lightweight MQTT protocol over WebSocket), dealing with data consistency between application state and remote data source, thanks to a simple actions flow that allows original REST API to be reused for initial data fetching. The application state is normalized (appearing like a “relational database”) to exploit Redux connected component together with new React v16 reconciliation algorithm and pure components in order to efficiently re-render the parts of the UI that really have to be changed as soon as updated data come, improving general user experience and performances. AWS services are used to implement the infrastructure building blocks, resulting on a full Serverless approach. An S3 bucket stores static content resulting from React build, and acts as a data source for CloudFront distribution network, so files are served as quickly as possible. An AWS Lambda function is also directly connected as a source of CloudFront, to serve initial requests (for non-static content), thanks to the out-of-the-box server side rendering available in React, significantly improving the initial loading time. The implementation use case is a complete rewrite of a live betting dashboard, that originally simulated “real time behaviour” using polling, every 3 seconds. Everything developed exploiting an automated workflow of Continuous Integration and Continuous Delivery in order to create a high quality product. Also from update publisher side the architecture is decoupled, thanks to a Lambda function exposing an endpoint to POST new data that will be delivered to clients passing through the IoT broker. Then it can be easily plugged in an already existing context without a big effort.

Architettura scalabile e reattiva per aggiornamenti push. L’interesse nel Real Time web è dovuto alla diffusione sempre maggiore degli ultimi anni di applicazioni come il live trading, visualizzazione di dati per l’Internet of Things, scommesse live, monitoring Real Time e altre applicazioni in cui sono richiesti aggiornamenti istantanei, nell’arco di pochi centinaia di millisecondi, evitando di dover controllare periodicamente una sorgente dati. L’architettura proposta utilizza React e Redux, WebsSocket, AWS IoT, AWS Lambda, S3 e la CloudFront CDN per un’applicazione web Real Time totalmente scalabile ed elastica. Il server side rendering è applicato per ridurre il tempo di caricamento della Single Page Application. Uno dei componenti più interessanti dell’architettura è un Redux middleware che gestisce la connessione con il broker di messaggi utilizzando un client disaccoppiato (mediante protocollo MQTT su WebSocket), e si occupa della consistenza dei dati tra il client e la sorgente remota, grazie ad un semplice flusso di azioni che permette il riutilizzo delle REST API utilizzate per il polling per il fetch dei dati iniziali. La rappresentazione dello stato dell’applicazione è “normalizzata” (quasi come fosse un database relazionale) per sfruttare al massimo i componenti connessi allo stato tramite Redux, il nuovo algoritmo di identificazione degli aggiornamenti introdotto nella versione 16 di React e i pure components per rirenderizzare efficacemente solo le parti dell’interfaccia che devono effettivamente essere aggiornate non appena si ricevono aggiornamenti, migliorando le performance e conseguentemente l’esperienza utente. I servizi AWS sono usati per implementare gli elementi che compongono l’architettura. Il risultato è un sistema completamente Serverless. Un bucket S3 contiene il contenuto statico della SPA, risultato della build del codice per il front end. Questo è connesso come sorgente di dati alla CloudFront distribution network, in modo tale da servire i files agli utenti con la minor latenza possibile e nel modo più veloce. Anche una AWS Lambda agisce da source alla CDN per le richieste iniziali; grazie al server side rendering disponibile in React è possibile migliorare il caricamento iniziale dell’applicazione. Il caso d’uso implementativo riguarda una dashboard di scommesse live, che nell’implementazione precedente usava il polling per simulare il comportamento “real time”, interrogando periodicamente la sorgente ogni 3 secondi. Durante lo sviluppo sono stati utilizzati approcci di Continuous Integration e Continous Delivery per poter migliorare la qualità del codice prodotto e il risultato finale. Un publisher (implementato tramite AWS Lambda) viene introdotto come componente sia per disaccoppiare l’architettura dalla sorgente dei dati, sia per avere un punto di ingresso nel flusso in fase di test, questo espone una semplice REST API per pubblicare aggiornamenti che vengono poi direttamente passati al broker di messaggi. I componenti di disaccoppiamento introdotti permettono di proporre un’architettura facilmente integrabile in sistemi già preesistenti.