Optimizing the rendering of an object-based web application with deep nesting and many dependencies

The article is devoted to the study of the application of optimization methods for drawing web applications using deeply nested objects. The task of analyzing the user interface, which includes a complex data structure received from the server part, is considered. In this regard, a special data set was formed based on the analysis of many web applications that have a complex front-end architecture system. It is demonstrated how it serves as the main input set of the system. It is shown that the front-end part is developed on the basis of the React library using the following technologies: JavaScript, HTML, CSS, Redux and auxiliary libraries for the correct operation of the system. The application structures and transforms input parameters into a format convenient for use by the system itself. Considering the fact that the system is intended for use only for front-end development, it is justified that the server part of the application is absent. With the help of browser tools, the performance problems of existing systems that use complex data structures to render a web application are investigated. It is proven that the system results in a component that renders an optimized data system with improved performance indicators: speed of rendering, speed of system response to user actions, reduced number of iterations of rendering of interactive elements. Additional functionality includes transformations and structuring of input parameters, as a result, the new data set will have additional parameters and a semantic structure of objects. In the future, it is planned to develop an optimization method and implement it in the form of an independent library, which, if possible, will replace the process of drawing similar data structures.
Стаття присвячена дослідженню застосування методів оптимізації промальовуювання вебзастосунків з використанням об’єктів з глибокою вкладеністю. Розглядається завдання аналізу користувацького інтерфейсу, який містить складну структуру даних, отриману від серверної частини. Дляцього було сформовано спеціальний набір даних на основі аналізу багатьох вебзастосунків, у яких наявна складна система архітектури фронтенд-частини. Продемонстровано, як вона, зі свого боку, слугує основним набором на вхід системи. Показано, що фронтенд-частина розроблена на основі бібліотеки React з використанням таких технологій: JavaScript, HTML, CSS, Redux та допоміжних бібліотек для коректної роботи системи. Додаток структурує та трансформує вхідні параметри у формат, зручний для використання самою системою. З огляду на те, що система орієнтована на використання лише для фронтенд-розробки, обґрунтовано, що серверна частина додатка відсутня. За допомогою браузерних інструментів досліджено проблеми продуктивності існуючих систем, які використовують складні структури даних для промалювання вебдодатка. Доведено, що результатом роботи системи є компонент, який відмальовує оптимізовану систему даних, що має покращені показники продуктивності: швидкість відмалювання, швидкість реакції системи на користувацькі дії, зменшена кількість ітерацій промальовування інтерактивних елементів. Додатковий функціонал містить трансформації і структуризацію вхідних параметрів, унаслідок чого новий набір даних буде мати додаткові параметри та семантичну структуру об’єктів. Надалі планується розробка методу оптимізації і впровадження її у вигляді незалежної бібліотеки, яка, за можливості, замінить процес відмалювання схожих структур даних.