СРАВНЕНИЕ ПОДХОДОВ К РЕАКТИВНОСТИ В СОВРЕМЕННЫХ ВЕБ-ФРЕЙМВОРКАХ

COMPARISON OF REACTIVITY APPROACHES IN MODERN WEB-FRAMEWORKS

Eldar Yarulin

student, Department of System Modeling and Automated Design, Moscow Aviation Institute,

Russia, Moscow

АННОТАЦИЯ

Современные веб-приложения развиваются с упором на интерактивность, адаптивность и отзывчивость, поскольку пользователи ожидают, что интерфейс будет не просто отображать данные, а динамично изменяться и подстраиваться под их действия в реальном времени. Желание совместить плавный опыт использования веб-сайтов и декларативный подход к программированию привело к появлению идеи реактивности.

Целью фреймворков стало взятие на себя основной вычислительной работы — от управления состоянием до оптимизации рендеринга — чтобы разработчики могли сосредоточиться на логике и дизайне приложения. Это позволяет снизить трудозатраты на рутинные задачи, связанные с обновлением интерфейса и обработкой данных. Фреймворки стремятся эффективно распределять ресурсы и минимизировать количество изменений, необходимых для синхронизации данных с отображением, что улучшает производительность и отзывчивость приложения. В конечном итоге, такие инструменты упрощают создание сложных, интерактивных интерфейсов, которые остаются быстрыми и интуитивными даже при работе с большими объёмами данных.

ABSTRACT

Modern web applications are evolving with a focus on interactivity, adaptability, and responsiveness, as users increasingly expect interfaces not only to display data but to dynamically update and adapt in real-time to their actions. The desire to merge a smooth user experience with a declarative approach to programming led to the emergence of reactivity.

The aim of frameworks has become to shoulder the bulk of computational tasks—from state management to rendering optimization—allowing developers to focus on the application’s logic and design. This approach reduces the workload associated with routine tasks, like interface updates and data handling. Frameworks strive to efficiently allocate resources and minimize the amount of changes required to keep data in sync with the display, improving both application performance and responsiveness. Ultimately, these tools make it easier to build complex, interactive interfaces that remain fast and intuitive, even when working with large volumes of data.

Ключевые слова: программирование, frontend, web-разработка, javascript, виртуальное дерево, реактивность, оптимизация приложения.

Keywords: programming, frontend, web-development, javascript, virtual tree, reactivity, app optimization.

Введение

Реактивность — это подход к программированию, при котором система автоматически реагирует на изменения состояния и обновляет интерфейс в реальном времени. В контексте веб-разработки это означает, что при изменении данных или состояния интерфейс пользователя обновляется автоматически, без необходимости ручного обновления страницы.

Основное предназначение реактивности заключается в минимизации усилий разработчика по отслеживанию и обновлению данных в интерфейсе. Например, если пользователь заполняет форму, и в зависимости от введенной информации необходимо отмечать неверные поля, то за счет реактивности программа перерисует неправильные поля только тогда, когда они пройдут проверку на невалидность.

Реактивность в современных фреймворках

Одной из основных концепций, связанных с реактивностью, является виртуальное дерево, или виртуальный DOM. Данное дерево представляет собой оптимизированную структуру реального DOM, которая используется для упрощения и ускорения операций с интерфейсом. Вместо непосредственных изменений в DOM, которые могут быть ресурсоёмкими, фреймворки создают работают в первую очередь с виртуальным деревом.

Самые популярные фреймворки веб-разработки (React, Vue и Angular) реализуют реактивность и работу с виртуальным деревом по-своему, предоставляя разные уровни контроля над состоянием, синхронизацией и производительностью.

Подходы к реактивности в React

React использует подход с явным управлением состоянием компонентов. В основе лежит работа с состоянием через функции обновления (setState в классических компонентах и хуки, такие как useState и useEffect, в функциональных компонентах).

• Хуки и состояния: React предлагает хуки для работы с состоянием (useState) и для контроля побочных эффектов (useEffect). Эти хуки позволяют управлять данными внутри компонентов, но разработчик сам должен вызвать обновление при изменении данных.
• Механизм diffing: React создает виртуальное дерево при каждом изменении состояния компонента, сравнивает его с предыдущим состоянием и обновляет только изменившиеся элементы. Благодаря этому достигается эффективное управление изменениями без непосредственных операций с DOM.
• Ограничение рендеринга: чтобы ограничить ненужные рендеры, React предлагает механизмы оптимизации, такие как React.memo и useMemo, которые предотвращают лишние вызовы рендеров, что улучшает производительность приложения.

Реактивность во Vue

Vue использует концепцию «наблюдения» (observing), которая автоматически отслеживает изменения и обновляет интерфейс. Основная часть работы по отслеживанию изменений происходит при декларации реактивных переменных, и, в отличие от React, от разработчика не требуется явного вызова реактивных функций.

• Реактивные свойства: Vue предоставляет такие функции, как ref и reactive, для создания реактивных данных. Эти данные отслеживаются Vue, и когда они изменяются, интерфейс обновляется автоматически.
• Composition API: Vue 3 включает в себя Composition API, который даёт возможность группировать логику и создавать реактивные данные для более сложных компонентов. В отличие от хуков в React, реактивные свойства в Vue более интегрированы во фреймворк, что упрощает работу с состоянием.

Реактивность в Angular

Angular использует более комплексный подход к реактивности через свой механизм change detection и реактивное программирование с помощью RxJS.

• Change detection и зоны (Zone.js): Angular применяет механизм отслеживания изменений через Zone.js, который следит за асинхронными операциями и автоматически обновляет компонент при завершении операции.
• RxJS и реактивное программирование: Angular активно использует библиотеку RxJS для работы с потоками данных и асинхронностью.

Итоговое сравнение

На основе указанных особенностей можно составить следующую таблицу сравнения фреймворков

Таблица 1.

Сравнение фреймворков

Основную рекомендацию по выбору технологии можно сформулировать следующим образом:

React является наиболее сбалансированным вариантом с богатой экосистемой, включающей поддержку реактивности (большой выбор библиотек управления состоянием – redux, mobx, zustand и т.д.). Пример использования – любое приложение средней сложности, где приветствуется создание собственных компонентов.

Vue более полагается на встроенный функционал, что означает более простое обучение и внедрение, но при этом разработчик сильно полагается на то, что все будет работать правильно «из коробки». Пример использования – отдельные UI компоненты, в которых не требуется собственный функционал: формы, лендинги, сетки предметов.

Angular принято считать наиболее трудным фреймворком, поскольку реактивность отличается от принятого виртуального дерева, однако высокая сложность позволяет более точно подстраивать код под свои нужды. Пример использования – корпоративные системы/порталы.

Заключение

Концепция реактивного обновления модели документа стала одним из основных преимуществ фреймворков по сравнению с обычным JavaScript-программированием. Помимо особенностей, перечисленных фреймворков, существуют и другие, менее популярные, но по-своему интересные технологии. Основное направление, в котором разработчики пытаются «обогнать» друг друга является умеренное сочетание скорости и стабильности, а также полная интеграция с другими технологиями frontend-разработки (например, отслеживание изменений как на клиенте, так и на сервере).

Список литературы:

1. Angular Team. Angular: The Complete Guide to Angular [Электронный ресурс] // Официальная документация Angular: сайт. – URL: https://angular.io (дата обращения: 24.10.2024)
2. Evan You. Vue.js: The Progressive JavaScript Framework [Электронный ресурс] // Официальная документация Vue.js: сайт. – URL: https://vuejs.org (дата обращения: 24.10.2024)
3. Jordan Walke. React: A JavaScript Library for Building User Interfaces [Электронный ресурс] // Официальная документация React: сайт. – URL: https://reactjs.org (дата обращения: 24.10.2024)
4. Koushik K. K. Learning React: Functional Web Development with React and Redux. — Birmingham: Packt Publishing, 2019. — 480 p. — ISBN 978-1-78829-108-1
5. Mourad R., Zhiwei L., Zheng T., et al. A Comparative Analysis of Modern Frontend Frameworks for Building Large-Scale Web Applications. — IEEE Conference Publication, 2023. — DOI: 10.1109/ICSE43993.2023.00138