Frontend-разработка — создание того, что пользователь видит и с чем взаимодействует в браузере: HTML-структура, CSS-стили, JavaScript-логика и современные фреймворки.
Frontend-разработка
Frontend — всё, что видит пользователь в браузере. HTML (1991), CSS (1996), JavaScript (1995). React (2013, Facebook) — самый популярный фреймворк с 2016 года.
Загрузка карты...
Frontend — это всё, что видит пользователь
Когда ты заходишь на сайт, твой браузер получает три типа файлов: HTML описывает структуру страницы, CSS задаёт внешний вид, JavaScript добавляет интерактивность. Frontend-разработчик работает именно с этим.
Backend — это сервер, база данных, бизнес-логика. Пользователь её не видит. Frontend — видимая часть айсберга. Но с 2010-х граница стёрлась: Node.js позволяет писать серверный код на JavaScript, а SPAs перенесли логику рендеринга на клиент.
HTML: скелет страницы
HTML (HyperText Markup Language) создан Тимом Бернерсом-Ли в 1991. Это разметка — описание структуры документа тегами. Заголовки, параграфы, ссылки, изображения, формы. Браузер читает HTML и строит DOM (Document Object Model) — дерево элементов страницы.
Современный стандарт — HTML5 (2014). Добавил семантические теги (header, article, section), нативное видео и аудио, Canvas для рисования, геолокацию.
CSS: внешний вид
CSS (Cascading Style Sheets, 1996) описывает, как выглядят HTML-элементы: цвет, шрифт, размер, отступы, позиционирование. «Cascading» — стили наследуются и переопределяются по правилам приоритета.
Flexbox (2012) и Grid (2017) изменили вёрстку — теперь сложные макеты пишутся в 10 строк вместо 100. CSS-анимации позволяют двигать элементы без JavaScript.
JavaScript: логика и интерактивность
JavaScript создал Брендан Айк за 10 дней в 1995 году для Netscape. Единственный язык, который нативно понимают браузеры. Позволяет: реагировать на клики, отправлять запросы без перезагрузки страницы (AJAX), менять DOM на лету.
Стандарт языка — ECMAScript. ES6 (2015) добавил стрелочные функции, классы, промисы, модули. С тех пор обновляется каждый год.
Фреймворки: React, Vue, Angular
Написать сложный интерфейс на чистом JS — болезненно. Фреймворки дают структуру и инструменты.
React (Facebook, 2013) — самый популярный. Компонентный подход: UI разбит на переиспользуемые кусочки. Виртуальный DOM ускоряет обновления. Не фреймворк, а библиотека — нужно добавлять роутинг, state-менеджмент отдельно.
Vue.js (Эван Ю, 2014) — легче освоить. Реактивность «из коробки». Популярен в Китае и среди небольших команд.
Angular (Google, 2016) — полноценный фреймворк со своими решениями для всего. TypeScript по умолчанию. Популярен в корпоративной разработке.
React, Vue, Angular
| Характеристика | React | Vue | Angular |
|---|---|---|---|
| Создатель | Facebook (2013) | Эван Ю (2014) | Google (2016) |
| Размер (min+gz) | ~45 KB | ~33 KB | ~150 KB |
| Язык по умолчанию | JSX + JS/TS | Template + JS/TS | TypeScript |
| Порог входа | Средний | Низкий | Высокий |
| Подход | Библиотека | Прогрессивный фреймворк | Полный фреймворк |
| Типичное применение | SPA, React Native | Малые/средние SPA | Корпоративные системы |
Сравнительная таблица: анализ различий
Популярность фреймворков (State of JS 2024, % использования)
% разработчиков
Инструменты сборки
Современный frontend-проект нельзя просто открыть в браузере — нужна сборка. Vite и Webpack берут исходный код, объединяют модули, минифицируют, оптимизируют. TypeScript компилируется в JavaScript. CSS-препроцессоры (Sass) — в обычный CSS.
Структура
HTML
Структура страницы: разметка заголовков, параграфов, форм, медиа
CSS
Визуальный стиль: цвета, шрифты, макет, анимации
JavaScript
Интерактивность: реакция на действия пользователя, запросы к серверу
Фреймворки (React/Vue/Angular)
Структура для сложных приложений, компонентный подход
Инструменты сборки (Vite/Webpack)
Компиляция, оптимизация, превращение в файлы для браузера
❓Часто задаваемые вопросы
Сначала JS: без его понимания React превращается в магию. Минимум 2-3 месяца JS, потом фреймворки.