Что такое фронтенд, и какие знания помогут вам стать front-end разработчиком

Какие направления существуют в веб-разработке

Веб-разработку принято делить на две составляющие: фронтенд (front-end) и бэкенд (back-end).  Фронтенд-разработчики занимаются разработкой графического интерфейса — той части приложений, которую видит пользователь. Они превращают макет, созданный веб-дизайнером, в функциональный и удобный пользовательский интерфейс. Корректное отображение полей и блоков, работающие кнопки и формы для ввода данных — всё, с чем сталкивается пользователь в браузере, находится в зоне ответственности фронтендеров.

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

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

Универсальные знания, которыми должен обладать любой веб-разработчик — это Git и работа с Linux-окружением

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

Пользовательский опыт

▍Поддержка устаревших браузеров (полифиллы)

полифиллыэтомCan I Use

• Angular. В документации к Angular есть особый раздел, посвящённый браузерной поддержке.
• React. Проекты, создаваемые с помощью Create React App, поддерживают, как и ReactDOM, браузеры, начиная с IE 9. Эта поддержка основана на использовании полифиллов.
• Vue. Здесь особенности поддержки устаревших браузеров описаны в к CLI.

▍Локализация и интернационализация

• Использование на сайте выпадающего списка с перечнем языков, поддерживаемых проектом.
• Доступ к сведениям о географическом местоположении пользователя (с помощью браузерного API Geolocation) и адаптация веб-сайта в соответствии с полученными данными.
• Указание сведений о языке в URL. Например, это может выглядеть так: , или так: , или даже так: .

• Angular. Angular, повторюсь, это полноценный фреймворк, он даёт разработчику готовое решение.
• React. Задачи интернационализации проектов можно решать с помощью популярной в React-среде библиотеки react-i18next.
• Vue. В решении рассматриваемых нами задач очень хорошо показывает себя библиотека vue-i18n.

▍Доступность контента

• Использование атрибута изображений .
• Применение ARIA-атрибутов для оформления описаний содержимого страниц сайта.
• Поддержка возможности изменения размеров текста.
• Наличие высококонтрастного режима.
• Поддержка навигации по сайту с использованием клавиатуры, в частности, клавиши и клавиш-стрелок.

a11yproject.com

Angular. В документации к этому фреймворку есть особый раздел. Разработка доступных проектов поддерживается и на уровне Angular CDK.
React. Речь о доступности ведётся и в документации к библиотеке React. Существует и специальная библиотека — react-a11y

Но эта библиотека больше не поддерживается, поэтому пользуйтесь ей с осторожностью и учитывайте то, что её планируется заменить на библиотеку react-axe.
Vue. Разрабатывать доступные проекты на Vue поможет плагин vue-a11y

При создании библиотеки vuetify тоже учтены соображения доступности.

Мифы о UI/UX-дизайнерах

Вначале я хотел бы обратить внимание на предвзятое отношение и недоверие фронтендщиков к UI/UX-дизайнерам. Далее по тексту я опущу приставку UI/UX и буду писать просто «дизайнер», подразумевая именно дизайнеров интерфейсов

Выделим несколько мифов, которые мешают в коммуникации.

Мой дизайнер ни за что не изменит свой макет. Это один из самых распространённых мифов. Многие разработчики думают, что макет для дизайнера — это как картина для художника, он закончил её и больше ни за что не изменит. В реальности всё не так. Как программисты продолжают работать над кодом, устраняя технический долг и совершенствуя код, так и дизайнеры продолжают работу над макетами. Если команда большая, макет вообще может начать жить своей жизнью. В моей практике почти все дизайнеры шли мне навстречу, если я просил что-то изменить. Даже в самом глубоком энтерпрайзе, где макеты проходили несколько этапов согласований, мы всё равно находили возможность что-то подкорректировать. В любом случае изменения в макетах неизбежны, ведь не все из гипотез дизайнера проходят проверку на реальных пользователях. Если вы можете доходчиво объяснить причину предлагаемого изменения (например, ваш вариант позволяет сэкономить на времени разработки вдвое или есть готовая библиотека с нужным поведением, но немного отличается внешне), вы найдёте компромисс со своим коллегой. Он либо поправит макет по вашим предложениям, либо объяснит, почему его вариант важен для проекта.

Мой дизайнер самый ленивый. Этот миф возникает, когда приходишь несколько раз с одной и той же просьбой к своему дизайнеру, но он её упорно игнорирует. Зачастую дизайнеров меньше на проекте, и они всегда завалены работой и техдолгом (как я уже упоминал выше, техдолг есть не только у разработчиков). Если работа простаивает без помощи дизайнера, лучше сходить к тимлиду — возможно, есть задачи, которыми можно заняться в ожидании макета. Например, настроить инфраструктуру, среду для тестирования или что-нибудь ещё. Если тимлида нет, можно спросить дизайнера, чем он занимается, и помочь ему с расстановкой приоритетов. Объясните, какие экраны нужны в первую очередь, а какие могут подождать. Возможно, ваш дизайнер готовит дизайн-систему для проекта, тогда его лучше вообще не отвлекать, ведь как и у программистов, у них всегда есть важные задачи, при работе над которыми лучше не отвлекаться. Если вам действительно что-то очень нужно, объясните почему, спросите, когда у коллеги будет возможность заняться вашим вопросом, и до этого времени постарайтесь его не беспокоить.

Мой дизайнер только рисует макеты, откуда он знает, как лучше? Этот миф распространен у Junior-разработчиков. Специально для них объясню, что дизайнеры — то люди, которые прорабатывают макет не только чтобы он смотрелся красиво и современно, но и чтобы им было удобно пользоваться. Они знают множество паттернов поведения пользователя, сочетания цветов и форм, о которых мы не догадываемся, поэтому лучший совет в этом пункте: больше доверяйте своему коллеге, он наверняка знает, что делает.

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

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

Общие сведения о профессии

Frontend можно дословно перевести как «внешний интерфейс». Разработчик – это программист, верстальщик кода, который приводит внешний вид сайта в нормальный вид. Фронтенд-разработчик доводит ресурс до ума, чтобы он корректно отображался в разных браузерах. Разработчик часто работает в плотной связке с веб-дизайнером, так как он разбирается в оформлении стилей сайта.

Основные требования к специалисту можно разбить на две группы:

• Знание языков программирования. Минимум для разработчика – три сферы. HTML и CSS – базовый язык верстки, который обязан знать и понимать любой веб-разработчик. Специальное дополнение к основному языку верстки, которое позволяет делать красивое оформление сайта без ущерба скорости загрузки страницы. JavaScript – язык программирования, отвечающий за разные активные элементы на сайте. Он позволяет расширить функционал площадки. Дополнительно может потребоваться знание программных сред: Sass/SCSS, LESS, Bootstrap, Webpack, React, jQuery и прочие.
• Умение работать на разных уровнях с людьми. Специалист должен понимать, как взаимодействовать с дизайнером и другими разработчиками, чтобы проект не стоял на месте. В круг его обязанностей может входить анализ юзабилити сайта – он должен уметь анализировать и собирать информацию от конечного пользователя ресурса и прочих ответственных лиц.

Обязанности фронтенд-разработчика в современном веб-программировании:

• Создание полноценной рабочей HTML-страницы на основе уже имеющихся шаблонов или дизайн-макетов на HTML и CSS.
• Подключение активных скриптов (Java), которые добавляют функционал и анимации на сайте.
• Поддержание нужного уровня пользовательского интерфейса UI, а также опыта взаимодействия UX.
• Написание одностраничных приложений на известных библиотеках: React, Angular или Vue.js.

Базовые требования к профессионалу

• Знание хотя бы одного «серверного» языка программирования: PHP, Go, ASP.NET, C/C++, Python, Ruby, Java. В некоторых случаях достаточно знания JavaScript для бэкенда (Node.js), но это скорее как плюс, чем как пункт.
• Знание API (REST, SOAP — всё реже).
• Понимание принципов работы серверов Apache, NGINX, IIS и проч.
• Навыки написания юнит-тестов и покрытия кода тестами.
• Основы сетевой безопасности и знание инструментов её обеспечения.
• Знание популярных веб-фрейморков, которые способны решать задачи разработки конкретного приложения.
• Навыки написания запросов к БД и проектирования баз данных.
• Знание основ фронтенда — и это не плюс, а обязательный пункт, иначе вам придётся крайне непросто проектировать и писать приложение.

• Администрирование UNIX или знание Linux (можно любого одного дистрибутива).
• Знание принципов работы HTTP (кэширование, авторизация, структура сообщений, заголовки, коды ответов и проч.)
• Модель OSI. 
• Навыки составления и оценки технического задания (ТЗ) — очень важный навык, который необходим для сбора самой точной информации о требованиях к ПО. 

Стажёр (Intern)	Младший (Junior)	Средний (Middle)	Старший (Senior)	Ведущий (Lead)
C++ C# Golang SQL .NET	PHP Python Java Java spring framework PostgreSQL	PHP Python Java PostgreSQL Java spring framework	PHP Java Python PostgreSQL Java spring framework	PHP Java MySQL PostgreSQL Высоконагруженные системы
—	+ ООП, фреймворки	+ ООП, фреймворки, Docker	+ высоконагруженные системы, ООП, фреймворки, Docker	+ Linux, ООП, фреймворки, Docker

Топ-5 востребованных технологий у специалистов по данным «Хабр Карьера», 2 полугодие 2019 года, нижняя строка — «дополнительные» скиллы.Принцип формирования списка: пользователи, внося данные о заработной плате, указывают скиллы, которые у них в приоритете (что они умеют делать!). То есть это не требования работодателя, а навыки специалистов каждой категории.роадмап, но уже для бэкенд разработчика

Тонкости работы

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

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

Чтобы так уметь, нужно набраться опыта на десятках других блюд или проектов. Пока такого умения нет — просто используйте рабочие инструменты и учитесь. Со временем всё появится.

Интерактивность

Одна из областей применения JavaScript — добавление интерактивности вашей странице

Теперь, когда у вас есть представление о JavaScript как о языке, можно перейти к его применению в вебе. Для понимания того, как JavaScript взаимодействует с сайтами, вы должны сначала узнать об объектной модели документа (DOM).

DOM является отражением структуры HTML-документа. Это древовидная структура, состоящая из объектов JavaScript, которые соответствуют узлам HTML. Для дальнейшего изучения DOM, прочитайте Что такое DOM? в переводе Frontender Magazine. Статья даст вам простое и понятное объяснение понятия DOM.

Инспектируем DOM

JavaScript взаимодействует с DOM и изменяет или обновляет его. Вот пример, в котором мы выбираем HTML элемент и изменяем его содержимое:

var container = document.getElementById(“container”);container.innerHTML = 'New Content!';

Не волнуйтесь, что это какой-то очень элементарный пример. Вы можете сделать гораздо больше этого при помощи манипуляций с DOM. Чтобы узнать больше о использовании JavaScript для взаимодействий с DOM, пройдите в раздел Руководство по DOM в документации MDN.

• Введение в DOM
• Events
• Examples of web and XML development using the DOM
• How to create a DOM tree
• Locating DOM elements using selectors

Опять же, сосредоточьтесь на понимании концепции, минуя синтаксис. У вас должны быть ответы на следующие вопросы:

• Что такое DOM?
• Как обратится к элементам?
• Как добавить обработчик событий?
• Как изменить свойства узла DOM?

Для получения полного списка доступных манипуляций с DOM при помощи JavaScript, обратитесь к JavaScript Functions and Helpers от PlainJS. Этот сайт содержит объяснения того, как, например, менять свойства стилей HTML-элементов или обрабатывать события клавиатуры. Если вы хотите копнуть глубже, то вы всегда можете прочитать раздел о DOM в книге Выразительный JavaScript.

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.

Эксперимент 4

Dieter Rams Clock

Эксперимент 4 объединяет все что вы узнали о HTML и CSS, а так же знания по JavaScript. В рамках этого задания вы создадите часы с собственным дизайном и сделаете их интерактивными при помощи JavaScript. Перед началом я рекомендую прочитать Decoupling Your HTML, CSS, and JavaScript с целью изучения основных соглашений по именованию классов в случаях, когда в разработке участвует JavaScript. Я так же подготовил список примеров на CodePen. Вы можете использовать их как шпаргалки для этого эксперимента. Если нужно больше — поищите по слову clock на CodePen.

• Flat Clock
• Настенные часы на jQuery
• Fancy Clock
• Retro Clock
• Простые часы на JavaScript

Есть два способа выполнения этого задания. Можете начать с проектирования и создания макета на HTML и CSS, а затем добавить JavaScript. Или вы можете сначала написать логику на JavaScript, а затем перейти к разметке и стилям. Вы можете использовать jQuery или чистый JavaScript.

JavaScript-фреймворки

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

Я не буду описывать все JavaScript-фреймворки. Тем не менее вот краткий перечень основных: Angular, React + Flux, Ember, Aurelia, Vue и Meteor. Вам не нужно изучать их все. Выберите один и научитесь работать с ним. Не пытайтесь угнаться за всеми новинками. Вместо этого постарайтесь понять основную философию разработки и принципы, на которых строятся фреймворки.

Frontend-разработчик

Чем занимается?

Frontend-разработчик отвечает за красивые и понятные интерфейсы. Он делает так, чтобы статичный макет превратился в привлекательную и функциональную страницу в интернете, на которой можно нажимать кнопки, покупать товары и т.д. При этом страница будет правильно отображаться во всех браузерах и на разных устройствах.

Технический стек

Чтобы быть успешным frontend-разработчиком, нужно освоить HTML, CSS и JavaScript. На HTML пишут «скелет» страницы, на CSS настраивают цвета, шрифты и ее внутреннее наполнение. После освоения статичных веб-страниц разработчик учится языку JavaScript, который позволяют добавить на сайт динамичные элементы: слайдеры, калькуляторы, анимации.

Рабочий день

Типичный рабочий день frontend-разработчика начинается со встречи или звонка, на котором обсуждаются задачи, приоритеты и проблемы. Затем он скачивает последние версии кода с GitHub (сервис для размещения проектов и совместной работы над ними), просматривает изменения и комментарии и начинает работать. Помимо этого, ему нужно изучать тематические ресурсы, чтобы быть в курсе современных трендов.

Карьерный рост

Начальный уровень в разработке — стажеры (trainee). Это начинающие специалисты, которые закончили курсы и получили базовые знания. Их зарплаты, как правило, не поднимаются выше 30 тыс. руб.

Следующий уровень — джуниор-разработчики, они обладают небольшим опытом работы с проектами и часто советуются с более опытными коллегами. Зарплата джуниор-разработчика в Москве начинается с 60 тыс. руб.

Мидл frontend-разработчик — это опытный человек, способный самостоятельно и качественно решить большинство задач. Его зарплата обычно начинается от 100 тыс. руб.

Синьор frontend-разработчик обладает большим опытом, самостоятельно принимает решения о разработке, имеет свое видение архитектуры проекта и может его обосновать. Помимо этого, он решает менеджерские задачи, участвует в совещаниях с другими отделами.

Курс 

Frontend-разработчик

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

Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

Личные качества

Frontend-разработчику полезно быть перфекционистом, так как часто требуется реализовывать замысел дизайнера «пиксель в пиксель». Во frontend-разработке нельзя стоять на месте, она похожа на бег вверх по эскалатору, который едет вниз: постоянно появляются новые инструменты и меняются тренды. Это интересно, но иногда утомительно. Для крупных проектов актуальна командная работа, способность находить общий язык с людьми. 

Алексей Видякин, frontend-разработчик: «Я работаю frontend-разработчиком в сфере рекламы и маркетинга. Больше всего в работе мне нравится, что можно видеть результат сразу же после написания кода. HTML, CSS и JavaScript позволяют визуализировать свои или дизайнерские идеи, сделать интерфейс приложения удобным и понятным для пользователя».

Что должен знать Frontend-разработчик

Язык HTML. Это «основа основ» без которой вообще сложно работать с сайтами. Если вы хотите стать фронтенд-разработчиком, вам надо хорошо понимать, какой HTML-тег и за что отвечает, как связывать HTML с другими языками программирования, например, с джава скриптами.

Язык CSS. Практически на всех курсах CSS преподается вместе с HTML. CSS – это система стилей, за счет которых сайты смотрятся красиво.

К этим двум языкам добавляется еще опыт работы в редакторах, которые позволяют программировать быстрее и автоматизировать часть операций.

Третий фундаментальный элемент – Джава Скрипт. Это, наверное, самое сложное и самое ценное во фронтенде. Джава скрипты помогают изменять HTML коды так, чтобы решать проблемы пользователя.

Например, есть какая-то база с данными о людях: их пол, возраст, фамилия и имя. Вам надо посмотреть всех людей, которым больше 18 лет – вы указываете этот возраст, нажимаете на кнопочку и на сайте запускается джава скрипт, который «вынимает» нужных людей из базы и показывает вам.

Если вам надо отдельно выгрузить мужчин и женщин – вы нажимаете еще на одну кнопочку – запускаете еще один джава скрипт, который выгружает сначала всех мужчин, а потом всех женщин.

Что читать для знакомства с фронтендом и бэкендом

Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — frontend или backend — в вашем случае.

Front-end

HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств — Фрейн Бен

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

JavaScript. Шаблоны – Стоян Стефанов

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

CSS. Каскадные таблицы стилей. Подробное руководство – Эрик А. Мейер

В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.

Accessibility for everyone – Laura Kalbag

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

Back-end

Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов – Давид Скляр

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Ruby on Rails для начинающих. Изучаем разработку веб-приложений на основе Rails – Майкл Хартл

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby

Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.. Django 2.1

Практика создания веб-сайтов на Python – Владимир Дронов

Django 2.1. Практика создания веб-сайтов на Python – Владимир Дронов

Как и в прошлой книге, для чтения этой книги необходимо хотя бы на базовом уровне владеть связкой HTML-CSS-JavaScript и Python. Книга примечательна тем, что содержит минимум воды и большое разнообразие примеров.

Spring в действии – Крейг Уоллс

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Робин Никсон

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

Умения, необходимые для frontend разработки

Хочешь статью от авторов проекта?
Предлагай темы! Мы напишем!
Предложить тему

Все на frontend разработке построено с использованием HTML, CSS и клиентских скриптов, таких как JavaScript, — основных элементов интерфейсной разработки. Разработчик интерфейсов объединяет мир дизайна и технологий, воплощает дизайн в жизнь и внедряет frontend в современном, привлекательном способе для взаимодействия с пользователем.

Как правило, услуги frontend веб-разработчика включают:

• Пользовательский интерфейс
• Приведение концепции дизайнера в жизнь с помощью HTML, CSS и JavaScript
• Производство, модификация и обслуживание веб-сайтов и пользовательских интерфейсов веб-приложений
• Создание инструментов, которые улучшают взаимодействие пользователей с вашим сайтом в любом браузере
• Внедрение адаптивного дизайна для мобильных версий сайтов
• Использование своего frontend опыта, взаимодействие с API и многое другое
• Поддержание управления документооборотом программного обеспечения с помощью инструмента управления проектами, такого как GitHub и средств запуска задач, таких как Grunt and Gulp Консалтинг по передовым методам SEO
• Тестирование сайта во время разработки для удобства использования и исправления любых ошибок

Что же мы сделали?

1. Во-первых, мы разработали и опубликовали три модуля, при этом нам даже не пришлось думать о компиляторе TS, WebPack, NPM или любых других инструментах, за исключением Bit. Именно поэтому я выбрал Bit и поэтому считаю его таким полезным инструментом. Он абстрагировал все шаги, необходимые для создания трёх компонентов, даже когда они работают в трёх разных средах.
2. Мы работали с локальной зависимостью, которая должна быть внешней зависимостью, и даже не заметили разницы. Каждое обновление, вносимое в локальную версию компонента с типами BFF, подхватывалось другими двумя компонентами, и нам не приходилось заново выполнять весь процесс экспорта.

одним