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

Как в вакансии

Фронтенд-разработчик делает следующее:

• собирает сайт по макету дизайнера;
• использует для этого HTML, CSS, JavaScript и несколько других языков;
• понимает процессы, которые происходят во время создания сайта;
• знает, как опубликовать сайт в Сети так, чтобы он выглядел одинаково на всех устройствах;
• умеет работать с Git или другим инструментом контроля версий;
• использует Webpack для сборки проекта и вообще оперирует препроцессорами.

Звучит сложно, но вот основное: фронтенд берёт макет будущего сайта (картинку) и превращает его в код, который можно отправить клиенту. При необходимости он программирует интерактивные элементы и анимацию, которые будут обрабатываться на клиенте.

Часто фронтендов путают с верстальщиками, но на самом деле верстальщик — это специалист узкого профиля (вёрстка по макету). А фронт кроме этого может и слайдер прикрутить, и шаблон в CMS поправить, и закодить нестандартное поведение картинки при нажатии, и написать скрипт для проверки правильности заполнения данных на сайте.

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

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

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

Приложение-чат

В интерфейсе чат-приложения нет ничего сложного. Фиксируем положение окна для ввода текста и кнопку для его отправки, далее создаем бесконечное полотно с сообщениями. 

• Применяем свойство sticky.

• Добавляем анимацию появления новых сообщений на экране. 

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

• Учимся работать с БД Firebase. 

• Интерфейс при этом должен реактивно реагировать на изменения в базе. 

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

Свой аналог Spotify

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

• Верстаем динамический сайт с философией mobile-first.

• Изучаем, как работают элементы управления медиаконтентом (создание объектов Audio()).

Чтобы усложнить себе задачу, можно увеличить базу аудиофайлов с одного до нескольких десятков, чтобы в сервисе была хотя бы пара «альбомов». Еще более высокий уровень сложности – подключить API Spotify к своему проигрывателю. 

• Учимся работать со сложными API от разработчиков Spotify или Apple Music.
• Практикуем использованием Media API.

Можно сделать приложение функциональнее, добавив другие виды контента. Получится не аналог Spotify, а гибрид музыкального сервиса с копией YouTube. Для него тоже нужно будет сделать кастомные элементы управления.

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

Необходимый минимум знаний

Фронтенд

База. Для создания простых посадочных страниц достаточно изучить:

• HTML (HyperText Markup Language) — язык разметки, который сообщает браузеру, что за элементы содержатся на странице. Например, заголовки, параграфы, картинки.
• CSS (Cascading Style Sheets) — сообщает браузеру, как именно отображать элементы, содержащиеся на странице. Например, «текст заголовка должен быть ярко-красным и написан шрифтом Comic Sans». 
• Препроцессоры — программы, расширяющие возможности чистого CSS. Самые популярные: SASS, LESS.
• JavaScript — язык программирования, который необходим для «оживления» интерфейса: общения с сервером, валидации форм, открытия попапов.

Фреймворки. Чтобы разрабатывать динамичные страницы и более сложные SPA, нужно освоить хотя бы один JS-фреймворк. Сейчас наиболее актуальны:

• React. Самая популярная JS-библиотека создана Facebook в 2013 году. React отлично подходит для создания простых SPA.
• Angular. Фреймворк, в котором много всего из коробки, что позволяет делать более сложные архитектуры. Его любят использовать для CRM, табличек, где много логики.
• Vue. Фреймворк — открытие последних лет. Отлично подходит для создания высокопроизводительных приложений. Он очень популярен на азиатском рынке. Например, широко используется Alibaba и Xiaomi.

Бэкенд

База. Необходимый минимум для джуна:

• Язык программирования. Оптимальный вариант, который позволит в случае чего мигрировать во фронт — JavaScript. Также уверенно в бэке веба себя чувствуют Go, PHP, Java и Python. 
• Git. Система контроля версий, которая позволяет возвращаться к предыдущим версиям кода. С ней придётся работать практически на любом языке и в любой команде.
• Базы данных. Сложно представить проект, где они не нужны. Базы бывают двух категорий — реляционные и нереляционные. Лучше начинать с реляционных, выбирать что-то из популярных — MySQL или PostgreSQL. Для начала будет достаточно знания хотя бы одной.
• API. Нужно иметь хотя бы общее представление о том, какие они бывают. Знать, что такое REST, чтобы правильно его писать. Познакомиться с JSON:API.

Фреймворки. При использовании Go во фреймворках нет необходимости, для остальных языков сейчас актуальны такие:

• Node.js для JavaScript. Node — опенсорсный проект, объединивший большое комьюнити разработчиков. Это мощный инструмент, освоив который, при желании можно пойти и в микросервисы. Paypal, Uber, eBay работают на этом фреймворке. 
• Symfony и Laravel для PHP. Laravel чуть популярнее и пользуется большим спросом на рынке труда. Но Symfony считается более строгим и правильным, поэтому выучив его, можно легко мигрировать на Laravel.
• Django для Python. Лучший веб-фреймворк для этого языка. Его используют Pinterest и Spotify.
• Spring для Java. Универсальный фреймворк с собственной MVC-платформой и открытым исходным кодом.

Зарплаты

В целом фронт и бэк не сильно отличаются по зарплате, если мы говорим именно о фронтэнде, а не о вёрстке. Но всё-таки бэк немного выигрывает по деньгам.

Фронтенд

В среднем по данным hh.ru на рынке труда здесь такие цифры:

• Junior — от 20 000 (в регионах) до 70 000 рублей
• Middle — от 50 000 до 300 000 рублей
• Senior — от 100 000 рублей до 550 000 рублей

Бэкенд

Среди самого бэка у PHP-разработчиков статистически чуть-чуть ниже зарплата. Но в целом цифры такие:

• Junior — от 40 000 до 100 000 рублей
• Middle — от 60 000 до 350 000 рублей
• Senior — от 120 000 до 600 000 рублей

Конечно, зарплата зависят от необходимых языков и технологий

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

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

Зарплата и карьера frontend-разработчика

Часто начинающий frontend-разработчик строит карьеру с должности верстальщика, что считается самым простым и логичным вариантом. Он должен получить опыт работы в связке HTML+CSS, а затем освоить знания JavaScript, библиотек и фреймворков. Junior frontend-разработчик обязан разбираться в ключевых понятиях построения серверной части, владеть навыками использования инструментов, необходимых для ключевой специализации.

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

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

Фронтенд-разработчик может расти в трех вариантах:

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

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

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

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

Все возможные варианты карьерного развития фронтенд-разработчика наглядно продемонстрировал Сервис PayScale:

Сервис PayScale

Только от специалиста и его пожеланий /профессиональных качеств зависит дальнейший путь.

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

• В России фронтенд-разработчик зарабатывает в среднем 80 000 рублей — 100 000 рублей.
• В Москве средняя зарплата фронтенд-разработчика — 100 000 рублей — 112 500 рублей.

Что интересно, frontend-разработчик в США зарабатывает в год больше, чем тот же специалист в России. Но всегда можно устроиться в филиал иностранной компании, тогда разница вам не страшна.

Если говорить о конкуренции, то среди фронтендеров она ниже, чем в среднем по рынку, и намного ниже, чем в некоторых профессиональных областях. На одну вакансию фронтенд-разработчика приходится в среднем 4 (Москва), 4,5 (Санкт-Петербург) и 4,8 (Россия в целом) резюме.

Если сравнивать с другими профессиональными областями, то на одну вакансию обычно приходится 6 активных резюме. На часть должностей, например (юрист, журналист, секретарь и т. д.) приходится от 7 до 10 резюме, что говорит о повышенной конкуренции. Другими словами, найти работу фронтенд-разработчику легче, чем другим специалистам на рынке.

Приложение с прогнозом погоды

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

Для начала нужно подключиться к бесплатному API и добавить прогноз в приложение. С поиском по городам, желательно. 

• Осваиваем API для поиска стран и городов.

• Настраиваем API для извлечения информации о погоде.

• Обретаем навыки по работе с REST API.

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

• Делаем понятную и не слишком запутанную структуру switch.

• Создаем анимации при помощи @keyframes.

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

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

• Учимся работать с GEOLocation API.

• Учимся работать с Notification API.

Для разработки подойдет и React.js, и его аналоги. 

Что такое фронтенд и чем занимается специалист

Frontend — это разработка интерфейса, с которым взаимодействуют пользователи. Называется она так, потому что это создание наружной части сайта или приложения, а значит, находится снаружи/спереди (front).

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

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

Главные инструменты в этой сфере — языки веб-разметки (HTML, CSS) и программирования (JavaScript):

• JavaScript используется для создания UI (user interface — интерфейс пользователя) с нуля;
• На HTML производится основная верстка, где интерфейс переводится на язык, понятный современным браузерам;
• Через CSS прикрепляются стили к структурированным документам (в случае с frontend это прикрепление стилей к документам HTML).

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

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

Отличие frontend от backend

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

За все обработки и действия, которые производятся на серверах, отвечает другой специалист — бэкенд-разработчик. Так как это разные профессии, в backend используется другой инструментал, включающий языки программирования PHP, Perl, Java, Python, Ruby, фреймворки и SQL для работы с данными. Кстати, на нашем сайте есть обзор профессии PHP-программиста.

В разработке любого сайта или веб-приложения участвуют оба специалиста. Так, пользователь выбирает определенные элементы в веб-интерфейсе, после чего на сервер отправляется запрос, результат которого отображается в интерфейсе. Есть fullstack-разработчик, который сочетает в себе обязанности и фронтенда, и бэкенда.

Достоинства и недостатки

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

Перечень плюсов:

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

Список минусов:

• Во многих вакансиях по этой специальности есть требования, касающиеся бэкенда;
• Обязательно взаимодействие с другими сотрудниками (далеко не для всех это минус);
• Хоть JavaScript и не такой сложный и требовательный, как, например, C++, для того чтобы им уверенно владеть, нужно иметь начальные знания алгебры.

Где брать знания

Фронтенд

• Документация. Например, developer.mozilla.org.
• На Youtube HTML, CSS, JavaScript хорошо объясняет Владилен Минин. У него есть ролики и для начинающих, и для более продвинутого уровня по нюансам и более сложным технологиям.
• Javascript.ru — огромный современный онлайн-учебник по JavaScript.
• CSS Tricks — полезный ресурс для тех, кто знает английский.
• На Udemy хороший курс по React читает Максимилиан Шварцмюллер, тоже на английском.
• Факультет frontend-разработки — для тех, кому интересно обучение с гарантией трудоустройства.

Бэкенд

• Документация!
• Хабр — основа основ. Чего стоит одна статья «Upgrade до Middle PHP-разработчика за 3 месяца».
• В блоге GeekBrains тоже много ценных материалов. Например, роадмап по PHP и подборки книг по Java, или тому же PHP.
• dev.to — полезнейший ресурс для тех, кто читает по английски.

Инструменты

Для того, чтобы войти в профессию, необходимо освоить три инструмента:

1. HTML — язык разметки документов. С его помощью создается структура страницы: заголовки, подзаголовки, абзацы, списки и т.д.
2. CSS — язык описания внешнего вида страницы. Благодаря ему структура обретает конкретный дизайн: цвета, шрифты, расположение элементов.
3. JavaScript — самый популярный язык программирования (по данным Stack Overflow). Позволяет реагировать на действия пользователей, то есть делает страницы интерактивными. Например, если вы навели курсор на иконку, и она подсветилась, это произошло благодаря JavaScript. Также способствует отправке данных на сервер (например, когда вы ввели логин и пароль, чтобы авторизоваться на сайте).

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

Например, метаязыки SASS и LESS ускоряют процесс создания CSS-кода, он получается быстрым, валидным. PUG делает то же самое для HTML-кода.

Flexbox (один из модулей CSS) позволяет управлять размером, расположением элементов, выравнивать их по нескольким осям, распределять свободное место между элементами и т.д.

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

Могут пригодиться фреймворки — наборы из нескольких библиотек, также призванные ускорять разработку сайтов. Angular и Vue.js — JavaScript-фреймворки, которые применяют чаще других.

Владение системой контроля версий Git дает возможность отслеживать изменения в файлах и вести один проект совместно с коллегами.

Node.js — программная платформа, которая позволяет работать с JavaScript вне браузера. Владение Node.js приближает фронтендера к бэкенд-разработчикам. А знакомство с языками PHP и Python не только облегчит работу в команде, но и поспособствует становлению фулстэком.

Какие еще скилы помогут погрузиться в профессию и чувствовать себя в ней комфортно?

• Математические знания: структуры данных, алгоритмы, переменные и функции + развитое абстрактное мышление.

• Английский язык, чтобы не переводить спецификацию в Google Translate, общаться с коллегами и заказчиками (если попадете в иностранную компанию), заниматься самообразованием.

• Коммуникабельность и умение работать в команде. Фронтенд-разработчик — это не соло-специальность, ему необходимо регулярно контактировать с бэкендерами, дизайнерами, тестировщиками. Желательно, чтобы общение было конструктивным и приятным. 🙂

В целом фронтендер — конечно, технарь, но не без тяги к прекрасному, ведь его работа не только про функциональность, но и про дизайн.

Этап 1: Верстка HTML

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

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

Это важно, потому что, начав с JavaScript (или любого другого языка), многие разработчики теряются из-за тотального погружения в логические задачки и нехватки фантазии. Потенциальные фронтендеры попросту не осознают, как применить полученные знания на практике

Наличие сверстанной страницы частично решает эту проблему, позволяя работать с «реальными» объектами разработки, а не просто решать логические задачки и общаться с голой математикой (оставьте это бэкендерам). 

Заодно вы освоите навыки по созданию классов и правильному оформлению HTML в соответствии с правилами валидаторов. Это будет полезно и при стилизации сайта, и при добавлении логики в приложение.

Так что учим семантику HTML, запоминаем базовые теги и принципы оформления блоков с текстом, изображениями и другим контентом. Учимся подключать внешние документы (с программным кодом и стилями) и т.п. 

Используемые технологии:

Ссылки:

• MDN Web Docs HTML Basics
• MDN Web Docs HTML Guidelines
• W3C Validator 

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

В рамках эксперимента 3 выберите один из прошлых экспериментов и проведите рефакторинг своего кода с использованием советов, которые вы узнали выше. Рефакторинг означает редактирование вашего кода так, чтобы он стал проще, в том числе в плане читаемости.

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

Не важно сделать правильно с первого раза. Важно сделать правильно в конечном результате

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

• Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
• Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
• Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
• Работает ли мой код в Safari так же хорошо, как в Chrome?
• Нельзя ли заменить часть кода на систему сеток, например Skeleton?
• Не слишком ли часто я использую !important? Как я могу это исправить?

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

Слово «фронт» в названии профессии говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист — бэк-энд разработчик. К сведению: есть универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. full stack developer).

Основные инструменты фронт-энд разработчика в web:

• JavaScript;
• HTML;
• CSS.

Senior Software engineer в компании EPAM Systems

JavaScript — главный язык фронт-энд разработчика в web, на котором он программирует пользовательские интерфейсы. Фронтендерам часто приходится заниматься версткой сайтов: написанием HTML-кода и CSS-стилей для представления информации в виде, соответствующем макету дизайнера и понятном всем браузерам.

Senior Software engineer в компании EPAM Systems

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

Senior Software engineer в компании EPAM Systems

Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы:

• Sass/SCSS, LESS, Bootstrap (три ведущих фреймворка);
• React;
• Angular;
• Vue.js;
• jQuery;
• Webpack;
• Gulp.

 А появление  Chrome Dev Tools и Firebug позволило повысить производительность труда.  

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

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

Где работает и какие задачи решает frontend-разработчик?

Он работает везде, где требуется создание сайта, приложения или любой другой программы, у которой есть интерфейс. Знание JavaScript (основного языка frontend-разработчика) не ограничивает программиста веб-разработкой. Язык используется и для создания десктопных приложений, например офисных пакетов Microsoft и OpenOffice или приложений Adobe, и в программировании оборудования и бытовой техники (платежных терминалов, телевизионных приставок и т.д.).

Помимо студий веб-разработки, для frontend-разработчика есть масса вариантов трудоустройства:

• IT-департаменты компаний. Ритейлеры и маркетплейсы, сотовые операторы и банки, соцсети и стриминговые платформы совершенствуют свои сервисы. Крупнейшие из них сами задают тренды во frontend-разработке. Например фреймворк React создан программистом из Facebook. Работать можно как внутри компании, так и в агентстве, которое специализируется на аутсорс-разработке.
• Разработчики корпоративного софта. Тут нужно будет создавать сервисы управления проектами, CRM и другие веб-приложения для бизнеса. Такое ПО часто имеет сложные интерфейсы и нуждается в регулярной поддержке.
• Государственные организации. Такие сервисы, как «Госуслуги», «Налог.ру», городские информационные порталы постоянно растут и совершенствуются, вовлекая в свою работу в том числе этих специалистов.

Курс 

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

Научитесь разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML и получите востребованную IT-профессию. Дополнительная скидка 5% по промокоду BLOG.

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

Использование технологий

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

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

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

Веб-дизайн: пользовательский интерфейс (UI) и пользовательский опыт (UX)

Разработчикам внешнего интерфейса необязательно быть экспертами по веб-дизайну. Веб-дизайн — это отдельная область. С учётом сказанного ключевым моментом является глубокое знание веб-дизайна. Две основные части веб-дизайна — это дизайн пользовательского интерфейса (UI) и дизайн пользовательского интерфейса (UX).

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

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

Адаптивный дизайн

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

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

API

Интерфейсы прикладного программирования (API ) используются в различных контекстах веб-разработки. Часто серверные разработчики создают API-интерфейсы, которые поддерживают логику сайта, такую ​​как аутентификация пользователей и платежи. Затем разработчики внешнего интерфейса должны запросить эти API, чтобы они могли взаимодействовать с ними.

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

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

Отладка

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

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

Навыки

Чтобы стать успешным фронтенд-разработчиком, вам понадобится больше, чем просто технические навыки. Мягкие навыки — неотъемлемая часть любой работы.

Творческий подход. Это кардинальное изменение во фронтенд-разработке. Веб-сайты — одно из самых творческих средств общения. Вы должны уметь придумывать уникальные способы отображения информации на сайте.

Адаптивность. Вы должны быть открыты для предложений и адаптировать свои веб-сайты по мере развития тенденций и спецификаций.

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

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

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

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

Дополнение: мобильная и десктопная разработка

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

Например, Instagram, Twitter, Pinterest, Spotify и десятки других популярных программ создавались с использованием JavaScript-кода. 

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

В этой области популярны технологии:

• React Native

• NativeScript

• Flutter

• Ionic

• Electron (для Windows, macOS и Linux)

React Native самый быстрый, он лучше всех продвинулся в области создания нативных приложений. Взгляните на Discord – он написан на React + Electron для компьютеров + React Native для мобильных систем. Выглядит и работает отлично. 

Flutter тоже хорош. Довольно популярен и приближен к нативному коду по ощущениям со стороны пользователя. 

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

Используемые технологии:

Полезные ссылки:

Анализ фреймворков для разработки мобильных приложений при помощи JavaScript