Кто такой фронтенд-разработчик. Обзор изнутри от Артема Самофалова

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

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

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

Вместе с требованиями к веб-приложениям выросли и требования к обязанностям современного фронтенд-разработчика. Сейчас его работа может включать практически всё: и вёрстка, и настраивание процессов развёртывания и тестирования приложения, и написание unit и end-to-end тестов, поддержка accessibility для людей с ограничениями, а иногда и сам UX/UI дизайн. 

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

За что любят фронтенд?

Можно выделить несколько основных причин:

1. Есть возможность быстро получить визуальный результат своей работы. Здесь есть много пространства для творчества: визуализация своих идей, оптимизация решений, удобство пользования и др.
2. Лёгкий старт. Чтобы попробовать что-нибудь из фронтенд-разработки, не нужны никакие специализированные программы, компиляторы, сложные настройки и прочее. Необходимо лишь желание и любой простейший текстовый редактор. Во фронтенде IDE лишь помогают визуализировать логику кода и упрощают его написание, но не являются обязательной средой разработки или компиляции.
3. Много направлений для углубления знаний и развития: во время работы фронтенд-разработчик взаимодействует с дизайнерами, с бэкенд-разработчиками, тестировщиками, бизнес аналитиками, DevOps специалистами и так далее. При желании всегда можно немного отстраниться от фронтенда и попробовать себя в чём-то новом — предложить дизайн, настроить CI/CD, писать автотесты или при возможности пробовать бэкенд. 
4. Постоянно нужно изучать что-то новое. Есть шутка о том, что во фронтенде каждый месяц появляется новый фреймворк. Это и плюс, и большой минус одновременно. С одной стороны, ты всегда сталкиваешься с чем-то новым и тебе приходится  учиться, пробовать и узнавать новые веяния, но с другой стороны, есть вероятность, что часть твоего опыта канет в небытие навсегда. В какой-то момент ты можешь устать всё время следить за трендами.

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

Что нужно уметь? 

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

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

Следующий шаг — написание алгоритмов. Язык при этом не очень важен. Самое главное — это понять суть построения кода и написания алгоритмов. Уже после того, как вы познакомитесь со всем на практике, стоит начинать изучать сам язык. 

Помимо изучения теории важно постоянно практиковаться. Для этого подойдут и хорошие курсы (например, Rolling Scopes School для новичков и TypeScript Bootcamp для ребят с небольшим опытом), и решение задачек различного уровня на CodeWars или LeetCode. 

Отличный способ научиться фронтенду — это помогать Open Source проектам на github. Современный фронтенд — это множество сторонних библиотек, которые нужно развивать и поддерживать. В разделе issues библиотек часто просят о помощи. Ваш код проверят и дадут хорошую обратную связь. 

По ссылке вы можете найти список issues в популярных репозиториях для новичков. Проще всего изучать issues на страницах инструментов, которые вы используете, можно закрывать issue даже у крупных проектов, таких как React или Visual Studio Code. Кроме того, у Visual Studio Code есть множество плагинов, каждый из которых может содержать ошибки. Такой подход позволяет лучше узнать продукты, которые вы используете.

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

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

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

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

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

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

Где еще поучиться?

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

По окончании TypeScript Bootcamp у студентов  будет собственный готовый проект, написанный на TypeScript и React. Лучшим мы сделаем хорошие предложения о работе.

Полезные материалы

• Рассылка от Дэна Абрамова об основах JavaScript.
• Блог Дмитрия Сошникова об устройстве стандарта ECMA-262, который лежит в основе JavaScript.
• Роадмап по разрабоке.
• Большая статья с ссылками на инструменты современной фронтенд-разработки от моего друга Саши Беспоясова и Андрея Романова.
• Блог о современных тенденциях в индустрии фронтенда
• Еще один блог об индустрии.
• Упражнения на алгоритмы, где можно потренироваться самому и посмотреть как решают остальные/
• Интерактивный курс по GIT.
• Портал о стандартах и магии в CSS.

Телеграм-каналы

Сообщества помогут вам найти хороших менторов и друзей по цеху.

• Defront — про фронтенд-разработку и не только.
• Иван Акулов про разработку и оптимизации.
• О новых фичах стандарта ECMAscript.
• Сообщества:
  • https://t.me/CSSMinskJS
  • https://t.me/minskjson