Как и обещал, в этой статье я коротко, но информативно расскажу о стеке самых популярных технологий, которые необходимо знать для того, чтобы устроиться фронтенд-разработчиком в 2022 году. Весь список я составил самостоятельно, в правильной последовательности, исходя из моего опыта обучения, множества статей, видео-уроков и советов друзей. Также, для того чтобы обозначить сложность той или иной технологии относительно друг друга, я оценил их по 10-ти бальной шкале.
Стек (англ. stack – стопка) технологий — это набор инструментов, применяющийся при работе в проектах и включающий языки программирования, фрэймворки, системы управления базами данных, компиляторы и т.д.
1. HTML
Уровень сложности: 1/10
Необходимость изучения: Обязательно
HTML — язык гипертекстовой разметки, который представляет из себя код для построения и структурирования веб-страниц. Для того, чтобы вы начали понимать как правильно писать разметку страницы, вам понадобиться 1-2 дня. Я говорю о базовых вещах, таких как иерархия элементов и стандартные теги. Далее нужно будет разобраться с формами, таблицами, атрибутами и многим другим. Однозначно, сразу вы всё не запомните, но вы не будете зацикливаться только на HTML без применения CSS.
2. CSS
Уровень сложности: 5/10
Необходимость изучения: Обязательно
CSS — это код, который используется для стилизации веб-страницы и позиционирования элементов относительно друг друга. Новички, которые уже начали изучать css и которые читают это статью, могут удивиться, что я поставил css оценку сложности аж 5 балов. Это означает только то, что вы еще не дошли до адаптивной верстки, flexbox, grid и css-анимации. Поверьте, там есть над чем зависнуть. В интенсивном режиме обучения вполне не плохо можно научиться пользоваться html и css за 1,5 месяца. Но, поскольку в следующие пару месяцев, вы можете ничего не верстать вообще, то желательно периодически возвращаться к верстке, чтобы не терять навык.
3. JavaScript
Уровень сложности: 10/10
Необходимость изучения: Обязательно
JavaScript — это полноценный динамический язык программирования, который может использоваться в абсолютно разных направлениях, но в нашем случае, он применяется к HTML документу, обеспечивает динамическую интерактивность на веб-сайтах, управление данными и взаимодействие с сервером. Именно ему я поставил наивысшую оценку сложности, чтобы можно было понимать о сложности других технологий относительно js. Основные вещи, при очень интенсивном режиме обучения и постоянной практике, можно понять за 4 месяца. Но никогда ни на одном этапе вашего обучения или работы, вы не будете знать всё на 100%. В принципе, это же касается и CSS и многих других технологий.
4. jQuery
Уровень сложности: 4/10
Необходимость изучения: Необязательно
JQuery — это javascript библиотека, которая представляет собой набор функций для упрощенного, удобного и быстрого взаимодействия между javascript и html. В современном мире, эта технология отошла на задний план, и практически никогда не используется в новых проектах. В ходе работы вам могут попадаться старые проекты, в которых используется jQuery, а в некоторых вакансиях до сих пор пишут в требованиях необходимость умения работы с этой библиотекой. Поэтому, когда я пишу, что необходимость обучения необязательна, то это не значит, что вы должны вообще пройти мимо этой технологии. Желательно потратить хотя-бы 2-3 дня, посмотреть видео, «пощупать» её, чтобы понимать что это такое и как оно работает.
5. Node.js
Уровень сложности: ?/10
Необходимость изучения: Не нужно
Node.js — это среда для работы и выполнения кода javascript, которая может превратить его из узкоспециализированного языка в язык общего назначения. В основном используется для написания кода для серверной части. Я в него особо не углублялся, и если вы не собираетесь или пока-что не собираетесь становиться fullstack разработчиком, то не стоит тратить время на эту технологию. Вы просто должны знать, что это такое и для чего используется. Об этом вас могут спросить на собеседовании. Исключением из написано является менеджер пакетов Node.js о котором написал ниже.
6. Node Package Manager
Уровень сложности: 3/10
Необходимость изучения: Обязательно
NPM — это менеджер пакетов, который автоматически устанавливается вместе с Node.js, и который позволяет устанавливать в проект какие-то либо библиотеки или инструменты для более удобной и продуктивной работы. Я не могу сказать, что я сильно углублялся в его работу, но я им пользуюсь буквально каждый день. Я считаю, что на первом этапе достаточно просто знать как устанавливать пакеты, используя базовые команды в терминале, и поверхностный принцип работы, включая понимание что такое зависимость одного пакета от других. Чем больше вы потратите времени на изучения npm, тем лучше. Но я бы не рекомендовал в самом начале тратить на это больше 2-3 дней.
7. Gulp
Уровень сложности: 5/10
Необходимость изучения: Необязательно
Gulp — самый распространенный менеджер для выполнения часто используемых задач, которые необходимых в разработке. Например, минификация, объединение файлов, трнаспиляции sсss в css и т.д. В современном мире чаще всего его используют в небольших проектах, которые впоследствии могут использоваться совместно с CMS (система управления контентом сайта) и в которых использовать Webpack (о котором написал ниже) просто нет необходимости. Я бы рекомендовал хотя-бы ознакомиться с этой технологией, поиграться с ней пару дней. На собеседовании могут спросить.
8. Babel
Уровень сложности: 3/10
Необходимость изучения: Желательно
Babel — это программа, которая переписывает современный JavaScript на старый стандарт, а также транспилирует JSX (расскажу ниже) и прочие расширения синтаксиса в чистый JavaScript. Самый распространенный случай, когда разработчик касается Babel своими руками — это когда возникает необходимость, чтобы код поддерживался старыми браузерами, некоторые из которых больше никогда не будут обновляться. На самом деле, его возможности шире, и в React он выполняет работу «под капотом», а мы этого даже не видим. Не могу сказать, что если меня попросят воспользоваться Babel прямо сейчас, то я с легкостью это сделаю. Я больше понимаю его предназначение, чем имею опыт работы с ним. Также даже не имею представления на сколько часто он встречается в работе разработчика, время покажет.
9. Webpack
Уровень сложности: 6/10
Необходимость изучения: Обязательно
Webpack — сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл. Простыми словами, при большом количестве файлов программы, он создает один объемный файл для её запуска. Это же касается и html/css. Также в него встроены все функции, которые есть в Gulp. На начальном уровне, я считаю, невозможно понять и запомнить весь его функционал, но нужно обязательно уделить достаточно времени, чтобы уметь делать базовую настройку для вашего приложения. Практиковаться нужно до тех пор, пока это не будет происходить на автомате.
10. Git
Уровень сложности: 4/10
Необходимость изучения: Обязательно
Git — это система контроля версий, которая даёт возможность разработчикам совместно работать над одним проектом, управлять и отслеживать изменениями в файлах проекта.
GitHub — это сервис, который работает с этой системой, расширяющий её возможности. Одновременно с этим является одним из самых крупных сервисов для хостинга IT-проектов и своеобразной социальной сетью. GitHub — самый распространенный и удобный сервис для работы с Git, поэтому разбираться нужно именно в нём.
Нет необходимости смотреть обучающие видео просто про Git, сразу начинайте с GitHub и вам всё станет со временем понятно. Вообще, эту технологию желательно уже знать как-только вы разобрались с html/css, в первую очередь, для вашего удобства, чтобы вы могли попросить помощи у знакомого/друга/ментора/преподавателя, залив свой код на GitHub и передав ему ссылку.
Отмечу, что не совсем сразу приходит понимание что и как происходит. Я до сих пор знаю только базовые функции, которые мне пригодились во время учебы в IT-школе. Что нужно знать для работы на реальных проектах я пока не знаю, но обязательно об этом напишу, когда устроюсь на работу. Кроме того, настоятельно рекомендую с самого первого дня работать с ним используя терминал (командную строку), а не браузер или какие-либо десктопные программы.
11. React
Уровень сложности: 9/10
Необходимость изучения: Обязательно
React — это самая популярная библиотека, которая позволяет удобно разрабатывать интерфейсы сайтов и приложений, разделяя код на небольшие компоненты (кусочки кода, которые отвечают за конкретный элемент). На данный момент я только изучаю React и это мне даётся сложно. Но уже прекрасно понимаю его преимущества. Среди них: JSX — синтаксис javascript, который на 99% похож на html, и который пишется в общем файле js; повторное использование компонентов в любом участке кода; и в целом, удобное создание одностраничных приложений (не путать с одностраничным сайтом). Не уверен, но сейчас мне кажется, что на изучение Реакта необходимо потратить хотя-бы два месяца. Более подробно о библиотеках, которые всегда используются вместе с React я расскажу как только буду более компетентен в этом вопросе.
В целом статья получилась не слишком уж короткой, но зато были затронуты все важные технологии, без которых просто не обойтись современному фронтенд-разработчику. Перед написанием каждого из разделов статьи, я старался проверять свои знания при помощи гугла, поэтому каких-либо грубых нарушений в терминах или принципах работы какой-то технологии, быть не должно. По крайней мере, я постарался описать всё максимально простым языком.
Сейчас продолжаю писать своё одностраничное приложение на чистом js, которое я обязательно продемонстрирую с подробным описанием, а также продолжаю учить Реакт.
Мой путь в IT 