Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM
In today’s digital landscape, web applications have become an integral part of everyday life, enabling seamless access to information, services, and user interaction. Most modern applications are centered around the dynamic relationship between data and the user interface, which creates significant...
Saved in:
| Main Authors: | , |
|---|---|
| Format: | Article |
| Language: | English |
| Published: |
Zhytomyr Polytechnic State University
2025-07-01
|
| Series: | Технічна інженерія |
| Subjects: | |
| Online Access: | https://ten.ztu.edu.ua/article/view/334968 |
| Tags: |
Add Tag
No Tags, Be the first to tag this record!
|
| _version_ | 1850075607629561856 |
|---|---|
| author | M.V. Havatiuk I.O. Saiapina |
| author_facet | M.V. Havatiuk I.O. Saiapina |
| author_sort | M.V. Havatiuk |
| collection | DOAJ |
| description | In today’s digital landscape, web applications have become an integral part of everyday life, enabling seamless access to information, services, and user interaction. Most modern applications are centered around the dynamic relationship between data and the user interface, which creates significant demands for efficiency in data processing and real-time interface updates. One of the key challenges lies in ensuring rapid, precise, and performance-optimized user interface rendering, especially in systems with frequently changing states. This article focuses on the development and implementation of an efficient update mechanism for graphical user interfaces, aimed at reducing computational overhead while maintaining interactivity and responsiveness. The proposed solution combines three core concepts: reactive programming, which allows automatic propagation of changes through the interface; virtual DOM, which minimizes direct manipulations with the real DOM and accelerates rendering; and a custom state management system designed to handle all application data updates in a centralized and consistent manner. Current practices for DOM manipulation are reviewed, including traditional direct updates and commonly used state managers such as Redux and Vuex. While these approaches are widely adopted, they can introduce unnecessary complexity and overhead in managing application state.
This article introduces a refined method for selective updating only those components of the interface whose state has actually changed. By integrating the strengths of the aforementioned technologies, the method significantly enhances performance, reduces browser load, and improves interface responsiveness even in complex application logic scenarios. Special attention is given to the architectural structure of the solution, the mechanisms for detecting changes, and the evaluation of dependencies between state and UI components.
The article concludes with a comparative analysis of the proposed approach against traditional solutions, demonstrating its effectiveness in real-world usage. Additionally, it outlines the method’s scalability, potential for integration into existing front-end frameworks, and prospects for further development in response to growing performance demands in modern web technologies. |
| format | Article |
| id | doaj-art-4d073d69637e4929a64b637d9b5ce431 |
| institution | DOAJ |
| issn | 2706-5847 2707-9619 |
| language | English |
| publishDate | 2025-07-01 |
| publisher | Zhytomyr Polytechnic State University |
| record_format | Article |
| series | Технічна інженерія |
| spelling | doaj-art-4d073d69637e4929a64b637d9b5ce4312025-08-20T02:46:16ZengZhytomyr Polytechnic State UniversityТехнічна інженерія2706-58472707-96192025-07-01951259265doi.org/10.26642/ten-2025-1(95)-259-265Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOMM.V. Havatiuk0https://orcid.org/0009-0009-4596-7235I.O. Saiapina1https://orcid.org/0000-0003-1541-1681National Technical University of Ukraine "Kyiv Polytechnic Institute named after Igor Sikorsky", UkraineNational Technical University of Ukraine "Kyiv Polytechnic Institute named after Igor Sikorsky", UkraineIn today’s digital landscape, web applications have become an integral part of everyday life, enabling seamless access to information, services, and user interaction. Most modern applications are centered around the dynamic relationship between data and the user interface, which creates significant demands for efficiency in data processing and real-time interface updates. One of the key challenges lies in ensuring rapid, precise, and performance-optimized user interface rendering, especially in systems with frequently changing states. This article focuses on the development and implementation of an efficient update mechanism for graphical user interfaces, aimed at reducing computational overhead while maintaining interactivity and responsiveness. The proposed solution combines three core concepts: reactive programming, which allows automatic propagation of changes through the interface; virtual DOM, which minimizes direct manipulations with the real DOM and accelerates rendering; and a custom state management system designed to handle all application data updates in a centralized and consistent manner. Current practices for DOM manipulation are reviewed, including traditional direct updates and commonly used state managers such as Redux and Vuex. While these approaches are widely adopted, they can introduce unnecessary complexity and overhead in managing application state. This article introduces a refined method for selective updating only those components of the interface whose state has actually changed. By integrating the strengths of the aforementioned technologies, the method significantly enhances performance, reduces browser load, and improves interface responsiveness even in complex application logic scenarios. Special attention is given to the architectural structure of the solution, the mechanisms for detecting changes, and the evaluation of dependencies between state and UI components. The article concludes with a comparative analysis of the proposed approach against traditional solutions, demonstrating its effectiveness in real-world usage. Additionally, it outlines the method’s scalability, potential for integration into existing front-end frameworks, and prospects for further development in response to growing performance demands in modern web technologies.https://ten.ztu.edu.ua/article/view/334968interface optimizationvirtual domreactive programmingrendering performancestate management systemweb development |
| spellingShingle | M.V. Havatiuk I.O. Saiapina Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM Технічна інженерія interface optimization virtual dom reactive programming rendering performance state management system web development |
| title | Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM |
| title_full | Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM |
| title_fullStr | Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM |
| title_full_unstemmed | Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM |
| title_short | Improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual DOM |
| title_sort | improved method of targeted user interface updates for enhancing the efficiency of web applications based on reactive streams and virtual dom |
| topic | interface optimization virtual dom reactive programming rendering performance state management system web development |
| url | https://ten.ztu.edu.ua/article/view/334968 |
| work_keys_str_mv | AT mvhavatiuk improvedmethodoftargeteduserinterfaceupdatesforenhancingtheefficiencyofwebapplicationsbasedonreactivestreamsandvirtualdom AT iosaiapina improvedmethodoftargeteduserinterfaceupdatesforenhancingtheefficiencyofwebapplicationsbasedonreactivestreamsandvirtualdom |