Одно и то же приложение было реализовано десятью способами: с использованием чистого JavaScript и девяти различных JavaScript-фреймворков. Обзор демонстрирует актуальные на 2023 год технологии на примере простого приложения, включающего динамику, работу со состоянием, реактивность и загрузку данных с сервера.
Чистый JavaScript
В папке 01 Vanilla JavaScript представлено приложение без фреймворков и библиотек. HTML-код прост: в <head> подключен скрипт приложения, а в <body> – только два тега <input> и <ul>. Остальное генерируется динамически.
Скрипт:
- Получает теги <input> и <ul> с помощью document.querySelector.
- Определяет и вызывает функцию start().
- В start() выполняет асинхронный запрос к серверу, парсит ответ (список из 10 пользователей) и сохраняет его в переменной allUsers.
- Вызывает функцию render(), передавая ей массив пользователей.
- render() преобразует массив в HTML-строку с помощью map() и join(), добавляя элементы в <ul>.
- Добавляет обработчик события input к тегу <input>. При изменении значения вызывается render(), фильтруя пользователей по имени.
React
React, позиционируемый как библиотека, основан на компонентном подходе. Исходный код находится в Source/index.js. Используется JSX.
Компонент:
- Функция JavaScript, возвращающая JSX-шаблон (аналогичный чистому JavaScript).
- Создаёт ref для списка пользователей и два состояния: users (актуальный список, изначально пустой массив) и input (значение <input>, изначально пустая строка).
- useEffect с пустым массивом зависимостей выполняет асинхронный запрос при монтировании компонента, сохраняя данные в users и ref.
- Обработчик onChange для <input> обновляет состояние input.
- useEffect отслеживает изменение input и обновляет users с помощью setUsers, фильтруя список.
Vue
Vue – фреймворк, похожий на React, но предлагающий несколько подходов (Options API, Composition API). Пример использует Composition API (Source/main.js).
Компонент:
- Шаблон с <input> и <ul>.
- setup() настраивает приложение, связываясь с шаблоном.
- onMounted() выполняет асинхронный запрос при монтировании, сохраняя данные в users (полученный с помощью ref).
- Реактивное свойство input связывается с <input> с помощью директивы v-model.
- Вычисляемое свойство filteredUsers фильтрует users в зависимости от input.
- Директива v-for итерирует по filteredUsers, выводя имена пользователей.
Angular
Angular – масштабный фреймворк со своей инфраструктурой. Код находится в Source/main.ts. Используется TypeScript.
Приложение:
- Запускает AppModule.
- AppModule импортирует сервисы и компоненты.
- Компонент (AppComponent) использует ngOnInit() для инициализации.
- UserService выполняет асинхронный запрос с помощью HttpClient, возвращая Observable.
- AppComponent подписывается на Observable, используя async pipe в шаблоне для отображения данных.
- ngModel для двустороннего связывания <input> и компонента.
- ngFor для итерации по отфильтрованному списку.
- Пользовательский pipe для фильтрации.
Svelte, Solid, Alpine.js, Stencil, Qwik, Lit
Эти фреймворки реализуют схожую функциональность, используя свои специфические подходы к управлению состоянием, реактивности и рендерингу. Подробное описание каждого из них представлено в отдельной документации.
Каждый фреймворк предлагает свой подход к разработке. Выбор зависит от специфики проекта и предпочтений разработчика. Данный обзор демонстрирует базовые принципы работы каждого из них на примере одного и того же приложения.