На работе фронтендер пишет код, тестирует и отлаживает его, а ещё — собирает дизайн сайта и делает его удобным для пользователей.

Сегодня с помощью современных инструментов фронтендеры:

— Разрабатывают функции для улучшения работы пользователей.

— Делают удобные сайты.

— Формируют модули кода (библиотеки, шаблоны, классы), пригодные для повторного использования.

— Оптимизируют веб-страницы с точки зрения скорости и масштабируемости.

— Пользуются разными языками разметки для разработки веб-страниц.

В конечном счёте всё подчинено главной цели: создавать сайты и приложения, которые решают проблему пользователя.

Какие навыки нужны фронтенд-разработчику

Хотя разработчик занимается «видимой» частью, он всё же не дизайнер, а программист, который создаёт функциональные сайты. Его основные инструменты — HTML, CSS, JavaScript, фреймворки и библиотеки.

Важная часть работы фронтендера — тестирование и отладка написанного кода. Во время тестов разработчик шаг за шагом исполняет созданный код, чтобы убедиться, что он работает как задумано. Если код ведёт себя иначе, разработчик переходит к отладке — локализует и устраняет ошибки. Здесь важно уметь работать с инструментами контроля версий — Git, CVS, Subversion и так далее. Если что-то пошло не так, фронтенд-разработчику не нужно делать сайт с нуля: достаточно откатить изменения и вернуться к предыдущей версии.

Трудно сказать, сколько времени нужно на обучение фронтенд-разработке. Но мы можем смотреть на опыт других людей и искать собственную дорогу.

Кроме того, нужно аккуратно учиться тому, как вообще учиться. Тут я посоветую три хорошие книжки:

— «Путь джедая» Максима Дорофеева;

— «Легко и просто» Тимура Зарудного и Сергея Жданова;

— «Думай как математик» Барбары Оакли.

Григорий Бизюкин, разработчик и лектор Школы разработки интерфейсов Академии Яндекса

Продумать структуру или решить, как лучше исправить ошибки, состыковать внешний код с внутренним или создать качественный UX — всё это требует отточенных навыков креативного решения задач. Большое значение имеют и навыки общения. Работа программиста завязана на коммуникацию в команде разработчиков или взаимодействие с заказчиками. Так что умение правильно задавать вопросы, искать компромисс, соблюдать дедлайны и корректно разрешать конфликтные ситуации — ценный актив для специалиста.

Какими инструментами и технологиями должен владеть фронтендер

HTML и CSS. HTML, Hyper Text Markup Language, — это базовый язык разметки, с помощью которого создают структуру сайта: параграфы, разделы, заголовки, навигационные панели. Благодаря ему мы видим в интернете тексты, ссылки, картинки и видео.

С помощью CSS — Cascading Style Sheets, языка описания внешнего вида веб-страницы, — фронтенд-разработчики определяют макет сайта, используемые шрифты и цвета.

JavaScript. С помощью этого языка программирования фронтенд-разработчики создают интерактивные и динамические элементы сайтов. Онлайн-игры, карты, обновляющиеся в реальном времени, опросы, слайд-шоу, «карусели» и формы обратной связи — всё это было бы невозможно без JavaScript.

На мастер-классе по фронтенд-разработке с Сергеем Бережным, руководителем Школы разработки интерфейсов Академии Яндекса и директором по взаимодействию с разработчиками в Яндексе, можно увидеть, как работают HTML, CSS и JavaScript, и даже попробовать их в деле.

API. Интерфейс программирования приложений, Application Programming Interface, помогает разным системам и приложениям эффективно взаимодействовать друг с другом и обмениваться данными — а ведь именно это и происходит всё время в интернете. Грамотное использование API позволяет фронтенд-разработчикам экономить время, повышать эффективность работы, а ещё — делать приложения удобнее для пользователей, получать и хранить нужные данные.

Я советую любую новую изученную тему сразу же отрабатывать на практике. Более того, при изучении фронтенд-разработки полезно не закапываться в теорию, а больше времени уделять прикладным вещам.

А ещё здорово учиться в группе единомышленников или с наставником. Когда вы увидите, что другие люди тоже допускают ошибки и испытывают трудности, вы не будете чувствовать себя слабым или медленным разработчиком.

Григорий Бизюкин, разработчик и лектор Школы разработки интерфейсов Академии Яндекса 

Фреймворки и библиотеки JavaScript. Это наборы программного кода, которые используются для стандартизации и оптимизации разработки. Они содержат шаблоны, инструменты и функции, благодаря которым фронтенд-разработчик использует в работе готовые стандартные элементы, не начиная проект с чистого листа.

Например, с помощью библиотеки React разработчики описывают или декларируют, как должна меняться объектная модель документа и как должен выглядеть пользовательский интерфейс. В отличие от HTML, React позволяет отображать динамические данные и быстро менять сайт в зависимости от действий пользователя.

Библиотека React отлично подходит для разработки онлайн-приложений. Например, сервис онлайн-почты или онлайн-карты загружаются на одной веб-странице, но при этом мгновенно отражают произошедшие изменения. Для создания таких одностраничных приложений часто используется именно React.

JSON, JavaScript Object Notation, — это формат, обеспечивающий текстовое представление веб-данных. Многие базы данных, используемые для сайтов, — те же MySQL и PostgreSQL — отличаются встроенной поддержкой данных и запросов в формате JSON.

Этот формат используется разными языками программирования и жизненно необходим для любой площадки, где подразумевается обмен данными между пользователями и бэкендом сайта. Узнать о нём подробнее можно на официальной странице формата на русском языке.

MySQL. Это система управления базами данных, которая часто используется сайтами для работы с информацией. Например, на сайтах, сделанных на WordPress, все пользовательские данные, статьи и посты часто хранятся именно в MySQL. Это лёгкая, доступная и интуитивно понятная система.

MySQL определяет и организует информацию с помощью таблиц — при этом связи между записями базы данных легко прослеживаются. Тем, кто хочет освоить этот инструмент, пригодится справочное руководство по MySQL.

Учиться фронтенд-разработке лучше начинать с фундамента: HTML и CSS. Если сразу прыгнуть к фреймворкам, можно запутаться в процессе — и всё равно придётся возвращаться.

Кроме того, фреймворки постоянно меняются, а HTML и CSS всегда с нами. Полезно прочитать несколько книжек, чтобы заложить крепкую основу своего профессионализма. Например, «Полное руководство по JavaScript» Дэвида Флэнагана.

Григорий Бизюкин, разработчик и лектор Школы разработки интерфейсов Академии Яндекса

Node.js. Эта среда выполнения кода JavaScript помогает сокращать задержки и обрабатывать большое количество запросов. С её помощью фронтенд-разработчики приближаются к своей цели: создавать максимально удобные быстрые сайты, способные выдержать нагрузку в несколько тысяч или даже миллионов пользователей. Скорость и минимализм, которые она предлагает, помогают делать сайты очень удобными для посетителей. Node.js позволяет создавать быстро работающие JavaScript-фреймворки, которые заметно снижают загрузку сервера и время ожидания для пользователя.

DOM, Document Object Model, — программный интерфейс, который не зависит от платформы и языка и позволяет программам и скриптам получать доступ к HTML-, XHTML- и XML-документам и изменять их содержимое, структуру и оформление. Работая с DOM, можно менять то, как пользователь видит контент на веб-странице.

DOM превращает каждую часть веб-страницы в узлы и объекты, за счёт чего разработчики могут взаимодействовать с моделью, используя JavaScript или любой другой объектно ориентированный язык программирования. Кроме того, DOM обеспечивает тесное взаимодействие между скриптами, стилями и другими элементами, а ведь именно это помогает создавать удобные для пользователей сайты.

DOM содержит несколько описанных в руководстве API, с помощью которых фронтенд-разработчики могут создавать сайты с широкими возможностями персонализации для разных пользователей. Например, благодаря DOM сайт будет показывать контент на выбранном пользователем языке или взаимодействовать с ним через веб-камеру.

Командная строка. Хотя фронтенд-разработку можно вести через графический интерфейс пользователя, в командной строке можно создавать файлы, работать с системой контроля версий, запускать команды фреймворков.

Что в итоге

Фронтендер — интересная, полезная и творческая профессия, стабильно востребованная на рынке труда. Развиваясь в этом направлении, можно реализовывать творческие проекты, создавать полезные сайты и сервисы и самому не стоять на месте. И, в отличие от бэкенд-разработки, всегда будет что показать родственникам и друзьям. Ведь работа фронтендера у всех на виду.