Frontend Frameworks
Фронтенд-фреймворк — это готовый программный каркас («скелет») с набором инструментов, правил и библиотек, который используется для быстрой разработки визуальной (клиентской) части веб-приложений. Если говорить простыми словами, то чистый язык JavaScript — это отдельные кирпичи, а фронтенд-фреймворк — это готовый заводской комплект для сборки дома. Разработчику не нужно с нуля придумывать, как связать данные с экраном, организовать переходы по страницам или обрабатывать клики. Фреймворк уже задает стандарты и предоставляет для этого готовые конструкции. Раньше сайты были простыми текстовыми страницами с картинками. Сегодня веб-приложения (например, YouTube, Telegram Web или банковские кабинеты) — это сложные программы, работающие прямо в браузере. Фреймворки решают три главные проблемы такой разработки:
- Скорость работы (Производительность). Они обновляют интерфейс мгновенно без полной перезагрузки страницы (технология Single Page Application).
- Повторное использование кода. Интерфейс делится на компоненты (кнопка, шапка, карточка товара). Написав компонент один раз, его можно вставлять в любые части сайта.
- Порядок в проекте. Фреймворк жестко диктует, где должна лежать логика, где стили, а где разметка. Благодаря этому команда из десятков программистов может работать над одним сайтом и понимать код друг друга.
Обычно в состав современного фронтенд-каркаса входят:
- Архитектурный шаблон — правила, по которым данные связываются с внешним видом.
- Движок рендеринга — механизм, который быстро и без тормозов выводит интерфейс на экран (например, Virtual DOM).
- Маршрутизатор (Роутер) — инструмент для переключения между «страницами» внутри одного приложения без перезагрузки вкладки.
- Управление состоянием (State Management) — единое хранилище данных приложения (например, профиль пользователя, корзина товаров), доступное из любого компонента.
Здесь — библиотеки и фреймворки для интерфейса в браузере. У каждого стека своя подпапка: сначала первая программа, потом углубление и отдельный справочник по API.
Начните с SPA и выбора фреймворка, если ещё не решили, на чём учиться. Для legacy-кода и CMS — раздел jQuery.
jQuery
jQuery — обзор библиотеки · Справочник по jQuery
React
Первая программа на React · React - библиотека для пользовательских интерфейсов · React — компоненты, JSX и поток данных · React — хуки, состояние и формы · React — Router, данные с API и оптимизация · Справочник по React
Vue
Первая программа на Vue.js · Vue.js · Vue — реактивность и Composition API · Vue — Router, Pinia и Vite · Vue — SSR, тесты и production · Справочник по Vue.js
Angular
Первая программа на Angular · Angular · Angular — DI, RxJS и формы · Справочник по Angular
Ext JS
Первая программа на Ext JS · 31 · Ext JS — Model, Store и proxy · Справочник по Ext JS