Frontend developer skills
Frontend developer skills

Рынок с каждым днем развивается и для текущих разработчиков главной задачей всегда является держать руку на пульсе и быть с курсе всех изменений в сфере IT. Будь то технологии, библиотеки, либо архитектурные решения. Программисты любого направления Middle уровня и выше понимают, что главная ценность в разработчике это — решать проблему лучшим, доступным и самым простым способом. И для достижения этой цели необходимо использовать определенный набор инструментов, который не всегда одинаковый.

Приведу аналогию.

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

ℹ️ Если разработчик понимает как, где и какие инструменты использовать - это уже его делает профессионалом своего дела.

? Сегодня хотелось бы поделиться личным списком, который я бы рекомендовал для успешного старта карьеры. Необходимым минимумом инструментов для того, что бы претендовать в 2024 году на позицию Junior Frontend Developer.

Итак, что же нужно знать:

  1. HTML5 — Уметь писать правильную и семантическую разметку. Знать, когда применить <section>, а когда <div>. Когда нужно применить <header>, <footer>, <article>. Как размечаются формы.

  2. CSS3 — Flexbox, Grid Layout, медиа‑запросы для адаптивного дизайна, анимации и трансформации.

  3. Javascript — Типы данных и работа с ними, стрелочные и обычные функции, let/const, деструктуризация, spread/rest операторы, логические операторы, циклы, Promises, async/await. Умение обработать ошибки.

  4. TypeScript — Понимание базовых типов (строки, числа, булевы значения), интерфейсов и типов (interface, type), основ TypeScript-аннотаций. Умение работать с типизацией функций и объектов, параметрами по умолчанию, и использовать generics (обобщённые типы) для создания более гибких компонентов.

  5. React — Компоненты, хуки (hooks), управление состоянием (state management), React Router для маршрутизации.

  6. Vue — Основы компонентов, директивы, Vue Router, Vuex для управления состоянием.

  7. Управление состоянием — Redux, Pinia, Context API в React.

  8. Систему контроля версий (Git) — основные команды, ветвление и слияние.

  9. Сборщики — Webpack и Vite. Умение организовать базовую настройку проекта.

  10. Инструменты разработки и отладки — Chrome DevTools, ESLint, Prettier.

  11. Cеть — Основы HTTP, GET/POST запросы, обработка JSON.

  12. Работа с библиотеками для запросов — Axios, Fetch API.

  13. Понимание принципов контейнеризации — Docker (на базовом уровне).

  14. Soft Skills. Умение коммуницировать в команде, принимать и давать обратную связь. Умение планировать работу. Способность быстро осваивать новые технологии и подходы.

Последний пункт можно было бы смело ставить первым, т.к. о нем часто забывают или не ставят в приоритет в процессе обучения. Но есть много примеров, когда 2 разработчика одинакового уровня устраиваются на одинаковую должность, и у одного прокачены софт‑скиллы, а у другого нет. Угадайте, у кого будет больше шансов получить оффер и, скорее всего, более жирный? И часто бывают, что работодателю лучше взять более софтового разработчика потому, что работать в команде будет проще и лучше, а харды можно прокачать уже по мере необходимости.

Поэтому, софт‑скиллы требуется качать наравне и с хард‑скиллами.

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

Также оставляю ссылку на довольно неплохой roadmap (EN). Практически для каждого пункта есть ссылка на изучение данной темы. Ссылка

PS: Да, список довольно внушительный, но таковы реалии. Сюда можно было бы добавить еще TypeScript, либо базовое понимание unit‑тестирования, но мне показалось, что освоив данные инструменты, подготовив качественное портфолио и прокачав софт‑скиллы — этого будет более, чем достаточно что бы претендовать на данную должность.

А что бы вы добавили или убрали из списка? Как по вашему мнению изменился рынок? В лучшую или худшую сторону? Если есть опыт поиска и пройденных собеседований — буду рад почитать и обсудить.

Комментарии (10)


  1. Annsky
    02.11.2024 13:32

    Хороший, правильный список


    1. atomr_mf Автор
      02.11.2024 13:32

      Спасибо за оценку


  1. Freemjke
    02.11.2024 13:32

    Typescript - мастхэв в любом случае. Без него - шансы найти первую работу становятся еще ниже (а у джунов (без опыта) и так крайне плачевная ситуация по вакансиям).

    Unit-тесты, e2e - тоже довольно часто требуют.

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

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


    1. atomr_mf Автор
      02.11.2024 13:32

      Да, полностью с вами согласен, когда писал статью выходило уже много и подумал почему то, что typescript может не понадобится на первых шагах, но ts сейчас необходим практически в 100% вакансий. Обязательно его включу в список, спасибо


  1. llSergey
    02.11.2024 13:32

    Не мне конечно судить… Ты считаешь Docker нужнее ts?


    1. atomr_mf Автор
      02.11.2024 13:32

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


  1. yri066
    02.11.2024 13:32

    Когда был студентом, то про вёрстку шутили что div достаточно для всего (так и есть, если плевать на семантику). Он может быть чем угодно: блоком, кнопкой, картинкой или текстовым полем (довольно недавно узнал, но в VK текстовое поле для ответа на комментарий на самом деле div c contenteditable="true").


  1. refreyder
    02.11.2024 13:32

    а можно такой же только для бэка?


    1. atomr_mf Автор
      02.11.2024 13:32

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


  1. Satansoft
    02.11.2024 13:32

    В 2024 он должен знать то же, что и в 2020, только ещё иметь 5 лет коммерческого опыта.