1.23. Фронтенд
Фронтенд
Часть темы по фронтенду и бэкенду мы уже затрагивали, в общих чертах. И прежде, чем мы перейдём к изучению «внутренностей» и технических особенностей, мы должны точно понимать, что есть фронт, что есть бэк. Эту терминологию мы можем встретить везде – фронт/бэк и, конечно, фуллстек (full-stack), который и вовсе «умеет всё».
Поскольку преимущественная часть разработчиков приложений всё-таки используют веб-приложения и сайты, то может показаться, что фронт нужен чаще. Но нет. Фронт – это веб-дизайн, разработка «внешней части», той, что у клиента. Бэк – «скрытая» от пользователя часть, которая отвечает за базы данных, их обработку и конечно сервисы и интеграции. Обычному пользователю, как правило, плевать, что происходит «под капотом» - а там как раз и работает бэкенд.
Клиентская часть (Frontend) видна в браузере, и, если вы откроете код страницы в браузере, вы можете изучить всё, что сделано «силами фронта» - веб-дизайнерами, верстальщиками сайтов.
При погружении в программирование, конечно, стоит начать с фронта. Он прост для первоначального изучения, однако (!) требователен к корректности отображения и визуальной составляющей – не всем нравится «выравнивать», «адаптировать» и работать с функциями JavaScript. Чтобы развернуть «фронт»-часть сайта, достаточно просто загрузить файлы на сайт.
★ Веб-дизайн – сфера работы с визуальной частью сайта – цвета, шрифты, расположение элементов.
При работе с дизайном часто прибегают к прототипированию, и буквально, дизайн – это проект. Поэтому, для постройки дизайна используются такие инструменты, как Figma, Adobe XD, Sketch.
Веб-дизайн руководствуется принципами:
- контраст (чёткое разделение элементов);
- иерархия (важное бросается в глаза);
- юзабилити (удобно использовать).
Веб-дизайн — это процесс проектирования внешнего вида веб-сайта. Он охватывает выбор цветов, шрифтов, расположения элементов, анимации и других визуальных компонентов. Главная цель веб-дизайна — сделать сайт не только красивым, но и функциональным, удобным для пользователей.
Контраст помогает выделить важные элементы на странице и сделать их заметными. Например, использование ярких цветов для кнопок "Купить" или "Зарегистрироваться" делает их более привлекательными для пользователей.
Цвета влияют на восприятие сайта и эмоциональное состояние пользователя. Например, синий цвет ассоциируется с доверием, а красный — с энергией и действием. Это целая наука, дизайнеры подтвердят.
Иерархия определяет, как элементы располагаются на странице, чтобы пользователь мог быстро найти самую важную информацию.
Юзабилити — это ключевой принцип, который делает сайт удобным для пользователей. Хороший дизайн должен быть интуитивно понятным, без необходимости объяснений.
Современный дизайн часто использует минималистичный подход, чтобы избежать перегруженности интерфейса, что, наверное, вы уже и сами заметили - сейчас уже уходят от лишних элементов. Ранее ими загромождали страницу, чтобы показать технологичность, но со временем технологии изменились. Это - минимализм.
Адаптивность подразумевает, что сайт должен корректно отображаться на всех устройствах: компьютерах, планшетах и смартфонах. Это достигается за счёт гибкого дизайна, который подстраивается под размер экрана.
Кстати, отдельно следует выделить шрифт. Выбор шрифтов играет важную роль в восприятии текста. Слишком мелкий или сложный шрифт может затруднить чтение.
Figma — это облачный инструмент для совместной работы над дизайном. Он позволяет создавать прототипы, макеты и интерфейсы. Одна из его главных особенностей — возможность работы в реальном времени с командой. Это бесплатное и кроссплатформенное решение.
Adobe XD — это инструмент для создания прототипов и интерактивных макетов. Он интегрируется с другими продуктами Adobe, такими как Photoshop и Illustrator. Прокаченное, профессиональное решение с поддержкой анимаций, простотой экспорта.
Sketch — это популярный инструмент среди дизайнеров, особенно в macOS-экосистеме. Он используется для создания макетов и интерфейсов. Вообще, кстати говоря, многие дизайнеры в принципе предпочитают macOS, и это связано, вероятно, с фокусом самой операционной системы на дизайн.
Canva — это упрощённый инструмент для создания дизайна, который подходит для новичков, и содержит готовые шаблоны.
Можно, конечно, использовать и нейросети для дизайна…но это не совсем профессионально. Как макет или шаблон - можно. Но веб-дизайн более сложная наука.
★ Верстка — это процесс преобразования дизайна в рабочий код с использованием HTML, CSS и JavaScript. Цель верстки — обеспечить точное соответствие макету, адаптивность и доступность сайта.
HTML (HyperText Markup Language) отвечает за структуру контента. Он определяет, где будут размещены заголовки, текст, изображения и другие элементы.
CSS (Cascading Style Sheets) отвечает за внешний вид элементов: цвета, шрифты, отступы, анимации и многое другое.
JavaScript добавляет интерактивность: анимации, выпадающие меню, модальные окна и другие динамические элементы.
Адаптивная верстка обеспечивает корректное отображение сайта на всех устройствах. Для этого используются медиа-запросы (media queries) в CSS.
Доступность означает, что сайт должен быть удобен для всех пользователей, включая людей с ограниченными возможностями. Например, использование семантических тегов HTML (<header>, <footer>, <main>) и атрибутов alt для изображений.
Перед созданием финального дизайна часто создаётся прототип — упрощённая модель сайта, которая показывает расположение элементов и их взаимодействие. Прототипы могут быть статическими или интерактивными. В Figma как раз создаются такие прототипы.
Инструментами для верстки являются редакторы кода:
- Visual Studio Code (VS Code);
- Sublime Text;
- CodePen.
Кроме этого, стоит выделить Bootstrap — это фреймворк для создания адаптивных сайтов. Он предоставляет готовые компоненты и сетку для быстрой верстки. Это ускоряет процесс разработки, множество готовых решений.
И кстати, если уж речь пошла о фреймворках…
Фронтенд-фреймворки
Современная фронтенд-разработка редко ограничивается чистым HTML, CSS и JavaScript. Для повышения производительности, поддерживаемости и масштабируемости применяются фреймворки и библиотеки, которые управляют состоянием интерфейса, обеспечивают реактивность и упрощают архитектуру приложения.
Наиболее распространённые инструменты в этой области:
React — декларативная JavaScript-библиотека, разработанная Meta (ранее Facebook). Основана на концепции компонентов: независимых, переиспользуемых частей пользовательского интерфейса. React использует виртуальный DOM для оптимизации рендеринга и поддерживает хуки — механизм управления состоянием и побочными эффектами внутри функциональных компонентов. Роутинг реализуется с помощью сторонних библиотек, таких как React Router. React не навязывает архитектуру приложения и часто используется в составе более крупных стеков (например, Next.js).
Vue.js — прогрессивный фреймворк, допускающий постепенное внедрение. Ядро отвечает только за слой представления, при этом дополнительные функции (роутинг, управление состоянием) подключаются опционально (Vue Router, Pinia/Vuex). Vue поддерживает реактивную систему привязки данных и директивы — специальные атрибуты, управляющие поведением DOM-элементов (например, условный рендеринг или итерации). Архитектура Vue ближе к классической MVVM, но допускает гибкость в проектировании.
Angular — полноценный фреймворк от Google, построенный на TypeScript. Следует архитектуре компонентов с чётким разделением на модули, сервисы, компоненты и директивы. Включает встроенные механизмы для работы с HTTP, реактивными потоками (RxJS), внедрением зависимостей и двусторонней привязкой данных. Angular ориентирован на разработку крупных корпоративных приложений и требует более высокого порога входа по сравнению с React и Vue.
Эти инструменты не исключают друг друга по функциональности, но различаются по подходу к архитектуре, экосистеме и требованиям к проекту. Выбор зависит от масштаба приложения, команды, требований к типизации и жизненного цикла разработки.
Для сборки и локальной разработки фронтенд-приложений часто используется Node.js как среда выполнения инструментов сборки (Webpack, Vite и др.), хотя сам Node.js не является частью клиентской логики.
Более детальное изучение этих технологий будет рассмотрено в разделах, посвящённых JavaScript и TypeScript.
Архитектурная роль фронтенда
Фронтенд — всегда клиентская сторона приложения. Она не хранит данные в долгосрочной перспективе и не принимает окончательных решений по бизнес-логике. Её задача — визуализировать состояние системы и обеспечивать двусторонний канал взаимодействия:
- от пользователя → к серверу (ввод данных, действия, команды);
- от сервера → к пользователю (результаты, уведомления, статусы).
Ключевая особенность: одно и то же серверное API может обслуживать множество фронтендов — веб-приложение, мобильное (React Native, Flutter), десктопное (Electron), даже CLI-клиент или IoT-панель. Это демонстрирует принцип разделения ответственности: сервер управляет данными и логикой, клиент — восприятием и интеракцией.
Все современные веб-фронтенды построены поверх HTTP/HTTPS, который, в свою очередь, является протоколом без состояния (stateless). Сервер не сохраняет контекст между запросами: каждый запрос должен содержать всю необходимую информацию для его обработки.
Пример. Вы зашли на сайт, ввели логин/пароль, получили токен — и сделали следующий запрос к
/api/profile. Сервер не «помнит», что вы уже авторизовались. Он проверяет токен в этом самом запросе.
Для поддержания аутентификации, сессий и персонализации используются следующие механизмы на клиенте:
| Механизм | Где хранится | Куда отправляется | Срок жизни | Типичное применение |
|---|---|---|---|---|
| Cookies | В браузере (HTTP-only или JS-доступные) | Автоматически при каждом HTTP-запросе к домену (если SameSite, Secure, Path позволяют) | Управляется сервером (Expires, Max-Age) | Сессии, CSRF-токены, A/B-тестирование, трекинг (при согласии) |
localStorage | В браузере | Только через JavaScript (вручную) | Постоянно, пока не очищено | Тема интерфейса, язык, onboarding-статус, кэш конфигурации |
sessionStorage | В браузере | Только через JavaScript (вручную) | До закрытия вкладки/окна | Формы с черновиками, временные фильтры, одноразовые данные |
Рекомендация:
- Cookies — если данные должны идти на сервер в каждом запросе (например, авторизационный токен в заголовке
Cookie: auth_token=…, илиSet-Cookie+Authorization: Bearer …с HTTP-only cookie как источник). - Web Storage (
localStorage/sessionStorage) — если данные ничего не меняют на сервере и нужны только для UX (например,darkMode=true,tutorialCompleted=true).
⚠️ Безопасность: чувствительные данные (пароли, токены) не следует хранить в
localStorage, если к ним есть прямой доступ из JS-кода — это создаёт вектор для XSS-атак. ПредпочтителенHttpOnlycookie +SameSite=Strict/Lax.
Профессия: Frontend-разработчик
Frontend-разработчик — инженер, отвечающий за реализацию пользовательского интерфейса и клиентской логики. В отличие от верстальщика (который фокусируется на преобразовании макета в HTML/CSS) или UI-дизайнера (который создаёт визуальную концепцию), frontend-разработчик:
- работает с динамическим интерфейсом: обработка событий, управление состоянием, маршрутизация;
- интегрирует API бэкенда (REST, GraphQL, gRPC-web);
- обеспечивает производительность: ленивая загрузка, оптимизация рендеринга, кэширование;
- реализует доступность (a11y), кросс-браузерность, адаптивность;
- участвует в проектировании архитектуры клиентского приложения (слои: представление, состояние, побочные эффекты);
- пишет автотесты (unit, integration, E2E — например, Jest, React Testing Library, Cypress);
- работает с инструментами сборки (Vite, Webpack, esbuild), системами контроля версий (Git), CI/CD.
Компетенции:
- Языки: JavaScript (ES2015+), TypeScript (рекомендуется для масштабируемых проектов).
- Базовые технологии: HTML5, CSS3 (Flexbox, Grid, Custom Properties).
- Фреймворки/библиотеки: React / Vue / Angular (или Svelte, Solid и др.).
- Инструменты: Git, npm/yarn/pnpm, DevTools, Lighthouse, ESLint, Prettier.
- Понимание протоколов и стандартов: HTTP/2, CORS, CSP, WebSockets, Service Workers.
Frontend-разработчик часто взаимодействует с:
- UX/UI-дизайнерами — для уточнения поведения интерфейса;
- аналитиками — для реализации метрик и A/B-тестов;
- бэкенд-разработчиками — для согласования контрактов API и форматов данных;
- тестировщиками — при отладке кросс-платформенных сценариев.
В крупных проектах может существовать разделение на:
- Pure frontend — компоненты, стили, рендеринг;
- Frontend infrastructure — сборка, монорепо, SSR/SSG (Next.js, Nuxt), performance monitoring;
- Frontend QA/DevEx — инструменты внутренней разработки, документация компонентов (Storybook, Chromatic).