Выбираем профессию frontend- и backend-разработчика: принципы и отличия

Свой аналог Spotify

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

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

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

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

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

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

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

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

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

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

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

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

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

Препроцессоры и постпроцессоры CSS

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

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2016 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

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

Заработок во frontend

Зарплата фронтенд-разработчика высокая даже для IT. Средний заработок, по данным сайта по поиску работы Trud.com (версия для России), составляет 90 тысяч рублей в месяц. Больше всего вакансий с оплатой 70 тысяч рублей в месяц. Подробную статистику можно посмотреть в графике ниже (количество вакансий — по оси X, сумма оплаты — по оси Y):

Сколько зарабатывает фронтенд-разработчик, зависит от его опыта и квалификации. Новички с небольшим опытом работы получают примерно 35—40 тысяч рублей, работники среднего уровня — 55 тысяч рублей. Самые востребованные кадры зарабатывают до 185 тысяч рублей.

Заработная плата разная в зависимости от города проживания. Больше всего получают в Москве, Питере и Краснодаре.

Зарплата в Америке больше, чем в России. В среднем разработчики получают 60—70 тысяч долларов США, по данным ресурса Indeed. В Америке большинство вакансий указаны без заработной платы, но примерно 1 из 10 вакансий имеет эти данные, поэтому несложно посчитать среднее арифметическое.

Как стать frontend-разработчиком? Что нужно знать и уметь?

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

1. Освоить HTML и CSS. HTML – это язык разметки веб-документов. CSS – каскадные таблицы стилей. Они управляют оформлением различных элементов на страницах (например, размером шрифтов).
2. Изучить JavaScript – основной язык, который нужно знать frontend-программисту. Существуют различные библиотеки готовых скриптов, написанных на JavaScript. Их тоже лучше изучить, чтобы пользоваться ими и ускорять свою работу. Пример такой библиотеки – jQuery.
3. Изучить методологию верстки, например, БЭМ от Яндекса. Методология помогает создавать веб-приложения по определенным принципам, которые помогают разбираться в чужом коде и в своем тоже по прошествии какого-то времени.
4. Изучить фреймворки, в частности, Bootstrap. Фреймворк – это набор неких готовых решений, на базе которых можно создавать веб-сайты быстрее, чем при написании кода с нуля.
5. Освоить кроссбраузерную верстку и научиться создавать страницы, которые одинаково выглядят в разных браузерах.
6. Изучить адаптивный дизайн, т.е. дизайн, который подстраивается под размеры экрана пользователя. Таким образом сайт приемлемо выглядит на разных устройствах (компьютер, планшет, смартфон).
7. Не лишним будет освоить языки серверного программирования на базовом уровне. Например, язык PHP – один из самых популярных в среде веб.

8. Изучить Git и научиться работать с системами контроля версий.

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

Как получить профессию

Весь процесс обучения можно разделить на две большие части:

• теория;
• практика;

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

Получать знания и закреплять их можно несколькими путями:

• По книгам. Недорого и очень информативно. Но нужно тут же применять свои навыки на практике.
• Самостоятельно, обучаясь по статьям в сети. Здесь немного сложнее, так как знания не будут находиться в системе. Зато можно быстрее дойти до каких-то практических вещей, которые никто не расскажет и не покажет.
• Пройти очное обучение. Классическое образование даст большую фору в плане математической логики. А это – основа программирования. Однако академические знания быстро устаревают. Что работало вчера, почти бесполезно сегодня.
• Просмотр видео-курсов в сети. Не все пользователи могут учиться подобным образом, так как им не хватает достаточной мотивации. Все, что бесплатно, не воспринимается как ценная информация.
• Онлайн-обучение за деньги. Студент получает прочный сплав актуальных знаний и навыков. Он учится и тут же тренируется. Это самая оптимальная схема. Некоторые школы могут помочь с трудоустройством, если ученик показывает хорошие результаты.

Расценки на платные курсы сильно отличаются. Все зависит от подхода, количества часов и насыщенности курсов. Средняя цена хороших программ обучения начинается с 60 000 рублей. Максимальная стоимость переваливает за 100 000 рублей. Но нужно понимать, что это отличная инвестиция в собственное будущее.

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

Одна из главных возможностей, которую дают сетки, это обеспечение отзывчивости вашего сайта. Отзывчивость (responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

Лендинг

На первый взгляд создание одностраничного лендинга – простая задача, но в реальности весь процесс разработки может потребовать много времени. Во-первых, придется работать с готовым макетом и четко следовать идеям дизайнера. А это сложнее, чем выдумывать дизайн из головы. Мало корректно расположить все элементы, надо еще и сделать их адаптивными, чтобы на экране любого размера ваша работа смотрелась так, как это было задумано дизайнерами. При этом между точками перехода между разрешениями в макете все тоже должно быть красиво (без наплыва объектов друг на друга). 

• Учимся верстать под мобильные устройства.

• Используем медиа-запросы.

• Тестируем код в разных браузерах.

• Работаем с Chrome DevTools (Chrome – самый популярный браузер, поэтому тестировать надо по умолчанию именно в нем).

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

• Выделяем повторяющиеся куски кода и генерируем классы с понятной системой наследования методов. 

• Прокачиваем навыки работы с TailwindCSS для быстрой замены визуального стиля страницы с помощью внесения изменений в конфигурационные файлы

Перспективы профессии frontend-разработчика

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

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

Перспективы профессии frontend-разработчика

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

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

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

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

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

Будет ли что-то новое в следующие 10 лет? Безусловно!

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

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

Блог-платформа

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

• Верстаем посты при помощи grid.

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

Сложности начинаются на этапе реализации функциональности подобного приложения. Нужно добавлять новые посты в базу данных (метод POST). Добавляться будут тексты и изображения, а для этого понадобится markdown-редактор. 

• Нужно освоить подключение к популярным БД наподобие MySQL или MongoDB.

• Подключить библиотеку с markdown-редактором или же создать собственный редактор.

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

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

• Создаем новые записи в базе данных при регистрации. 

• Используем cookies для автоматической авторизации посетителя сайта. 

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

Frontend developer – кто это

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

В работе необходимо использовать:

• JavaScript (Джава или Ява);
• HTML;
• CSS.

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

Разработчик frontend это тот, кто находится «на передовой» разработки. Участвует в оформлении и стабилизации внешнего вида и функционала.

Встречаются вакансии frontend junior, middle и senior. Чем больше знаний и опыта, тем выше level и заработная плата. Чаще компании ищут junior frontend developer, специалиста с базовыми знаниями обучают под себя, дают навыки создания дизайна. Нередко джуны, получив основы в компании, уходят в «свободное плавание».

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

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

Это происходит потому, что специалисты по поиску персонала и сами не понимают, для чего требуется сотрудник, поэтому обязанности от вакансии к вакансии плавающие. Чем на самом деле занимается фронтенд программист:

1. Разработка HTML-страницы сайта. Проводится с использованием как готовых макетов, так и по лично разработанным дизайн-макетам.
2. Верстка как самих сайтов разной сложности и вложенности, так и работа с шаблонами. Необходимо знание популярных CMS.
3. Разработка и установка скриптов для интерфейса. Настройка и визуализация анимации страниц, переходов, баннеров.
4. Создание пользовательского интерфейса для положительного опыта взаимодействия юзеров с сайтом.

Образец вакансии нередко включает обязанности engineers или designers. Но на практике фронтендер должен уметь взаимодействовать и работать над коллективным проектом с бэкенд разработчиками, дизайнерами, тестировщиками, аналитиками.

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

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

Слово «фронт» в названии профессии говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист — бэк-энд разработчик. К сведению: есть универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. 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-разработчиком с нуля

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

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

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

Чтобы стать frontend-разработчиком с нуля, первым делом познакомьтесь с HTML-кодом и возьмитесь за изучение CSS.

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

А дальше оттачивайте свои навыки, пополняйте знания.

Можно заниматься саморазвитием, читать тематическую литературу. Список книг по frontend-разработке есть на нашем блоге.

Более быстрый способ узнать все тонкости профессии – обзавестись наставником. Найти его можно на онлайн-курсах.

Где учиться

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

По завершении обучения вам выдадут сертификат и помогут составить резюме.

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

Вот несколько хороших курсов:

• Профессия Frontend-разработчик
• Frontend-разработчик с нуля
• React: библиотека фронтенд-разработки №1
• Специализация Frontend-разработчик
• Frontend-разработчик
• Профессия “Фронтенд-разработчик”

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

Где работать

Frontend-developer требуются на предприятия, создающие софт для бизнеса, в IT-компании по разработке сайтов, мобильных и веб-приложений, web-студии, стартапы, агентства аутсорсинга.

Карьерная лестница начинается с пункта “стажер”. Работа позволит набраться опыта и узнать на практике, что такое фронтенд-разработка.

Вакансии можно найти на профильных IT-ресурсах или на популярном сервисе по поиску работы hh.ru.

Если вам достаточно подработки или вы еще совсем “зеленый”, найти работу и испытать себя можно на биржах фриланса. Есть международные сервисы, например, Upwork, Freelancer, Joomlancers, Gigster, Codeable и YouTeam. А есть русскоязычные: Kwork, FL, Freelance.

Биржи помогут начинающим программистам набить руку, собрать портфолио и научиться работать с заказчиками.

У опытного специалиста есть три варианта совершенствования в работе:

1. Вертикальный – рост по карьерной лестнице, постепенное завоевание новых должностей.
2. Горизонтальный – непрерывное совершенствование своих навыков, что приводит к повышению цены за свои услуги.
3. Диверсификационный – обретение новых навыков, смежных специальности фронтенд-разработчик, и последующая переквалификация. Так часто frontend-developer превращается в backend-разработчика.

Инструменты

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

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, общаться с коллегами и заказчиками (если попадете в иностранную компанию), заниматься самообразованием.

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

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

Обучение профессии frontend-разработчика в GeekBrains

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

• Обучение профессии за 5 месяцев
• Доход от 50 000 руб./мес. на фрилансе или в штате компании.

Для кого разработан курс?

• Для новичков без опыта. Вы научитесь создавать удобные и красивые сайты, поймете, как начать карьеру frontend-разработчика.
• Начинающим специалистам. Сможете быстрее подняться по карьерной лестнице: на практике освоите HTML, CSS, JavaScript, ReactJS, Node.js.
• Опытным IT-специалистам. Выберете перспективное направление, сможете увеличить заработок и поток клиентов.

Как построен обучающий процесс?

Живое общение с экспертами-практиками. Курс состоит на 80 % из вебинаров с преподавателями: можно задать актуальные вопросы и сразу получить обратную связь. Будет обязательная запись занятий. К ним можно вернуться в любое время.

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

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

• 86 часов теоретических знаний;
• 162 часа практических заданий.

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

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

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

Что нужно знать фронтенд-разработчику:

• Языки: HTML, CSS, JavaScript, всё чаще требуется TypeScript.
• Фреймворки: React, Vue или Angular. Нужно уметь работать с одним из них.
• Дополнительные инструменты: работа с внешними расширениями через NPM или Yarn, настройка сборки фронтенда (например, Webpack).

Рассмотрим типичную задачу младшего фронтенд-разработчика.

Предположим, у команды есть проект на React и TypeScript. В него нужно добавить компонент, выводящий на страницу иконку. Иконка может быть разных цветов в зависимости от ситуации, в которой она появляется:

‘primary’ — основной цвет,

‘secondary’ — вспомогательный цвет,

‘error’ — цвет в случае ошибки,

‘success’ — цвет в случае успешной операции.

Все цвета заданы в дизайн-системе. Связь названий и цветов описана в файле utils.ts. Выглядит он примерно так:

 // utils.ts

type TIconTypes = 'secondary' | 'primary' | 'error' | 'success';

export type TIconProps = { type: TIconTypes, onClick?:() => void; };
export const getIconColor = (type: TIconTypes) => {

  return `${
    type === 'secondary'
      ? '#8585AD'
      : type === 'error'
      ? '#E52B1A'
      : type === 'success'
      ? '#00CCCC'
      : '#F2F2F3'
  }`;
};

 

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

 // icon.tsx

import React from 'react';
import { getIconColor, TIconProps } from './utils';

export const Icon = ({ type }: TIconProps) => {
  return (
    <svg
      xmlns="<http://www.w3.org/2000/svg>"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={getIconColor(type)}
    >
      <path d="/* здесь будет длинный набор чисел, описывающих svg-изображение */"/>
    </svg>
  );
};
 

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

Это лишь небольшой пример задачи, но он наглядно демонстрирует необходимость понимания дополнительных технологий помимо HTML, CSS и JavaScript: например, React и TypeScript. То, какие технологии потребуются на конкретном проекте, определяет стек, принятый внутри команды или компании. Его нужно либо знать, либо быть готовым быстро в него погрузиться.

Структура сайта

Любой сайт состоит из пользовательской и серверной частей. На странице в интернете вы видите текст, кнопки, панели, изображения и видео. Можете перемещаться по сайту, свободно изучать контент. Перед вами — пользовательская часть сайта и результат труда frontend-разработчика: визуализация, интерактивность и понятность интерфейса. Вы видите красивый дизайн, подсвеченные кнопки и интересную типографику, сайтом удобно пользоваться. Но как всё это выглядит изнутри?

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

Любой запрос, который делает пользователь, передаётся на сервер. Здесь всё и происходит: запрос обрабатывается, фильтруется, а ответ отправляется обратно. Backend-разработка отвечает за правильное выполнение этого процесса.

Функции Frontend и Backend

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

Связка Frontend и Backend

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

Онлайн-магазин

Один из наиболее массивных проектов в нашей подборке

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

• Используем props, чтобы генерировать много похожих элементов с разными свойствами.

• Тренируем навыки по работе со структурами в духе __layout в Svelte.

• Достаем данные из БД (метод GET).

Неотъемлемыми частями онлайн-магазинов являются корзины и панели с избранными товарами. Для их реализации надо будет задействовать встроенную в браузер базу данных IndexedDB.

• Изучаем методы взаимодействия с базой данных IndexDB

• Используем методы GET и POST для модификации информации в БД.

Чтобы прибавить себе работы, можно сделать свою реализацию базы данных. Для этой цели подойдет LowDB. Это упрощенный вариант NoSQL-базы данных, позволяющий оперировать информацией как обычными JSON-объектами. Еще LowDB по умолчанию поддерживает GET- и POST-методы.

• Создаем свою базу на основе LowDB и json-server.

• Публикуем все это дело на хостинге Heroku, чтобы база жила в сети.

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

• Структурируем данные в объектах, чтобы у тех были четко прописанные свойства, на которые можно было бы ориентироваться при поиске. 

• Создаем систему фильтрации товаров. 

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

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

Для фронтенд-разработчика, успешного в вебе, следующим этапом развития может стать глубокое знакомство с технологиями создания мобильных и десктопных приложений на 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