Нанять frontend-разработчика

Веб-разработка давно стала многоуровневым процессом с иерархическим разделением на две части: back-end и front-end. Back-end — это код, выполняемый на сервере, откуда загружается сайт или веб-приложение, а также их базы данных и алгоритмы работы. Front-end — это клиентская сторона пользовательского интерфейса к программно-аппаратной части. Термины появились в результате разделения ответственности между внутренней реализацией и внешним представлением.

Что собой представляет front-end

Прежде всего это исполняемый в браузере код, который отвечает за отображение веб-приложения или сайта, работоспособность всех элементов на разных устройствах, то есть на клиентах. Для наглядности щёлкните правой кнопкой мыши на этой странице и выберите в контекстном меню «Просмотр кода страницы» (или что-то похожее, если читаете не в Chrome) — вы увидите исходный код. Вот благодаря ему браузер понимает, обрабатывает и как положено передаёт вам данные: текст, шрифты, цвета, картинки, меню, кнопки, формы, скрипты. Вы можете изучить каждый элемент подробнее, если щёлкните правой кнопкой мыши по нему и выберете «Просмотреть код».

Фронтенд многообразен, так что давайте перейдём от нашего сайта к другим:

• Наш сайт работает на системе управления содержимым (CMS), как и большинство сайтов, размещающих у себя контент, таких как СМИ и блоги. Типичная CMS состоит из 2 компонентов: приложение доставки контента, компилирующее фронтенд для посетителей; приложение для управления контентом — это бэкенд для посетителей и одновременно фронтенд для администраторов или пользователей, имеющих права добавлять, изменять, удалять контент.
• Интернет-магазины и онлайн-сервисы, где люди заказывают товары или услуги, тоже состоят из 2 компонентов: форма заказа — фронтенд для покупателей; панель обработки заказов — бэкенд для покупателей и одновременно фронтенд для работников.
• Сайты для поиска работы и работников, раз уж мы пишем о найме разработчиков, имеют 3 разных фронтенда: для соискателей, для работодателей, для администраторов/модераторов, проверяющих резюме и вакансии.
• Мобильные приложения, которые мы тоже разрабатываем, чаще всего целиком представляют собой фронтенд. Их бэкенд содержится не в приложении, а на сервере, в отличие от десктопных программ.

Фронтенд постоянно взаимодействует с бэкендом, так как они работают по архитектуре «клиент — сервер». Устройство-клиент через фронтенд отправляет пользовательский запрос на сервер; сервер обрабатывает запрос и выдаёт кодированные данные как результат; фронтенд их получает и преобразовывает в понятный вид, который клиент отобразит пользователю.

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

Чем занимаются frontend-разработчики

Эти специалисты разрабатывают клиентскую часть веб-ресурсов. До середины 2000-х их работа была нетрудной, поскольку тогда все создавали простые сайты, которые нуждались лишь в правильной вёрстке. Достаточно было перенести нарисованный дизайн в код с помощью языков HTML и CSS. С наступлением Веба 2.0 сайты эволюционировали — почти все стали динамическими, получили движки, украсились интерактивными элементами. Даже сайты-визитки и домашние странички модернизировались. Так появился спрос на разработку сложных проектов, а верстальщики стали переквалифицироваться в разработчиков фронтенда.

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

Когда веб-приложения стали мощнее и функциональнее, фронтенд-разработчики стали создавать для них расширенные пользовательские интерфейсы (UI). К ним относятся личные кабинеты с привязкой соцпрофилей, формы связи с поддержкой, формы оплаты онлайн, функции для людей с ограниченными возможностями и прочее. Всё это должно работать визуально правильно, а главное, решать задачи пользователей. Если они не будут удовлетворены, то ухудшится опыт взаимодействия с веб-приложением, он же пользовательский опыт (UX). Владельцы проектов наконец-то стали настолько ценить пользователей, что это привело к появлению специализации UI/UX-дизайнер. Так что разработчик фронтенда чаще всего выступает дизайнером-проектировщиком интерфейса, хотя в крупных компаниях эту обязанность возлагают на UI/UX-дизайнера, а разработчик больше программирует.

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

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

Какие языки используют frontend-разработчики

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

Языки разметки и стилей

Начнём с 3 китов, на которых держится Всемирная паутина. Любой фронтенд-разработчик обязан знать эти 3 языка:

1. HTML (HyperText Markup Language) — язык гипертекстовой разметки, или язык для структурирования и представления содержимого страниц. Разработчики и верстальщики используют его для выстраивания структуры и форматирования контента, чтобы браузеры понимали, где отображать основные и подключаемые элементы страниц. С его помощью созданы все существующие сайты.

   HTML создал Тим Бернерс-Ли, документ с его описанием он опубликовал в 1991 году. Организация IETF признала его спецификацию в 1993-м, а в 1995-м доработала и выпустила спецификацию HTML 2.0, которая впервые стала стандартом Интернета. С 1996-го язык поддерживается консорциумом W3C. Текущая версия — HTML5 — используется как стандарт разработчиками и поддерживается браузерами с 2013-го.

2. CSS (Cascading Style Sheets) — каскадные таблицы стилей, или формальный язык описания и стилизации внешнего вида страниц. Разработчики и верстальщики используют его для настройки и оформления всех элементов страниц, которые уже размечены на HTML. Через описание стилей браузеры понимают, какие шрифты и цвета отображать, где располагать определённые элементы, какой величины делать интервалы и отступы.

   CSS создал Хокон Виум Ли, концепцию он предложил в 1994 году. Его поддержал Берт Бос из W3C, став соавтором стандарта CSS1, который W3C сделал рекомендацией в 1996-м. Текущая версия — CSS2.1 — используется как рекомендованный стандарт с 2011-го. Однако разработчики и браузеры стараются поддерживать новую разрабатываемую спецификацию — CSS3. Она позволяет создавать анимированные элементы без использования JS, тени, сглаживание, линейные и радиальные градиенты.

3. XML (eXtensible Markup Language) — расширяемый язык разметки, или средство описания документов. Его используют для передачи данных из СУБД парсерам, агрегаторам, поисковым ботам. Чаще всего применяется в интернет-магазинах, новостных и блоговых CMS. С его помощью генерируют карту ссылок sitemap.xml для большинства сайтов, а также ленту новостных анонсов в форматах RSS или Atom.

   XML создала рабочая группа из 11 членов во главе с техлидом Джеймсом Кларком. Приняв основные решения в ходе консенсуса, группа опубликовала черновик спецификации XML в 1996 году. Чистовик составили соредакторы Майкл Сперберг-Маккуин и Тим Брэй в 1997-м. В 1998-м XML 1.0 стал рекомендацией W3C. Та версия, а точнее её 5-я редакция от ноября 2008, до сих пор актуальна.

А вот что не обязательно, но может понадобиться в каких-то проектах, больше завязанных на бэкенд или вёрстку:

• язык разметки Haml;
• динамический язык стилей Less;
• сценарный язык стилей Sass;
• семейство языков XSL.

HTML/CSS-фреймворки

Времена, когда исходный код страниц писали в «Блокноте», а потом сохраняли текстовый документ с расширением .html, давно прошли. Сегодня фронтенд-разработчики облегчают себе работу с помощью HTML/CSS-фреймворков. Среди них самыми популярными в 2021 году считаются:

• Bootstrap;
• Bulma;
• Foundation;
• Materialize CSS;
• Pure CSS;
• Semantic UI;
• Skeleton;
• Tailwind CSS;
• UIKit.

Языки программирования

Выбор языков программирования для фронтенда в разы скуднее, чем для бэкенда. До 2010-х годов он вообще отсутствовал — везде применялся только JavaScript. Альтернативы ему стали появляться в последние 10 лет, причём большинство из них всё равно ориентированы на JavaScript, расширяя его синтаксис и возможности, а также компилируя в него свой код. Параллельно во фронтенде используется PHP, но лишь местами, а так этот язык нужен преимущественно в бэкенде.

JavaScript

JavaScript (JS) — мультипарадигмальный язык, поддерживающий объектно-ориентированный, императивный и функциональный стили. Обычно он становится первым языком программирования, на котором новички учатся делать страницы интерактивными, а потом и разрабатывать фронтенд. Этот язык нетрудно освоить, так как его изначально сделали понятным даже непрограммистам. Благодаря этому верстальщики и веб-дизайнеры постепенно вникают в него, даже если не собираются профессионально программировать на нём.

JavaScript создал Брендан Эйх, когда пришёл работать в Netscape Communications. Корпорация наняла его для того, чтобы он внедрил язык Scheme в браузер Netscape Navigator, в который понадобилось добавить сценарный язык. Вскоре руководители передумали и поставили Эйху задачу разработать новый язык с синтаксисом, больше похожим на Java, чем на Scheme или другие сценарные языки. Из-за этого в официальном релизе браузера от декабря 1995 новый язык назывался JavaScript, хотя в бета-версии от сентября был представлен как LiveScript.

Несмотря на то, что одни считают JS уже архаичным, а другие пытаются заменить его новыми функциями HTML и CSS, благодаря этому языку многие до сих пор оживляют статичные страницы, превращая их в динамические или в полноценные веб-приложения. Он позволяет делать простые вещи лёгкими способами, проводить полную интеграцию с HTML и CSS.

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

Программы на JS называются скриптами, они подключаются к HTML в браузере и выполняются при загрузке страниц. А с помощью интерпретатора скрипты можно запустить где угодно, так что JS может выполняться за пределами браузеров. Например, на нём пишут мобильные приложения, виджеты для рабочего стола, макросы для офисных программ, сценарии для Photoshop, скрипты космических полётных заданий.

Фреймворки и библиотеки для JavaScript

Для JavaScript тоже давно придуманы фреймворки и библиотеки, облегчающие написание кода или достижение кроссбраузерности при разработке веб-приложений. Их так много, что даже ходит шутка, будто каждый месяц появляется новый JS-фреймворк. Вот топ-10 популярных фреймворков и библиотек, ранжированных по убыванию процента использования при разработке на JS (данные stateofjs.com за 2020 год):

1. React (библиотека) — 80%.
2. Axios (библиотека) — 60%.
3. Lodash (библиотека) — 58%.
4. AngularJS (фреймворк) — 56%.
5. Moment (библиотека) — 51%.
6. Vue.js (фреймворк) — 49%.
7. date-fns (библиотека) — 31%.
8. RxJS (библиотека) — 25%.
9. jQuery (библиотека) — 22%.
10. Svelte (фреймворк) — 15%.

Альтернативы JavaScript

После 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 в последнее десятилетие. Многие джаваскрипт- и фронтенд-разработчики с отзывами уже познакомились с ним и попробовали писать скрипты на нём. Этот навык помогает им конкурировать на рынке труда. А вот ещё какие языки вы можете встретить в резюме и отметить, что будущий работник способен расти «вширь»:

• CoffeeScript — мультипарадигмальный язык, созданный Джереми Ашкенасом в 2009-м;
• Dart — объектно-ориентированный язык, созданный Гуглом в 2011-м;
• Elm — функциональный язык, созданный Эваном Чаплицким в 2012-м;
• PureScript — функциональный язык, созданный Филом Фриманом в 2013-м.

Во всех этих языках можно компилировать скрипты и приложения как в нативный код, так и в JavaScript.

И последний сильный конкурент JS — WebAssembly. Этот язык программирования низкого уровня создала группа разработчиков из W3C, Mozilla, Microsoft, Google и Apple в 2015 году. Он уже поддерживается браузерами этих IT-корпораций, активно участвующих в его развитии.

Что делать, если нужен frontend-разработчик

Нанять фронтенд-разработчиков с опытом непросто, несмотря на то, что их на рынке труда и услуг много. Одни работодатели ищут их на биржах фриланса, другие — публикуют вакансии и перебирают резюме на HR-порталах, а кто-то передаёт всю разработку под ключ сторонней команде. Рассмотрим каждый вариант, чтобы вы могли выбрать подходящий.

Найти фрилансера

Заказчик должен сначала найти фронтенд-разработчиков на биржах услуг, таких как Fiverr, Freelance.Habr, Freelancehunt, Upwork, Weblancer. Затем изучить их портфолио, почитать отзывы тех, кто с ними сотрудничал. Дальше нужно обсудить предстоящую работу, чётко обозначить задачи или показать подробное ТЗ, договориться о сроке сдачи. После этого уже можно оформить заказ через биржу, указав в нём все оговорённые условия и требования. Хотя можно сразу создать заказ, а потом обрабатывать поступающие заявки по тому же принципу.

Преимущества:

• низкая стоимость услуг frontend-разработчиков из-за демпинга начинающими фрилансерами;
• широкий выбор frontend-разработчиков с отзывами и солидным портфолио.

Недостатки:

• базовые услуги кажутся дешёвыми, потому что «скидки» заложены в стоимость дополнительных услуг, а они дорогие;
• фрилансеры работают одновременно над несколькими заказами frontend-разработки, не концентрируя силы на одном;
• исполнителей трудно контролировать, в неожиданный момент они могут пропасть надолго или насовсем;
• чуть более ответственные фрилансеры сдают работу в сыром виде, чтобы успеть к дедлайну, а затем просят время на доработку.

Нанять сотрудника в штат

Работодатель должен открыть вакансию на порталах для поиска и подбора персонала, таких как Career.Habr, HeadHunter, Indeed, Monster, SuperJob. Затем рассматривать заявки и резюме соискателей с опытом фронтенд-разработки. А можно устроить хедхантинг на тех же порталах или на LinkedIn. Дальше нужно провести собеседование, где кандидат расскажет подробнее о себе и узнает больше о своей роли в вашей компании. В общем, типичное трудоустройство со всеми нюансами офлайна.

Преимущества:

• упрощённый контроль сотрудника, который всегда на виду и сам ответственно относится к работе;
• одна ставка на любой объём разработки в пределах обязанностей и рабочего времени сотрудника.

Недостатки:

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

Аутсорсинг frontend-разработки компании

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

Преимущества:

• почасовая оплата frontend-разработчиков, задействованных для конкретных задач;
• контроль за командой frontend-разработки обеспечивается её лидером;
• грамотное планирование разработки, прохождение этапов с регулярной отчётностью по спринтам;
• заключение договора, получение акта выполненных работ, которые можно отнести к расходам в бухгалтерском и налоговом учёте.

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

Дмитрий C. , middle full-stack developer

• CMS
• CSS
• HTML
• JavaScript
• PSD

Опыт разработки — 5 лет. Уверенно знает HTML, CSS и большинство браузерных движков. Способен обеспечить кроссбраузерность и кроссплатформенность. Разбирается в шаблонах проектирования и функциональном программировании. Умеет работать с макетами в Adobe Photoshop, Figma, Sketch.

Hire Developer

Александр М. , middle front-end developer

• AJAX
• CMS
• CSS
• HTML
• JavaScript
• UI
• UX

Опыт разработки — 7 лет. Внимательно относится к чистоте и качеству кода. Отлично разбирается в веб-технологиях, принципах формирования HTTP-запросов, особенностях и ограничениях браузеров. Знает большинство популярных фреймворков. Создаёт семантически правильную вёрстку и оптимизирует сложную интерфейсную анимацию.

Hire Developer

Марк Л. , middle JavaScript developer

• CSS
• HTML
• JavaScript
• MongoDB
• MySQL
• Node.js
• React
• Redis
• Symfony
• Web API
• WebStorm

Опыт программирования — 6 лет. Хорошо разбирается в высоконагруженных биллинговых интерфейсах для финансовых операций. Умеет разрабатывать и поддерживать сервисы интеграции SIP для нескольких CRM. Владеет практическими знаниями алгоритмов, структур данных, методов гибкой разработки ПО.

Hire Developer

Роман В. , senior JavaScript developer

• AJAX
• AngularJS
• CMS
• CSS
• HTML
• JavaScript
• jQuery
• Node.js
• React
• Vue

Опыт программирования — 9 лет. Понимает паттерны проектирования. Умеет работать с готовыми REST API, писать юнит-тесты. Превосходно знает многие фреймворки и библиотеки JS. Способен находить простые и быстрые алгоритмические решения. Грамотно подходит к оптимизации клиентских приложений.

Hire Developer

Рынок труда frontend-разработчиков

На фриланс-биржах фронтендеры указывают минимальный размер сдельной оплаты труда, от которого они отталкиваются: от 800 ₽, 9 € или 10 $. В этом случае заказчикам трудно ориентироваться в стоимости услуг фронтенд-разработки, потому что за такие деньги исполнители могут сделать только что-нибудь несущественное, например, предварительно проконсультировать или составить план.

Рассчитываться с внештатными удалёнными фронтенд-разработчиками намного легче, когда оплата почасовая. Стоимость часа работы у них фиксированная и на протяжении года не меняется, например: 4000 ₽, 45 € или 50 $.

Для полноты картины нанимателям следует знать зарплаты, которые другие компании готовы платить штатным сотрудникам. Они существенно разнятся в зависимости от требуемого опыта или уровня. Рекрутеры делят кандидатов по старинке — по опыту работы, измеряемому в годах. Сами разработчики предпочитают делиться на junior, middle, senior, lead — условные уровни, которым соответствует набор умений и навыков, стек технологий, а также самостоятельность. Если эти подходы попытаться совместить, то получится примерно так:

1. Джуниор — новичок с опытом frontend-разработки 1-2 года, умеет немногое, сам справляется только с простыми задачами.
2. Мидл — продвинутый специалист с опытом разработки 3-5 лет, умеет почти всё, что требуется от фронтендера, справляется с большинством задач без посторонней помощи.
3. Сеньор — суперпрофессионал с опытом разработки от 6 лет, для которого нет неосвоенных умений и невыполнимых задач.
4. Лид — ведущий разработчик, лидер команды, который «пасёт котов»; бывает техлидом (с техническим уклоном) или тимлидом (с управленческим уклоном).

Сколько платят frontend-разработчикам в России

На российском рынке труда ИТ-сферы присутствует значительная разница между зарплатами в Москве и в других регионах. Мы собрали вакансии для 3 уровней квалификации на superjob.ru и zarplata.ru, рассортировали по ним и по городам (Москва | остальные города). Затем высчитали среднюю зарплату внутри каждой из 6 групп. Вот сколько российские компании готовы ежемесячно платить фронтенд-разработчику (данные за март 2022):

Сколько платят в Великобритании

На британском рынке труда тоже присутствует разница между зарплатами в Лондоне и в других регионах, округах и графствах. Мы собрали вакансии для 3 уровней квалификации на reed.co.uk и indeed.co.uk, рассортировали по ним и по городам (Лондон | остальные города). Затем высчитали среднюю зарплату внутри каждой из 6 групп. Вот сколько британские компании готовы ежегодно платить фронтенд-разработчику (данные за март 2022):

Сколько стоят услуги frontend-разработчиков Polygant