Дорожная карта карьеры фронтенд-разработчика на 2023 — подробное пошаговое руководство

Это руководство будет для вас полезно, если вы хотите:

• Начать свою карьеру в качестве фронтенд-разработчика и сразу же выйти на рынок.
• Развить свои навыки и карьеру, чтобы получить более высокооплачиваемую работу.
• Найти удаленную работу мечты.

Не бойтесь учиться — будьте последовательны

Не бойтесь увидеть длинный список учебных материалов. Просто идите маленькими шажками, и вы скоро доберетесь поставленных целей. Если вам нравится процесс, то все, что вам нужно делать, это оставаться последовательным. Без лишних слов вот пошаговая карта развития:

1. Основы computer science
2. HTML & CSS
3. CSS фреймворки (Sass, Tailwind)
4. JavaScript
5. React.js
6. Next.js
7. TypeScript
8. Jest/React-testing-library
9. Git
10. REST API
11. GraphQL
12. Принципы дизайна и основы UI/UX

Основы computer science

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

HTML и CSS

Столпами фронтенд разработки по-прежнему являются HTML и CSS, первый позволяет вам определить скелет веб-страницы, а последний поможет вам придать этому скелету форму. Что касается CSS, убедитесь, что вы хорошо понимаете следующие концепции:

• Селекторы: понимание того, как выбирать определенные элементы HTML, чтобы применять к ним стили.
• Блочная модель: понимание макета HTML-элементов, включая то, как ширина, высота, отступы, границы и поля вычисляются и взаимодействуют друг с другом.
• Отображение и позиционирование: понимание того, как управлять тем, как элементы отображаются на экране (например, в виде блока (block) или инлайн (inline) элемента) и позиционируются по отношению к другим элементам (например, статические (static), абсолютные (absolute), относительные (relative), фиксированные (fixed)).
• Переходы (transitions) и анимация (animations): понимание того, как создавать простые анимации и переходы с помощью CSS без использования JavaScript.

• Препроцессоры CSS: понимание того, как использовать препроцессоры CSS, такие как Sass и Stylus, для написания более удобного в сопровождении модульного CSS.
• Совместимость с браузерами: Понимание совместимости браузеров и способов написания CSS, который будет одинаково работать в разных браузерах и на разных устройствах.
• Отзывчивый (responsive) дизайн: понимание того, как создавать дизайны, которые адаптируются к разным размерам экрана и устройствам, используя
• Медиа-запросы (@media): CSS медиа запросы используются для изменения стиля вашего сайта в зависимости от размера экрана или используемого устройства. Медиа запросы в основном используются при разработке стилей для разных размеров экрана, что позволяет применять определенные правила только к определенным размерам экрана.
• Контейнерные запросы (@container): эти запросы помогают изменять стили элементы в зависимости от размера содержащего их элемента, а не окна браузера.
• Flexbox и Grid: Понимание основ flexbox и grid, которые представляют собой макеты CSS, позволяющие создавать сложные адаптивные дизайны с минимальным количеством кода.

CSS фреймворки

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

• TailwindCSS: CSS фреймворк, ориентированный на утилиты. Tailwind предоставляет набор CSS классов, которые можно использовать для быстрого применения общих стилей к HTML элементам. Это способствует написанию минимального и семантического CSS. Легкий, отзывчивый и современный CSS-фреймворк. Он разработан, чтобы стать отправной точкой для любого типа проекта, требующего гибкой системы сетки и базового стиля.
• Material-UI: это популярный CSS фреймворк, которая реализует рекомендации по Material UI дизайну, разработанные Google. Он включает в себя широкий спектр предварительно разработанных пользовательских компонентов.
• Storybook: это не совсем CSS фреймворк. Это инструмент для изолированной разработки UI компонентов для React и многих других библиотек и фреймворков.
• Bootstrap: один из самых популярных CSS фреймворков. Bootstrap представляет собой комплексный набор инструментов, который включает в себя предварительно разработанные компоненты, адаптивную сетку и поддержку CSS препроцессоров.
• Sass: это препроцессором CSS, который упрощает и ускоряет написание CSS-кода. На нашем сайте есть подробное руководство по Sass. Рекомендуем ознакомиться.

JavaScript

Невозможно говорить о фронтенде, не упомянув JavaScript. Это язык фронтенда по определению. Вот самые важные понятия, которые вам нужно усвоить:

• Переменные (var, let, const)
• Примитивные типы данных и объекты
• Операторы сравнения JavaScript
• Операторы if/else и switch
• Функции и стрелочные функции
• Объекты
• Массивы
• Шаблонные литералы
• Области видимости — глобальная, блочная, функциональная

Также получайте ежедневные советы по фронтенд-разработке в бесплатном телеграм-канале.

React.js

React.js — это JavaScript библиотека для создания пользовательских интерфейсов, которая широко используется в веб-разработке. Вот несколько причин, по которым вы можете захотеть изучить React.js:

• Популярность: React является одной из самых популярных JavaScript библиотек для создания пользовательских интерфейсов и имеет большое и активное сообщество, а это означает, что существует множество доступных ресурсов, которые помогут вам учиться. На нашем сайте вы можете найти много материалов по ReactJS.
• Переиспользуемые компоненты. Одной из ключевых особенностей React является то, что он позволяет создавать пользовательский интерфейс с помощью переиспользуемых компонентов, что упрощает создание и поддержку больших и сложных приложений.
• Виртуальный DOM: React использует виртуальный DOM, который может оптимизировать производительность вашего приложения за счет уменьшения количества обновлений реального DOM. Это может сделать ваше приложение более отзывчивым.
• Поддержка рендеринга на стороне сервера: React позволяет вам рендерить приложение на стороне сервера, что может повысить производительность приложения, особенно для пользователей с медленным подключением к Интернету.
• Большая экосистема: React имеет большую и растущую экосистему, включающую множество популярных библиотек, фреймворков и инструментов, таких как React Router, Redux, Webpack и т. д.
• Широкое распространение: React широко используется компаниями и организациями всех размеров, его используют Instagram, Airbnb, Netflix, Uber и т. д.
• Легче учиться: React следует более простому и интуитивно понятному подходу к созданию пользовательского интерфейса, что упрощает его изучение и понимание.
• Большое количество вакансий: поскольку React используется большим количеством компаний, для React разработчика существует множество вакансий.

Таким образом, React.js — это мощная, гибкая и популярная библиотека для создания пользовательских интерфейсов, и знание React - это важный навык в современном мире веб-разработки. В полном руководстве по Реакт вы можете найти пошаговый гайд по разработке на ReactJS.

Next.js

Next.js — это фреймворк, созданный на основе React.js, который упрощает создание приложений React с рендерингом на стороне сервера (SSR). Такие приложения включают автоматическое разделением кода и оптимизированы для SEO. Вот несколько причин, по которым вам может понадобиться изучить Next.js.

• Рендеринг на стороне сервера (Server-side rendering, SSR): Next.js упрощает создание приложений React, которые рендерятся на сервере. Это повышает производительность вашего приложения и сделать его более оптимизированным для SEO.
• Автоматическое разделение кода: Next.js автоматически разбивает ваш код на более мелкие фрагменты, так что браузер загружает только тот JavaScript, который требуется для отображения текущей страницы, что может повысить производительность вашего приложения.
• Простота разработки и развертывания: Next.js обеспечивает простой и последовательный процесс разработки и имеет встроенную поддержку таких функций, как горячая перезагрузка кода и автоматическая транспиляция. Он также обеспечивает простое и согласованное развертывание с поддержкой широкого спектра вариантов хостинга, включая статический хостинг и бессерверные функции (serverless).
• Генерация статического сайта (Static site generation): Next.js позволяет создавать статические HTML-страницы во время сборки, что может быть полезно для создания статических версий ваших страниц для повышения производительности или для обеспечения доступности вашего приложения в offline режиме.
• Plug-and-play: Next.js имеет большую экосистему надстроек, плагинов и пакетов, которые вы можете использовать для добавления функциональности в свое приложение. Вы можете использовать такой пакет, как NextAuth, чтобы добавить аутентификацию, или пакет, такой как NextI18next, чтобы добавить интернационализацию.
• Система роутинга: Next.js предоставляет мощную систему роутинга, которая позволяет вам определять маршруты и обрабатывать загрузку и рендеринг данных для конкретных маршрутов.
• Сообщество: у Next.js большое и активное сообщество, а это значит, что есть много ресурсов, которые помогут вам учиться

TypeScript

TypeScript — это надмножество JavaScript с типами, который компилируется в простой JavaScript. Он предоставляет множество функций, которые помогут вам писать более надежный, удобный в сопровождении и масштабируемый код. Вот несколько причин, по которым вы можете захотеть изучить TypeScript:

• Строгая типизация: TypeScript предоставляет строгую типизацию, которая может помочь вам обнаружить ошибки типизации во время компиляции, а не во время выполнения. Это может сделать ваш код менее подверженным ошибкам и более простым в обслуживании.
• Улучшенный IntelliSense: система типов TypeScript обеспечивает улучшенный IntelliSense, подсказки кода и проверку ошибок в инструментах разработки, таких как Visual Studio Code, которые могут помочь вам писать код более эффективно и сократить время, затрачиваемое на отладку.
• Улучшенная документация. Включая аннотации типов в свой код, вы можете создавать более самодокументируемый код, облегчая понимание и работу с ним для других.
• Совместимость: TypeScript разработан как надмножество JavaScript, что означает, что вы можете использовать любой допустимый код JavaScript в TypeScript. Это упрощает постепенное внедрение в существующую кодовую базу JavaScript.
• Большое сообщество: TypeScript имеет большое и активное сообщество, а это означает, что существует множество ресурсов, которые помогут вам учиться.
• Повышенная масштабируемость: функции и система типов TypeScript позволяют писать более удобный и масштабируемый код, поскольку это упрощает организацию и анализ кода, что делает его особенно полезным для большой кодовой базы и долгосрочных проектов.
• Используется крупными компаниями: TypeScript используется многими крупными компаниями и проектами с открытым исходным кодом, включая Asana, Asos, Airbnb, Microsoft, Asp.net, Angular и т. д.

На нашем сайте есть подробное руководство по TypeScript.

Тестирование с помощью Jest/react-testing-library

Jest — это популярный JavaScript фреймворк для тестирования, который широко используется для тестирования приложений JavaScript и React. Вот несколько причин, почему вы можете захотеть изучить Jest:

• Простота в использовании: Jest разработан так, чтобы его было легко использовать, и он имеет простой и интуитивно понятный API, который позволяет легко приступить к тестированию JavaScript кода.
• Snapshot тестирование: Jest имеет встроенную поддержку snapshot тестирования, что позволяет вам автоматически делать “снимок” выходных данных вашего компонента и сравнивать его с предыдущим “снимком”. Это может помочь вам обнаружить неожиданные изменения в ваших компонентах и упростить обновление ваших тестов.
• Интегрированная библиотека функций для проверок: Jest включает в себя функции для проверок, что избавляет от необходимости устанавливать дополнительную библиотеку, такую как chai или expect.
• Мощные возможности для моков: Jest предоставляет мощные возможности мокирования, которые позволяют вам легко имитировать и делать заглушки для функций, модулей и других объектов в вашем коде.
• Скорость и производительность: Jest запускает ваши тесты параллельно, что может значительно ускорить работу вашего набора тестов. Jest также имеет быстрый и эффективный механизм тестирования, который может быстро запускать тесты в памяти, поэтому вам не нужно запускать браузер или Node.js процесс.
• Создан для React: Jest создан с учетом React и имеет набор функций, специально разработанных для хорошей работы с React и React Native. Сюда входят такие функции, как автоматическое обнаружение и мокирование зависимостей компонента, возможность тестирования взаимодействия компонентов и поддержка JSX.
• Большое сообщество: у Jest большое и активное сообщество, а это значит, что есть много ресурсов, которые помогут вам учиться.

Git

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

REST API

Одним из самых популярных типов API является REST или, как их иногда называют, RESTful API. У REST или RESTful API есть много преимуществ — они предназначены для использования особенностей существующих протоколов. Хотя REST может использоваться практически по любому протоколу, при использовании для web API он обычно использует преимущества HTTP. Это означает, что разработчикам не нужно устанавливать дополнительное программное обеспечение или библиотеки при создании REST API. Одно из ключевых преимуществ REST API заключается в том, что он обеспечивает большую гибкость. Эта гибкость позволяет разработчикам создавать API, который отвечает вашим потребностям, а также удовлетворяет потребности самых разных клиентов.

GraphQL

GraphQL — это язык запросов и серверная среда выполнения для API, которая отдает пользователям только те данные, которые они запрашивают, и не более. GraphQL разработан, чтобы сделать API быстрыми, гибкими и удобными для разработчиков. Его даже можно развернуть в интегрированной среде разработки (IDE), известной как GraphiQL. В качестве альтернативы REST GraphQL позволяет разработчикам создавать запросы, которые извлекают данные из нескольких источников данных за один вызов API. Кроме того, GraphQL дает специалистам по обслуживанию API возможность добавлять или удалять поля, не затрагивая существующие запросы. Разработчики могут создавать API любыми методами, которые они предпочитают, а спецификация GraphQL гарантирует, что они будут работать предсказуемо для клиентов. Вот полное руководство по GraphQL для быстрого старта.

Принципы дизайна и основы UI/UX

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

Раньше в CSS было всего четыре единицы измерения, которые вам нужно было знать, и они могли охватить практически все мыслимые варианты использования. Однако со временем и изменением технологий этих четырех единиц уже не хватало для обработки всех вариантов использования. Из-за этого CSS добавил еще 20 единиц измерения области просмотра. Это много, но они разбиты на шесть основных с тремя уникальными модификаторами, что дает нам в общей сложности 24 комбинации.

Оригинальные четыре единицы измерения

Основными единицами CSS являются vw, vh, vmin и vmax. Скорее всего, вы использовали или видели их раньше, поэтому рассмотрим их кратко.

vw

vw расшифровывается как Viewport Width и представляет собой процент от ширины окна просмотра. Число, помещенное перед vw, представляет собой процент от ширины области просмотра, которой будет эта длина. Например, если вы написали 10vw, то это будет представлять 10% от ширины вашего окна просмотра. Окно просмотра (viewport) — это по сути размер вашего экрана, поэтому, если бы вы были на большом рабочем столе шириной 1920 пикселей, 10vw означало бы 192 пикселя. Если бы вы вместо этого использовали мобильный телефон шириной 300 пикселей, то 10vw был бы только 30 пикселей.

vh

vh расшифровывается как Viewport Height. Он точно такой же, как vw но для высоты, а не ширины. Эти две единицы можно использовать в комбинации, чтобы легко заставить элемент заполнять весь размер экрана.

.full-screen {
  width: 100vw;
  height: 100vh;
}

vmin и vmax

vmin и vmax представляют собой максимальное и минимальное измерение области просмотра. Например, если вы работаете на телефоне шириной 300 пикселей и высотой 800 пикселей, vmin будет представлять ширину области просмотра, а vmax — высоту устройства. Эти единицы действительно полезны, если вам нужно определить размер элемента на основе наименьшего/наибольшего размера экрана. Например, следующий CSS создаст квадрат, который будет максимально большим, не переполняясь ни в каком направлении, поскольку он никогда не будет больше 100% от наименьшего размера экрана.

.no-overflow {
  width: 100vmin;
  height: 100vmin;
}

Две новых единицы

CSS пытается отойти от строгой модели верха/низа, слева/справа, высоты/ширины к более динамичной модели начала/конца, блочной/инлайн модели. Основная причина этого изменения заключается в том, чтобы упростить внедрение различных направлений написания в коде. Если все ваше приложение переключается с горизонтального направления письма на вертикальное, идея верха/низа или ширины/высоты не обязательно означает одно и то же, поскольку, если вы хотите добавить отступы выше и ниже текста, это будет представлено как отступы слева и справа в вертикальной системе, а не заполнение сверху и снизу. Вот почему CSS добавил модули просмотра vi и vb.

vi

vi расшифровывается как Viewport Inline и представляет собой встроенное (инлайн) направление вашего документа. В горизонтальном направлении это соответствует ширине окна просмотра, а в вертикальном направлении это соответствует высоте окна просмотра. Самый простой способ запомнить направление встроенного текста — помнить, что это то же направление, в котором движется ваш текст. Еще один способ запомнить это: если у вас есть два встроенных элемента (например, два span) рядом друг с другом, направление, в котором они складываются, является вашим встроенным направлением.

.horizontal {
  writing-mode: horizontal-tb;
  width: 10vi; /* То же, что и 10vw */
}

.vertical {
  writing-mode: vertical-lr;
  height: 10vi; /* То же, что и 10vh */
}

vb

vb расшифровывается как Viewport Block и представляет собой направление блока вашего документа. Это противоположно vi, поэтому в горизонтальном направлении это будет соответствовать высоте окна просмотра, а в вертикальном документе это будет представлять ширину вашего окна просмотра. Если вы изо всех сил пытаетесь запомнить эту единицу, просто помните, что направление блока всегда будет направлением, в котором блочные элементы (например, два div) будут складываться друг на друга.

.horizontal {
  writing-mode: horizontal-tb;
  width: 10vb; /* То же, что и 10vh */
}

.vertical {
  writing-mode: vertical-lr;
  height: 10vb; /* То же, что и 10vw */
}

Модификаторы единиц измерения вьюпорта

До сих пор мы рассмотрели шесть основных типов модулей области просмотра, но есть три различных модификатора, которые вы можете добавить к единицам, чтобы они вели себя по-разному, когда ваше окно просмотра может изменять размеры. Например, когда вы просматриваете веб-страницы на мобильном телефоне, вы можете заметить, что адресная строка исчезает при прокрутке вниз. Когда это происходит, ваше окно просмотра технически меняет размер, так как теперь строка URL-адреса больше не занимает часть вашего окна просмотра. Текущие блоки CSS не имеют возможности справиться с этим изменением размера области просмотра, поэтому были добавлены эти модификаторы. Этими модификаторами являются s, l и d. Для того, чтобы использовать модификатор, вам просто нужно разместить модификатор после номера и перед единицей измерения, например 10svw. Это дает нам 4 комбинации для каждого из 6 модулей области просмотра. vw, svw, lvw и dvw. До сих пор все, что мы рассмотрели в этой статье, не использовало модификатор. Если вы не используете модификатор на устройстве, например 10vw или 10vh, браузер автоматически по умолчанию использует один из 3 модификаторов в зависимости от реализации браузера.

Модификатор s

Модификатор s расшифровывается как Small и представляет собой минимально возможное окно просмотра. В нашем примере с мобильным телефоном это будет размер окна просмотра при отображении строки URL. Если вы установите для элемента значение 100svh он будет занимать 100% высоты экрана в зависимости от размера экрана при отображении строки URL. Неважно, видна ли строка URL-адреса или нет, размер этого устройства всегда будет основываться на том, каким будет окно просмотра, если будет отображаться строка URL-адреса.

Модификатор l

Модификатор l расшифровывается как Large и представляет собой максимально возможное окно просмотра. Это в значительной степени противоположно модификатору s. В нашем примере с мобильным телефоном это будет размер окна просмотра, когда строка URL-адреса НЕ отображается. Если вы установите для элемента значение 100lvh, он будет занимать 100% высоты экрана в зависимости от размера экрана, когда строка URL-адреса НЕ отображается. Неважно, видна ли строка URL-адреса или нет, это устройство всегда будет основывать свой размер на том, каким будет окно просмотра, если строка URL-адреса НЕ отображается. Это означает, что если вы установите элемент на 100lvh, а строка URL-адреса показывается, то технически он будет больше, чем экран.

Модификатор d

Модификатор d расшифровывается как Dynamic и представляет текущий размер области просмотра. Это похоже на комбинацию модификаторов s и l. В нашем примере с мобильным телефоном это всегда будет размер текущего окна просмотра, независимо от того, отображается ли строка URL-адреса или нет. Если наша строка URL-адреса отображается, то модификатор d имеет тот же размер, что и модификатор s, а если строка URL-адреса НЕ отображается, модификатор d имеет тот же размер, что и модификатор l. Во время перехода между отображаемой и скрытой строкой URL-адреса это устройство будет динамически увеличиваться в размерах, поэтому оно всегда будет заполнять все доступное пространство. Это здорово, если вам нужно гарантировать, что размер элемента всегда зависит от области просмотра, но может быть обременительным, поскольку это вызовет много перерисовок, поскольку размер постоянно меняется.

Поддержка браузеров

С каждой интересной функцией CSS вы всегда должны учитывать поддержку браузера, и, к сожалению, поддержка браузера для этих новых модулей просмотра не очень хороша. В настоящее время эти новые единицы поддерживают >85% и на самом деле поддерживаются только в Safari и Firefox. Причина такого отсутствия поддержки заключается в том, что это предложение все еще находится на стадии рабочего проекта, что означает, что оно находится на очень ранней стадии своего жизненного цикла и довольно далеко от того, чтобы быть официальным CSS.

Итоги

Хотя 24 юнита могут показаться много, на самом деле это всего лишь шесть юнитов с тремя модификаторами, которые относительно просты. Эти простые комбинации, однако, дают нам большие возможности в построении идеального макета CSS.