В далеком (на самом деле нет, но кажется, что да) 2017 году я впервые сделал веб-сайт. Он состоял из нескольких страниц. Конечно же никакого JavaScript и тем более backend не было. Это были простые страницы на HTML и CSS с очень примитивным дизайном. С того момента я много чего изучил, но на вопрос, почему меня заинтересовал именно frontend, я до сих пор точно не знаю.
В конце статьи я обязательно расскажу, с чего стоит начинать путь frontend-разрабочика.
Что такое frontend?
У этого термина есть очень просто объяснение. Frontend - это клиентская часть продукта, то есть все то, что мы видим на веб-страницах: формы, блоки, текст, ссылки и так далее. Взаимодействуя с backend, веб-страница может перерисовываться, отображать или скрывать элементы и еще очень много чего!
Что делает frontend-разработчик?
Часто считают, что frontend-разработчик и верстальщик - одно и тоже. На самом деле, верстальщик - это только начальный этап на пути к становлению специалистом. Хороший frontend-разработчик помимо вёрстки (HTML и CSS) знает JavaScript, различные фреймворки (React/Vue.js/Angular), сборщики (Gulp4, Webpack), которые позволяют упростить разработку вёрстки, препроцессоры (Sass, SCSS), шаблонизаторы. Понимает, как обеспечить безопасность веб-сайтов, умеет работать в figma. Кажется, что знать нужно очень много? А это может быть списком требований всего на позицию Junior (следующая ступень после стажировки).
Простой пример, чем может заниматься frontend-разработчик. Разработка всплывающего окна по макету Figma. Окно должно закрываться с помощью крестика, внутри блока есть поле для ввода email-адреса. После нажатия на кнопку, email-адрес необходимо отправить на REST API сервер.
Основная задача frontend-разработчика заключается в превращении макета (дизайн сайта) в рабочую интерактивную версию, а также написание всех необходимых логик и скриптов, позволяющих выполнить поставленные в техническом задании цели.
Сравнение с backend-разработкой.
Backend - это логика работы сайта.
Backend отвечает за внутренние данные: информация про товары, авторизация пользователей, пароли, банковские данные и многое другое. Изменения в backend отображаются в frontend. Например, после авторизации (backend) у вас появляется доступ к личному кабинету, а в правом верхнем углу отображается ваш ник.
Самым очевидным преимуществом frontend-разработки является то, что вы сразу видите результат своей работы. Это очень важно для мотивации и повышения продуктивности. В случае backend, можно написать тысячи строк кода, реализовать весь backend google, но все что вы увидите - это код. Конечно, это можно рассматривать и как преимущество backend . Если у вас есть желание заниматься только кодом, то в backend-разработке вас ничего не будет отвлекать от кода.
С другой стороны, в backend-разработке задачи намного сложнее. Это большое преимущества, если есть желание заниматься именно чистым программированием.
Остальные преимущества и недостатки проще всего сравнить в таблице.
Где платят больше?
Размер зарплаты - один из важнейших факторов, при выборе направления разработки. Давайте посмотрим на зарплаты разных специалистов в первом полугодии 2022 года (данные habr.ru).
Зарплаты почти одинаковые, backend немного опережает. Но важно обратить внимание на то, что карьерный рост в frontend-разработке происходит быстрее. То есть в frontend вы сможете быстрее достигнуть уровня middle, чем в backend-разработке.
С другой стороны, backend-разработчики имеет больше шансов претендовать на должность TeamLead.
Frontend переоценен, разработчиков очень много, вакансий мало, а backend будет всегда!
10 лет назад начали появляться конструкторы, вы точно о них слышали: Wix, Tilda, Insales и другие. Их функционал позволяет создавать frontend (а некоторые позволяют создавать и backend) без каких-либо навыков. Вы просто добавляете на страницу необходимые разделы и блоки. При этом количество блоков превышает сотни. Например, в конструкторе Tilda 550 блоков:
С самого начала казалось, что конструкторы могут вытеснить frontend-разработчиков. Разработка сайта на конструкторах намного проще, быстрее и дешевле. На фриланс биржах можно найти исполнителей, которые готовы сделать Landing Page всего за 500 рублей. Соблазнительно, не правда ли?
Но тут возникает два очень больших недостатка.
- Как только вы захотите сделать на сайте что-то интересней базовых блоков, вы столкнетесь с проблемой: сделать это очень сложно. Да, есть различные zero-блоки, возможности вставлять html код, но сделать это красиво, адаптивно, не нарушая работу сайта почти невозможно.
- Сайты на конструкторах очень медленные и неоптимизированные. Фактически, применение конструкторов ограничивается простыми одностраничниками, интернет-магазинами с тремя товарами и рекламными сайтами.
Так что конструкторы занимают свою, не очень большую нишу разработки сайтов и конечно (в ближайшее время) не смогут вытеснить frontend-разработчиков.
Что интересней, большей угрозе подвергается backend-разработчики. С каждым днем появляются сервисы, которые позволяют frontend-разработчикам настроить небольшие API серверы и базы данных, вообще не знаю языки программирования backend и баз данных. Простой пример - сервис firebase от Google.
Конечно, речь идет про проекты с небольшой серверной частью. Backend-разработчики также востребованы, как и frontend.
С чего начать?
Если мне удалось вас заинтересовать frontend-разработкой, то у вас точно возник вопрос, с чего начать.
Я не рекомендую покупать дорогие курсы от ведущих онлайн школ. Часто они не стоят своих денег, а дипломы не имеют большой ценности. Более того, всегда может произойти такая ситуация, что вы начали изучать курс по frontend, а потому поняли, что рождены для разработки на Kotlin. Поэтому стоит начать с бесплатных курсов, статей. В первую очередь необходимо изучить HTML, CSS и научиться работать с figma. Затем, посмотрите, как с помощью JavaScript можно сделать вашу вёрстку интерактивной. Изучить это можно с помощью бесплатного отличного онлайн учебника https://learn.javascript.ru/#tab-2 (2 часть). После чего, можно углублять знания JavaScript (с помощью того же учебника), приступать к изучению сборок и фреймворков. Согласитесь, уже не кажется таким невыполнимым?
