О фронтенд фреймворках

Что такое "реактивность"?

Наверное, самое фундаментальное отличие программы для фронта от программы для бэка, микросервиса и даже отдельного приложения с GUI, это понятие "реактивности".

При работе на бэке программист имеет хорошие возможности управлять потоком данных. Он контролирует откуда их брать, куда передавать, кто их может изменить, всё это хоть в одном потоке, хоть в многопоточной системе.

На фронте большую роль играет фактор интерактивности UI - данные надо динамично показывать пользователю, пользователь может изменять данные, данные могут изменяться различными контрагентами (пользователь, бэкенд, внутренние вычисления). В принципе, возможно использовать обычные программистские подходы как и на бэке, - то есть, самому следить за изменениями данных в каждом месте, и проводить обновление всех зависимостей. Это даст очень много бойлерплейта - рутинного повторяющегося кода. Реактивные фреймворки сильно облегчили жизнь программистам, взяв на себя заботу об этом обновлении зависимостей переменной при её изменении.

В реактивном фреймворке достаточно задать реактивную переменную и указать, что она является, например, значением input поля. При вводе пользователем в это поле значения переменная автоматически обновится, и все другие переменные, зависящие от нее, тоже. Кода писать для этого не надо.

Упрощенно говоря, под капотом реактивная переменная это прокси-обертка над обычной, которая следит за её изменениями и регистрирует всех слушателей, которых надо оповестить об изменении переменной, чтобы они себя пересчитали.

Какие реактивные фронтенд фреймворки существуют

React, Vue, Angular - самые распространенные. Есть множество других, не взлетевших.

Angular используется обычно для больших проектов (больших команд разного уровня программистов) и жестко зажимает разработку в свои правила.

React и Vue более гибки и схожи, но есть существенные отличия.

Vue быстрей, меньше, эффективней, не смешивает HTML и JS, имеет меньший порог входа. Активно развивается.

За React-ом Цукерберг и бо́льшая распространенность. Больше предложений о работе, но и больше кандидатов на одно место.

Почему Vue?

Чтобы можно было разрабатывать и управлять большими сложными программными системами, было изобретено ООП - объектно-ориентированное программирование, где для иерархичного разбиения сложности вводились новые сущности - объекты. Они инкапсулировали в себе данные и поведение (логику).

На фронтенде немного иная ситуация из-за наличия кода на нескольких языках программирования - HTML, CSS, JavaScript. И в данном случае SFC компоненты во Vue отлично служат для разбиения сложности системы. Каждый компонент инкапсулирует HTML шаблон, его стилизацию и логику.

Vue делает это намного лучше, чем тот же React, который сваливает всё в одну кучу. В этом аспекте Vue однозначно является флагманом компонентно-ориентированного программирования (КОП) на фронтэнде.

Кроме того, во Vue 3 появилась реактивность за пределами компонент - ref и reactive переменные можно задать в простом js модуле. Это используется в composable функциях. Стало возможно отделить от представления не только реактивный сервис (useI18n, useScreenSize например), но и бизнес-логику (useShoppingCart, useNewsWidget). Это позволяет использовать на фронтенде MVC шаблон, где роли View и частично Controller выполняют компоненты, отвечающие преимущественно за визуализацию, а логика и модель (Model и частично Controller) приходятся на composable функции и их реактивный стейт.

Это даёт возможность сделать, например, смену дизайна сайта или замену UI библиотеки намного более легкой задачей.

Данная особенность также сильно выделяет Vue на фоне других реактивных фреймворков-аналогов.

Reactivity API во Vue 3, возможно, еще не идеально (именно поэтому Эван Ю экспериментировал с reactivity Transform), но уже вполне подходит для разработки больших, надежных, масштабируемых систем, чего нельзя было сказать о Vue 2.

TIP

Реактивностью Vue можно пользоваться совсем без UI. Например, в этом расширении VS Code элементы Vue 3 reactive, ref и watch используются для организации реактивности в коде без визуальных компонент.

Что может Vue, но не могут React или Svelte?

Vue эффективней работает с реактивностью.

Добавление нового элемента в массив:

// React
setSomeArr([...someArr, newItem]);

// Svelte
someArr = [...someArr, newItem];

// Vue
someArr.value.push(newItem.value);

Использование нативного ES6 объекта Proxy позволяет избежать декомпозиции и создания промежуточного массива. Также это более производительное решение.