Spravování stavu ve webových aplikacích SPA s více klienty

Abstract

Tato práce se zabývá správou stavu webových Single Page Aplikací (SPA) a jeho synchronizací na více klientech. V posledních letech rostoucí složitost webových aplikací vedla k vytvoření nových systémů a návrhových vzorů, které se zabývají správou stavu. Přesto nejsou koncepty správy stavu příliš známé a nabídka existujících řešení může být nepřehledná. Tato práce popisuje koncepty správy stavu a synchronizace dat v reálném čase. Součástí práce je analýza současných řešení a technik, zejména návrhového vzoru Redux a jeho implementace v podobě knihovny NgRx a také protokolu WebSocket a jeho využití v knihovně SignalR. V této práci je navržen design systému pro správu stavu webové aplikace se synchronizací v reálném čase s využitím návrhového vzoru Redux a knihovny SignalR. Jedná se o aplikaci podobnou aplikaci Google Drawings. Aby bylo možné demonstrovat nové koncepty a možnosti takového systému, byla podle navrženého designu vytvořena ukázková implementace ve formě prototypu.

The subject of this thesis is state management of web Single Page Applications (SPA) and its synchronization on multiple clients. In recent years the increasing complexity of modern web applications lead to the creation of new systems and design patterns, that deals with state management. However, concepts of state management are not yet widely known, and a wide range of existing solutions can be confusing. This thesis describes the concepts of state management and real-time data synchronization. The thesis contains a review of current solutions and techniques. The main focus is Redux design pattern with its implementation NgRx, as well as WebSocket protocol and its use in the SignalR library. In this thesis design of a state management system with real-time synchronization for web application similar to Google Drawings using Redux design pattern and SignalR library is proposed. To demonstrate new concepts and capability of such system proof of concept implementation based on the proposed design was created.