Что нужно frontend разработчик

Профессия: фронтенд-разработчик

ххх: на чём пишешь фронтенд?
yyy: на костылях и велосипедах
ххх: ммм, хороший фреймворк!
Bash.im

Когда приходит мысль стать программистом, ты вдохновенно открываешь справочник Шилдта по С, заказываешь толстую книгу Страуструпа по С++ и учишься шутить про указатель на указатель на указатель и про рекурсию. Жёсткая романтика первого времени… Но всё меняется, когда в твою жизнь случайно приходит JavaScript. «Какой он простой, понятный, какой классный синтаксис! Всё, решено, буду писать сайты», — думает начинающий программист и решает стать гуру всея веба. Но потом выбранный стек меняет своё дружелюбное лицо, и чем дальше, тем больше. Но ты уже не можешь остановиться, потому что ты один из них — фронтенд-разработчиков. Тех самых, которые «смотрящие за мордой сайта». Ну что, захотелось присоединиться? Тогда для вас 2 серия нашего спецраздела «Профессия:…»

Кто это?

Сперва немного лирики и отступления от темы.

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

Более того, одним из трендов 2019-2020 года (а мне думается, что и до года 2025) стали так называемые PWA (Progressive Web Apps), которые называют будущим мобильного веба. Если говорить максимально просто, то PWA — это не что иное как мобильный сайт здорового человека такой, каким он должен быть. Лучше всего PWA определил один из создателей этой концепции и автор самого термина Алекс Рассел: «Progressive Web Apps are just websites that took all the right vitamins.» («PWA это всего лишь сайт, который принимает все необходимые витамины»).

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

Кстати, если вам интересно познакомиться с PWA поближе, есть классная страница о нём и, конечно, рекомендации Гугла.

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

Что-то меня в бэкенд унесло. Не суть. Суть в том, что при любом бэкенде любого сайта должна быть «морда» сайта и он должен как-то работать. И всё происходит, когда приходят они — фронтенд-разработчики. Они отвечают за разработку внешнего интерфейса сайта, то есть того, как бэкенд и дизайн сайта взаимодействуют с пользователем (если вдруг вы на Хабре случайно, поясню — за каждым сайтом скрывается куча всего: дизайн, различные прослойки и огромный бэкенд, то есть вся логика работы, СУБД и проч). В общем, когда-то истина крылась вот в этой картинке:

Эта эпичная и знакомая всем картинка уже сегодня трансформировалась и действительно, профессия фронтенд-разработчика стала несравнимо сложнее и многокомпонентнее, чем каких-то 7-10 лет назад. Теперь это выглядит так, и 2028 по ощущениям гораздо ближе 🙂

Фронтендеры отвечают за логичную работу всех компонентов сайта, включая контент, кнопки, изображения, навигацию и внутренние ссылки. Нередко именно они проектируют первичную структуру сайта, работают с требованиями пользователей (заказчиков), то есть отвечают за клиентскую сторону пользовательского интерфейса. И если бэкендеры отвечают за программно-аппаратную часть и им скорее важно, как софт взаимодействует с железом, то фронтендеры взаимодействуют с гораздо более сложной «аппаратной частью» — органами зрения, слуха и иногда осязания обычных людей. Задача сделать так, чтобы было удобно, быстро, прозрачно, ожидаемо и т.д. В общем, если косячит фронтендер, это заметят все и сразу.

Вы ещё не напугались от таких перспектив? Тогда едем дальше.

Где нужен?

Если коротко, то везде, где есть веб-разработка, а именно:

Средняя заработная плата

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

Базовые требования к профессионалу

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

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

Важные личные качества

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

Необходимость знания иностранных языков

Для любого программиста крайне желателен английский язык не ниже upper-intermediate с уклоном в технический английский. Так вы сможете читать в оригинале многочисленные рекомендации Google и других компаний для оптимальной разработки (очень много полезной документации!), самообучаться с помощью зарубежных лекций, общаться с коллегами на форумах, задавать вопросы, а также читать книги по юзабилити и дизайну, среди которых очень много крутых англоязычных и пока не переведённых изданий.

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

Где учиться

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

Конечно, первое, с чем вы столкнётесь, выбирая профессию фронтенд-разработчика, это онлайн-школы. Пока я писал эту статью, я погуглил несколько картинок и отчёты площадок по теме фронтенда. У меня весь яндекс и гугл теперь в объявлениях, которые обещают меня сделать гуру JavaScript за 2-3-6-12 месяцев. Соблазнился бы, если бы не знал, что такое JavaScript и как его выучить за 21 день.Брать курс для старта или систематизации знаний или не брать — дело вашего желания, времени и дохода. В любом случае, просто прослушать не получится — придётся сидеть и бить по клавишам, делать тестовые сайты или пилить свой пет-сервис (включая бэкенд, кстати).

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

Лучшие книги и средства обучения

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

Будущее фронтендера

У фронтендера три основных пути развития.

Мифы профессии

▍Фронтенд умирает

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

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

Наиболее популярные языки программирования из отчёта StackOverflow. Кстати, JavaScript здесь удерживает лидерство уже седьмой год.

А вот и тренды Гугла.

Динамика запроса «frontend developer» в мире, 5 лет

Динамика запроса «frontend» (красным) и «фронтенд» (синим) в России, 5 лет

▍Работодатели не очень понимают в видах программистов

А вот второй миф нифига не миф, а чистая правда. Работодатели часто не понимают, кого они нанимают на работу и ищут не того, кто готов решать конкретные задачи и брать на себя ответственность за их решение, а того, кто «должен знать» какой-то им одним ведомый стек технологий. Именно поэтому нужно быть готовым к тому, что вакансия фронтендера будет один раз похожа на вакансию верстальщика, а второй — на вакансию фулстека. Если работодатель выучил аббревиатуру TDD (test driven development), то вакансию можно найти и среди тестировщиков 🙂 На самом деле, такой дичи, как в требованиях к фронтенд-программистам не встречается практически нигде (хуже дела обстоят только у пиарщиков и маркетологов, те вообще должны быть МФУ). Если вам очень хочется в компанию и вы понимаете, что собеседование идёт не туда, постарайтесь перевести разговор на задачи и рассказать, как конкретно вы собираетесь их решать и с помощью какого стека. Впрочем, если не туда пошло уже на собеседовании, может, вы слишком хорошо думаете о компании?

Главный совет

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

А как и почему вы решили стать фронтенд-разработчиком? Что в профессии хорошо, а что нет? Рассказывайте в комментариях, поможем тем, кто стоит на распутье.

Источник

Frontend-разработчик – кто это такой, что он делает и как им стать с нуля, если вообще не разбираешься в программировании

Тот кто делает сайт «с внешней стороны» – настраивает все то, что посетитель сайта видит перед глазами.

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

В чем разница между фронтендом и бэкендом

Результаты фронтенд-разработки пользователь видит перед собой. А все то, что делают бэкенд-разработчики, тщательно скрыто от глаз.

Бэкенд-разработчики работают с серверами, хранением данных и всеми теми механизмами, которые спрятаны «внутри» веб-сайта, но обеспечивают качественную работу его «внешней» стороны.

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

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

Что должен знать Frontend-разработчик

Язык HTML. Это «основа основ» без которой вообще сложно работать с сайтами. Если вы хотите стать фронтенд-разработчиком, вам надо хорошо понимать, какой HTML-тег и за что отвечает, как связывать HTML с другими языками программирования, например, с джава скриптами.

Язык CSS. Практически на всех курсах CSS преподается вместе с HTML. CSS – это система стилей, за счет которых сайты смотрятся красиво.

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

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

Например, есть какая-то база с данными о людях: их пол, возраст, фамилия и имя. Вам надо посмотреть всех людей, которым больше 18 лет – вы указываете этот возраст, нажимаете на кнопочку и на сайте запускается джава скрипт, который «вынимает» нужных людей из базы и показывает вам.

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

Как осваивать фронтенд-разработку

Надо начать с основ языка HTML и CSS. Вы должны изучить именно основы этих языков, понимать главные принципы их синтаксиса, знать самые популярные теги. Детально знакомиться с CSS и HTML вы будете в процессе работы над реальными проектами. Так получится намного эффективнее.

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

Итак, основы есть. Следующий шаг – знакомство с сервисами, которые автоматизируют работу, помогают уменьшать объем кода, визуализировать результаты:

Этих инструментов и умения обращаться с ними вам будет достаточно, чтобы сделать первые уверенные шаги во фронтенде. А дальше останется только расти и развиваться.

Где учиться на фронтенд-разработчика

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

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

Курсы от Михаила Русакова

У него легкая подача материала, все преподается в формате видеороликов – вы «видите» то, о чем говорит автор. Что у него в коде – то и у вас. Курсы недорогие, в каждом из них есть практика и ее много. Я посмотрел отзывы по этим курсам в сети – если вы недовольны материалом, автор делает возврат денег. Так что не бойтесь, вы покупаете не кота в мешке.

У Михаила несколько курсов, посмотрите вот эти.

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

Некоторые заказчики вообще путают фронтенд-разработчиков с верстальщиками – это уже доказывает, что верстку осваивать обязательно надо, без нее во фронтенде никуда. Стоимость – 3 970 рублей.

Программирование на JavaScript с нуля до гуру 2.0. Материал тоже адаптирован для новичков. Эта учебная программа поможет вам изучить язык JavaScript на самом современном уровне, отработать его применение на практике. Здесь 123 урока, общая продолжительность всех видео – 27 часов. Стоимость – 7 470 рублей.

WordPress 5 с нуля до гуру. Это не столько программирование, сколько экскурс по одному из самых популярных веб-движков – вордпрессу. На нем созданы тысячи сайтов. Наш сайт – это тоже вордпресс. Как видите, он весьма неплохо работает.

Все видеоролики курса по продолжительности занимают 5 часов. Вы сможете освоить программу за два выходных дня. Стоимость – 4 970 рублей.

Фреймворк Bootstrap – как раз тот «полезный сервис», который позволяет создавать классные сайты и не тратить много времени на написание кода. Михаил рассказывает о его функциях понятным языком, приводит примеры их использования. Здесь 91 урок, общая продолжительность всех видеороликов – 23 часа.

Заработок на создании сайтов под заказ – общий курс о том, как зарабатывать деньги на создании сайтов, используя для этого разные языки программирования и технологии. Я рекомендую его покупать после того, как вы освоитесь хотя бы с языками HTML, CSS и JavaScript. Пусть данный материал станет вашей финишной прямой в заработке на фронтенд-разработке.

Курс от Нетологии

Здесь обучение более дорогостоящее, но зато официальное – вы защищаете диплом, получаете удостоверение о повышении квалификации. Это в разы повышает ваши шансы быстро найти работу и начать применять свои знания за деньги.

Обратите внимание на программу под названием Фронтенд-разработчик. Обучение здесь очень углубленное, рассчитано на 1 год. В неделю будет 2-3 занятия, поэтому вы легко сможете совмещать освоение курса с основной работой.

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

В портфолио после освоения курса у вас будет 5 проектов. Кроме программирования вы будете изучать английский язык для фронтенд-разработчиков – чтобы самостоятельно понимать документацию и быстрее осваивать программные коды. Стоимость обучения – 77 940 рублей. Платить можно в рассрочку без переплаты.

Курс от Скиллбокса

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

Заключение

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

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

Источник

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

Фронт-энд разработчик (с англ. front-end developer, варианты русского написания и произношения: фронтенд-разработчик, фронтенд-девелопер, фронт-разработчик) — это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере. Главная задача фронт-энд разработчика — перевести дизайн-макет в легко читаемый и расширяемый код, сделать так, чтобы всё на сайте или в веб-приложении работало быстро и удобно для пользователя. Кстати, в 2021 году центр профориентации ПрофГид разработал точный тест на профориентацию. Он сам расскажет вам, какие профессии вам подходят, даст заключение о вашем типе личности и интеллекте.

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

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

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

Это минимальные знания, но над каждым из элементов есть свои настройки. Над HTML — шаблонизаторы, над CSS — препроцессоры, над JavaScript — как расширения языка, например TypeScript, так и различные библиотеки, в том числе библиотеки/фреймворки для построения одностраничных приложений (single page application): React, Vue.JS, Angular.

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

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

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

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

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

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

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

Особенности профессии

В обязанности фронт-энд разработчика в web входит:

Плюсы и минусы профессии

Плюсы

Я работаю последние 5 лет фронт-разработчиком, до этого работал много лет desktop-разработчиком на языке C#. Для себя вижу следующие плюсы во фронтовой разработке:

Минусы

Место работы

Компании по разработке сайтов, веб-приложений, мобильных приложений, фриланс.

Важные качества

Фронт-энд девелоперу для успеха в работе очень пригодятся:

Источник