В данной статье нам хотелось бы рассказать что должен знать junior frontend разработчик, чтобы получить свою первую работу в компании либо получить свой первый заказ на фрилансе.
Для начала разделим знания, навыки и умения на soft skills и hard skills. Что же это такое?
Что такое soft skills и hard skills
Hard skills это специальные навыки, которые непосредственно потребуются для работы над проектами. Например для frontend разработчика это знание технологий HTML/CSS/JS и так далее.
Soft skills это навыки и умения, которые позволяют эффективно выполнять свою работу, легко взаимодействовать с коллегами и адаптироваться к изменениям в проекте. Начнем с soft skills.
Soft skills для junior frontend разработчика
Английский язык
Огромным плюсом будет то, что вы знаете английский язык, потому что самые качественные документации и книги от первоисточника, а они чаще всего на английском языке. Да, самые популярные документации уже переведены на русский язык, но они не всегда актуальны. Поэтому постоянно прокачивайте свой уровень английского.
Обучаемость и адаптация
Задайте себе вопрос — на сколько вы легко обучаетесь? Хороший программист никогда не останавливается в изучении технологий и постоянно развивается. Вместе с развитием технологии, развивается и сам программист. Вы должны легко ориентироваться в новой информации, адаптироваться к изменениям в той или иной технологии, потому что во frontend технологиях постоянно что-то меняется или появляются новые технологии.
Творческое видение
Так как frontend разработка тесно связана с версткой, вам придется взаимодействовать с дизайнером поэтому frontend разработчику нужно развивать творческое мышление. Вам не нужно вникать во все тонкости веб-дизайна, тем не менее необходимо знать основные принципы — как работать с веб шрифтами и графикой, теорию цвета для веб-дизайна, Pixel Perfect верстка и тд.
Коммуникабельность
Одно из самых важных soft skills для программиста. Коммуникации в команде разработчиков помогают легче и быстрее решать проблемы при разработке. Если вы не общаетесь с другими людьми из вашей команды, то рискуете остаться один на один со сложной, а возможно и неразрешимой задачей. Каким бы профессионалом вы не были в области frontend разработки всегда найдется задача, которая может поставить вас с тупик. Навык коммуникации важен в команде программистов — так люди обмениваются опытом и знаниями. Отлично когда вся команда владеет знаниями, которые есть у вас и наоборот. Здесь выигрывают все: команда, проект и, конечно же, вы.
Теперь узнаем ещё что должен знать junior frontend разработчик? Перейдем к hard skills.
Hard skills для junior frontend разработчика
HTML, CSS
Безусловно вы должны знать основы технологий HTML и CSS. Без этого никуда! Эти технологии основа для верстки сайтов, а ели вы не будете знать как сверстать простой макет, то ни о какой позиции frontend разработчика в IT-компании не может быть и речи.
Что вы должны знать в HTML:
- основы HTML (теги, атрибуты, спецсимволы)
- работа с формами
- семантика в HTML
- уметь писать валидную HTML-разметку
Теперь поговорим о CSS. Желательно чтобы кандидат на позицию junior frontend разработчика умел работать с CSS препроцессорами, такими как Sass, SCSS, LESS, Stylus. Мы отдадим предпочтение Sass или SCSS, так как сейчас большинство компаний используют именно эти препроцессоры.
Что нужно знать в CSS:
- основы CSS
- блочные и строчные элементы
- позиционирование элементов
- адаптивный дизайн и медиа-запросы
- Flex Box, CSS Grid
- и т.д
JavaScript
Следующее чем вы должны уверенно владеть это JavaScipt, причем не только основы. Если вы более менее освоили JS, то можно изучить как работает библиотека jQuery. Эта библиотека всё еще популярна, и её использует большой процент сайтов. Все же на ней не стоит долго останавливаться. Далее стоит перейти к JS фреймворкам, которые заменяют jQuery.
Самые популярные JS фреймворки на данный момент это React.js, Vue.js, Angular. Еще к ним можно добавить фреймворк Svetle, который в последнее время всё больше и больше вызывает интерес у разработчиков.
Есть мнение, что начинающему frontend разработчику Vue.js будет изучить легче всего, хотя с другой стороны по React.js можно найти больше информации, к тому же по React вы сможете найти больше вакансий. Angular, как правило, используют в больших компаниях для крупных сложных проектов.
В целом, какой фреймворк изучать решать вам. Посмотрите интересен ли вам этот фреймворк, актуален ли он в данный момент и не забывайте просматривать вакансии в вашем городе.
Git
Безусловно вы должны уметь работать с системой контроля версий Git — это ПО, которое позволяет хранить разные версии одного и того же файла. Системы контроля версий это инструмент, который использует в своей работе любой программист от juniora до тим-лида с большим опытом разработки. Git — это основа командной разработки, где синхронизация процесса играет важную роль.
Node.JS
Так же вы должны иметь представление о работе с Node.js. Эта кроссплатформенная среда выполнения для JavaScript. Вместе с Node.js из коробки идет менеджер пакетов npm. С помощью него вы можете подключить любой модуль к проекту. К примеру, если вы хотите использовать в вашем проекте Bootstrap, вам необязательно вручную копировать все файлы Bootstrap’а с официального сайта, достаточно указать в конфигурационном файле package.json вашего проекта, что вам нужен Bootstrap и пакетный менеджер npm установит Bootstrap в копию вашего проекта, при этом не нужно хранить все подобные библиотеки в репозитории Git вашего проекта.
Таск-раннеры и сборщики
Речь идет о таких инструментах как Gulp, Grunt, Webpack. Предлагаем начать с Gulp, он подходит для большинства задач, удобный в разработке и легкий в освоении. Если же вы собираетесь изучать фреймворки, то без Webpack вам не обойтись.
SVG
Отлично, если вы знаете как работать с SVG форматом изображений. SVG (Scalable Vector Graphics) — формат масштабируемой векторной графики. Он позволяет масштабировать изображение без потери качества. Также будет плюсом умение владеть функционалом графических редакторов, таких как Photoshop, Illustrator, Figma, Sketch.
Заключение
Таким образом junior frontend разработчик довольно универсальный человек в команде веб-программистов. Он должен уметь верстать, создавать логику на клиентской части приложения, понимать как происходит взаимодействие клиента и сервера. Для изучения такого большого объема знаний потребуется не одна неделя. Потребуется упорство, старание и любознательность. Если вы не можете выстроить свою кривую обучения, то в этом вам поможет roadmap для frontend разработчика.
