This is a research project with the intention to explore, implement and test various possibilities to bring real-time functionalities to a web application. It is discussed how an event driven approach can be used to achieve this goal and what needs to be considered. The results are showcased in a practical kanban board example. The report and the demonstrations are available on GitLab (https://gitlab.fhnw.ch/p6-christen-gobeli).
Event based, real-time, live, JavaScript, HTML, CSS
The main goal is to acquire knowledge about real-time synchronization for web applications and to apply the accumulated knowledge in practice. This should result in a deeper understanding of the challenges, their implications and ideas for possible solutions. The results should be showcased in a practical example.
Today, most web applications display their state based on one point in time because the client-server communication is tratitionally based on the request-response pattern, making it difficult to receive unrequested messages. In practice, the user often has to manually reload the website to access the latest data.
It turns out that it is possible to bypass the limitations of receiving messages without an explicit request by using polling, streaming techniques or by switching to the WebSocket protocol. Yet the challenge takes on a new dimension when the goal is to provide real-time capabilities where the unit of edit is small, such as a single keystroke instead of a complete form submission. It pushes typical architectures that maintain state on a server to its limits, as the latency of a server round-trip can lead to a bad user experience. To overcome these problems, the state must be managed locally on each client instead of on a single server. This eliminates the need to validate the changes on a central instance, providing speed advantages and even offline support. However, this results in different copies of equally valid states, and to eventually achieve convergence, these states must be synchronized with each other and potential conflicts must be resolved. In this project an event-driven approach is used to solve the problems of real-time synchronization. Along the way, we discovered its advantages, its limitations and the usability trade-offs that need to be considered.
Prof. Dierk König
dierk.koenig@fhnw.ch
Fachhochschule Nordwestschweiz
FHNW Campus Brugg-Windisch
Bahnhofstrasse 6
5210 Windisch
www.fhnw.ch
