Веб-разработка давно стала многоуровневым процессом с иерархическим разделением на две части: back-end и front-end. Back-end — это код, выполняемый на сервере, откуда загружается сайт или веб-приложение, а также их базы данных и алгоритмы работы. Front-end — это клиентская сторона пользовательского интерфейса к программно-аппаратной части. Термины появились в результате разделения ответственности между внутренней реализацией и внешним представлением.
Прежде всего это исполняемый в браузере код, который отвечает за отображение веб-приложения или сайта, работоспособность всех элементов на разных устройствах, то есть на клиентах. Для наглядности щёлкните правой кнопкой мыши на этой странице и выберите в контекстном меню «Просмотр кода страницы» (или что-то похожее, если читаете не в Chrome) — вы увидите исходный код. Вот благодаря ему браузер понимает, обрабатывает и как положено передаёт вам данные: текст, шрифты, цвета, картинки, меню, кнопки, формы, скрипты. Вы можете изучить каждый элемент подробнее, если щёлкните правой кнопкой мыши по нему и выберете «Просмотреть код».
Фронтенд многообразен, так что давайте перейдём от нашего сайта к другим:
Фронтенд постоянно взаимодействует с бэкендом, так как они работают по архитектуре «клиент — сервер». Устройство-клиент через фронтенд отправляет пользовательский запрос на сервер; сервер обрабатывает запрос и выдаёт кодированные данные как результат; фронтенд их получает и преобразовывает в понятный вид, который клиент отобразит пользователю.
В общем, фронтенд — это всё, что вы сами видите в Интернете, а также то, что будут видеть пользователи вашего сайта или приложения, когда будут взаимодействовать с ним. Только сначала надо найти frontend-разработчика, который его создаст.
Эти специалисты разрабатывают клиентскую часть веб-ресурсов. До середины 2000-х их работа была нетрудной, поскольку тогда все создавали простые сайты, которые нуждались лишь в правильной вёрстке. Достаточно было перенести нарисованный дизайн в код с помощью языков HTML и CSS. С наступлением Веба 2.0 сайты эволюционировали — почти все стали динамическими, получили движки, украсились интерактивными элементами. Даже сайты-визитки и домашние странички модернизировались. Так появился спрос на разработку сложных проектов, а верстальщики стали переквалифицироваться в разработчиков фронтенда.
Однако не все верстальщики пошли изучать JavaScript и PHP. Некоторые остаются узкими специалистами, продолжая нарезать PSD на элементы и создавать стили. Поэтому не стоит путать с ними фронтенд-разработчиков, которые тоже хорошо владеют вёрсткой, но вряд ли возьмутся оказывать такую услугу отдельно, а, скорее всего, направят к профессиональному верстальщику. Для них это скучно или дёшево, они же не зря повышали квалификацию. Но при необходимости, например, при комплексной разработке, фронтенд-разработчики могут как сверстать макет с нуля, так и переделать что-то в заказанной на стороне вёрстке, подогнать шаблон к CMS.
Когда веб-приложения стали мощнее и функциональнее, фронтенд-разработчики стали создавать для них расширенные пользовательские интерфейсы (UI). К ним относятся личные кабинеты с привязкой соцпрофилей, формы связи с поддержкой, формы оплаты онлайн, функции для людей с ограниченными возможностями и прочее. Всё это должно работать визуально правильно, а главное, решать задачи пользователей. Если они не будут удовлетворены, то ухудшится опыт взаимодействия с веб-приложением, он же пользовательский опыт (UX). Владельцы проектов наконец-то стали настолько ценить пользователей, что это привело к появлению специализации UI/UX-дизайнер. Так что разработчик фронтенда чаще всего выступает дизайнером-проектировщиком интерфейса, хотя в крупных компаниях эту обязанность возлагают на UI/UX-дизайнера, а разработчик больше программирует.
Фронтенд-разработчики также занимаются оптимизацией и рефакторингом JavaScript-кода. Потребность в этом возникает из-за развития и обновлений браузеров, под которые приходится быстро адаптировать код. Иногда они проводят тестирование и отладку JS-кода, хотя лучше поручать это тестировщикам. Особенно если код писал единственный в компании фронтенд-разработчик, то выявить его ошибки быстрее и внимательнее сможет только другой программист.
Получается, профессиональные фронтенд-разработчики — мастера на все руки. Они способны как создать часть или весь фронтенд с нуля, так и соединить части, заказанные у узких специалистов. В итоге благодаря их стараниям ваше веб-приложение будет удобным, функциональным, красивым и оживлённым.
Каждая часть сайта или веб-приложения создаётся на разных языках. Здесь базовыми выступают языки разметки и стилей, на которых пишется исходный код веб-страниц. Их можно условно назвать простыми языками, так как даже новички способны быстро освоить их. Вернее, вынуждены быстро освоить, ведь без них дальше в веб-разработке не продвинуться (хотя можно остаться в вёрстке). Тогда следующей ступенью, более сложной или расширенной, будем считать языки программирования.
Начнём с 3 китов, на которых держится Всемирная паутина. Любой фронтенд-разработчик обязан знать эти 3 языка:
HTML создал Тим Бернерс-Ли, документ с его описанием он опубликовал в 1991 году. Организация IETF признала его спецификацию в 1993-м, а в 1995-м доработала и выпустила спецификацию HTML 2.0, которая впервые стала стандартом Интернета. С 1996-го язык поддерживается консорциумом W3C. Текущая версия — HTML5 — используется как стандарт разработчиками и поддерживается браузерами с 2013-го.
CSS создал Хокон Виум Ли, концепцию он предложил в 1994 году. Его поддержал Берт Бос из W3C, став соавтором стандарта CSS1, который W3C сделал рекомендацией в 1996-м. Текущая версия — CSS2.1 — используется как рекомендованный стандарт с 2011-го. Однако разработчики и браузеры стараются поддерживать новую разрабатываемую спецификацию — CSS3. Она позволяет создавать анимированные элементы без использования JS, тени, сглаживание, линейные и радиальные градиенты.
XML создала рабочая группа из 11 членов во главе с техлидом Джеймсом Кларком. Приняв основные решения в ходе консенсуса, группа опубликовала черновик спецификации XML в 1996 году. Чистовик составили соредакторы Майкл Сперберг-Маккуин и Тим Брэй в 1997-м. В 1998-м XML 1.0 стал рекомендацией W3C. Та версия, а точнее её 5-я редакция от ноября 2008, до сих пор актуальна.
А вот что не обязательно, но может понадобиться в каких-то проектах, больше завязанных на бэкенд или вёрстку:
Времена, когда исходный код страниц писали в «Блокноте», а потом сохраняли текстовый документ с расширением .html, давно прошли. Сегодня фронтенд-разработчики облегчают себе работу с помощью HTML/CSS-фреймворков. Среди них самыми популярными в 2021 году считаются:
Выбор языков программирования для фронтенда в разы скуднее, чем для бэкенда. До 2010-х годов он вообще отсутствовал — везде применялся только JavaScript. Альтернативы ему стали появляться в последние 4 года, причём большинство из них всё равно ориентированы на JavaScript, расширяя его синтаксис и возможности, а также компилируя в него свой код. Параллельно во фронтенде используется PHP, но лишь местами, а так этот язык нужен преимущественно в бэкенде.
JavaScript (JS) — мультипарадигмальный язык, поддерживающий объектно-ориентированный, императивный и функциональный стили. Обычно он становится первым языком программирования, на котором новички учатся делать страницы интерактивными, а потом и разрабатывать фронтенд. Этот язык нетрудно освоить, так как его изначально сделали понятным даже непрограммистам. Благодаря этому верстальщики и веб-дизайнеры постепенно вникают в него, даже если не собираются профессионально программировать на нём.
JavaScript создал Брендан Эйх, когда пришёл работать в Netscape Communications. Корпорация наняла его для того, чтобы он внедрил язык Scheme в браузер Netscape Navigator, в который понадобилось добавить сценарный язык. Вскоре руководители передумали и поставили Эйху задачу разработать новый язык с синтаксисом, больше похожим на Java, чем на Scheme или другие сценарные языки. Из-за этого в официальном релизе браузера от декабря 1995 новый язык назывался JavaScript, хотя в бета-версии от сентября был представлен как LiveScript.
Несмотря на то, что одни считают JS уже архаичным, а другие пытаются заменить его новыми функциями HTML и CSS, благодаря этому языку многие до сих пор оживляют статичные страницы, превращая их в динамические или в полноценные веб-приложения. Он позволяет делать простые вещи лёгкими способами, проводить полную интеграцию с HTML и CSS.
JS обеспечивает взаимодействие пользователя с фронтендом: обрабатывает перемещения курсора, нажатия кнопок и клавиш, реагирует на них, выполняя запрограммированные действия на странице или изменяя поведение её элементов. Также он обеспечивает взаимодействие фронтенда с бэкендом: посылает запросы на сервер, получает от него данные, причём делает всё это без перезагрузки страницы.
Программы на JS называются скриптами, они подключаются к HTML в браузере и выполняются при загрузке страниц. А с помощью интерпретатора скрипты можно запустить где угодно, так что JS может выполняться за пределами браузеров. Например, на нём пишут мобильные приложения, виджеты для рабочего стола, макросы для офисных программ, сценарии для Photoshop, скрипты космических полётных заданий.
Для JavaScript тоже давно придуманы фреймворки и библиотеки, облегчающие написание кода или достижение кроссбраузерности при разработке веб-приложений. Их так много, что даже ходит шутка, будто каждый месяц появляется новый JS-фреймворк. Вот топ-10 популярных фреймворков и библиотек, ранжированных по убыванию процента использования при разработке на JS (данные stateofjs.com за 2020 год):
После JavaScript Брендан Эйх ещё создал язык ECMAScript. Организация Ecma International стандартизировала его спецификацию в 1997 году. Он стал основой для создания других скриптовых языков: в 1996-м Microsoft реализовал сценарный язык JScript, а в 1998-м Macromedia реализовала объектно-ориентированный язык ActionScript. Однако первый был рассчитан на использование в продуктах Microsoft (Windows, ASP, .NET). А вот второй немного конкурировал с JavaScript, сделав трендовыми приложения, сайты, игры на Flash. На нём делали красивые анимированные версии сайтов в 2000-е, но с развитием браузеров, смартфонов, HTML и CSS проигрыватель Flash Player стал не нужен, да и флэш-контент уже никого не привлекал. В декабре 2020 Adobe, которая приобрела Macromedia в 2005-м, прекратила поддержку Adobe Flash.
В 2012 году Microsoft выпустил мультипарадигмальный язык TypeScript. Его разработал инженер-программист Андерс Хейлсберг на основе стандарта ECMAScript 5. Этот ведущий архитектор Microsoft ещё известен как создатель Turbo Pascal, Delphi и C#. TypeScript позиционируется как язык для разработки веб-приложений, расширяющий возможности JavaScript. Он обратно совместим с JS и компилируется в него, так что такое приложение можно запускать в любом браузере или совместно с серверной платформой Node.js.
После Flash теперь TypeScript пытается составить конкуренцию JS в последнее десятилетие. Многие джаваскрипт- и фронтенд-разработчики с отзывами уже познакомились с ним и попробовали писать скрипты на нём. Этот навык помогает им конкурировать на рынке труда. А вот ещё какие языки вы можете встретить в резюме и отметить, что будущий работник способен расти «вширь»:
Во всех этих языках можно компилировать скрипты и приложения как в нативный код, так и в JavaScript.
И последний сильный конкурент JS — WebAssembly. Этот язык программирования низкого уровня создала группа разработчиков из W3C, Mozilla, Microsoft, Google и Apple в 2015 году. Он уже поддерживается браузерами этих IT-корпораций, активно участвующих в его развитии.
Нанять фронтенд-разработчиков с опытом непросто, несмотря на то, что их на рынке труда и услуг много. Одни работодатели ищут их на биржах фриланса, другие — публикуют вакансии и перебирают резюме на HR-порталах, а кто-то передаёт всю разработку под ключ сторонней команде. Рассмотрим каждый вариант, чтобы вы могли выбрать подходящий.
Заказчик должен сначала найти фронтенд-разработчиков на биржах услуг, таких как Fiverr, Freelance.Habr, Freelancehunt, Upwork, Weblancer. Затем изучить их портфолио, почитать отзывы тех, кто с ними сотрудничал. Дальше нужно обсудить предстоящую работу, чётко обозначить задачи или показать подробное ТЗ, договориться о сроке сдачи. После этого уже можно оформить заказ через биржу, указав в нём все оговорённые условия и требования. Хотя можно сразу создать заказ, а потом обрабатывать поступающие заявки по тому же принципу.
Преимущества:
Недостатки:
Работодатель должен открыть вакансию на порталах для поиска и подбора персонала, таких как Career.Habr, HeadHunter, Indeed, Monster, SuperJob. Затем рассматривать заявки и резюме соискателей с опытом фронтенд-разработки. А можно устроить хедхантинг на тех же порталах или на LinkedIn. Дальше нужно провести собеседование, где кандидат расскажет подробнее о себе и узнает больше о своей роли в вашей компании. В общем, типичное трудоустройство со всеми нюансами офлайна.
Преимущества:
Недостатки:
Это среднее между первыми двумя способами. Привлекая к проекту сформированную команду frontend-разработчиков удалённо, вы получаете в распоряжение штат из временных фрилансеров. Причём необязательно всех сразу, а только необходимый в данный момент состав, с возможностью в дальнейшем подключить того, кто на первых этапах был не нужен. В сторонней команде фронтенд-разработчики уже проверены тимлидом, у них есть совместный опыт, так что они не саботируют коллег, а трудятся слаженно.
Преимущества:
Недостаток: если сравнивать с фрилансерами-одиночками, то здесь стоимость фронтенд-разработчиков получается выше, хотя всё равно не настолько дорого, как содержать штатных сотрудников.
На фриланс-биржах фронтендеры указывают минимальный размер сдельной оплаты труда, от которого они отталкиваются: от 800 ₽, 9 € или 10 $. В этом случае заказчикам трудно ориентироваться в стоимости услуг фронтенд-разработки, потому что за такие деньги исполнители могут сделать только что-нибудь несущественное, например, предварительно проконсультировать или составить план.
Рассчитываться с внештатными удалёнными фронтенд-разработчиками намного легче, когда оплата почасовая. Стоимость часа работы у них фиксированная и на протяжении года не меняется, например: 4000 ₽, 45 € или 50 $.
Для полноты картины нанимателям следует знать зарплаты, которые другие компании готовы платить штатным сотрудникам. Они существенно разнятся в зависимости от требуемого опыта или уровня. Рекрутеры делят кандидатов по старинке — по опыту работы, измеряемому в годах. Сами разработчики предпочитают делиться на junior, middle, senior, lead — условные уровни, которым соответствует набор умений и навыков, стек технологий, а также самостоятельность. Если эти подходы попытаться совместить, то получится примерно так:
На российском рынке труда ИТ-сферы присутствует значительная разница между зарплатами в Москве и в других регионах. Мы собрали вакансии для 3 уровней квалификации на superjob.ru и zarplata.ru, рассортировали по ним и по городам (Москва | остальные города). Затем высчитали среднюю зарплату внутри каждой из 6 групп. Вот сколько российские компании готовы ежемесячно платить фронтенд-разработчику (данные за март 2022):
Уровень квалификации | Средняя ежемесячная з/п в Москве | Средняя ежемесячная з/п в других городах |
---|---|---|
Джуниор | 98 000 RUB | 73 000 RUB |
Мидл | 150 000 RUB | 135 000 RUB |
Сеньор | 222 000 RUB | 200 000 RUB |
На британском рынке труда тоже присутствует разница между зарплатами в Лондоне и в других регионах, округах и графствах. Мы собрали вакансии для 3 уровней квалификации на reed.co.uk и indeed.co.uk, рассортировали по ним и по городам (Лондон | остальные города). Затем высчитали среднюю зарплату внутри каждой из 6 групп. Вот сколько британские компании готовы ежегодно платить фронтенд-разработчику (данные за март 2022):
Уровень квалификации | Средняя годовая з/п в Лондоне | Средняя годовая з/п в других городах |
---|---|---|
Junior | 30 000 GBP | 27 000 GBP |
Middle | 61 000 GBP | 46 000 GBP |
Senior | 67 000 GBP | 59 000 GBP |