SPA и выбор frontend-фреймворка
Обзор SPA и frontend-стека
Раздел Frontend Frameworks разбит по технологиям. Здесь — общая терминология (SPA, компонент, state, bundler) и критерии выбора фреймворка перед углублением в React, Vue или Angular.
Связка с сервером — Fullstack. Meta-фреймворки (SSR) — Next.js.
SPA — одностраничное приложение
После первой загрузки HTML/JS навигация не перезагружает всю страницу: JavaScript меняет DOM и подгружает данные с API. URL меняется через History API (/notes, /settings).
| Часть | Роль | Пример |
|---|---|---|
| Браузер | UI, логика отображения | React на :5173 |
| API | Данные, правила | Express на :3000 |
| Сборщик | JSX → JS, dev-сервер | Vite |
Общие идеи у React, Vue и Angular
| Идея | Смысл |
|---|---|
| Компонент | Кусок UI + логика, переиспользуется |
| Состояние | Данные, от которых зависит экран |
| Реактивность | При смене данных UI обновляется |
| Маршрутизация | URL → экран (React Router, Vue Router, Angular Router) |
| Сборка | npm run dev / npm run build |
Различаются синтаксисом и тем, насколько фреймворк задаёт архитектуру за вас.
Как выбрать
| Критерий | React | Vue | Angular |
|---|---|---|---|
| Порог входа | Средний | Ниже | Выше |
| Экосистема | Огромная | Большая | Корпоративная |
| TypeScript | Опционально | Опционально | По умолчанию |
| Готовые решения из коробки | Мало (библиотека) | Средне | Много (платформа) |
| Типичный работодатель | Стартапы, продукт | Смешанно | Enterprise, банки |
Ext JS — отдельная ниша: готовые enterprise-виджеты, legacy-системы — 4-ext-js.
Не застревайте на выборе месяцами: пройдите первую программу на одном стеке, затем сравните по ощущениям.
Маршруты по фреймворкам
| Фреймворк | Старт | Обзор | Справочник |
|---|---|---|---|
| React | 272 | 27 | 271 |
| Vue | 282 | 28 | 281 |
| Angular | 292 | 29 | 291 |
| Ext JS | 312 | 31 | 311 |