Что должен знать уважаемый фронтендер в 2024 году

Учиться фронтенду с нуля в 2024 году ­совсем непросто: нужно выбрать стек, который останется актуальным до конца вашего обучения и начала работы. Опытным сотрудникам тоже непросто, ведь им нужно следить за спросом на рынке, чтобы оставаться востребованными.

Чтобы узнать, что в тренде в нынешнем году, мы попросили middle и senior фронтендеров ответить на вопросы:

1. Что должен был уметь фронтендер в 2023 году? Опишите идеальный стэк
2. Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?
3. Специалистов какого стека не хватает на рынке?

Вот, что они ответили.

Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики.

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.

Что должен был уметь фронтендер в 2023 году? Опишите идеальный стэк

Николай Прохоров

Senior frontend-разработчик компании ITFB Group

За минувший год сфера frontend-разработки не получила каких-либо особо выделяющихся обновлений или новых технологий, которые стоило бы изучить всем. Vue третьей версии планомерно продолжает свое развитие и улучшение, Angular получил несколько мажорных версий, Svelte набирает обороты, а TypeScript перешел к пятой версии.

По-прежнему frontend — это JavaScript и TypeScript, HTML и CSS-фреймворки. Фронтенд-разработчику важно хорошо разбираться в специфике языков, следить за изменениями и поддержкой браузерами новых фич, пользоваться ESLint и Prettier для улучшения качества своего кода, а также своевременно отказываться от устаревающих технологий. К примеру, Webpack теряет свою популярность, так как многие команды используют более быстрый Vite. TypeScript стал стандартом в сфере frontend-разработки, и уже много новых проектов его используют. Отдельно стоит упомянуть и архитектуру — появилось большое количество проектов, где используется Feature-Sliced Design.

Однако, в то время как сами технологии остались практически неизменными, существенно изменился подход к разработке. 2023 год стал настоящей революцией во многих сферах из-за бурного роста популярности AI и, в частности, языковых моделей, таких как ChatGPT. ИИ-помощники помогают существенно сократить время работы над типовыми задачами, позволяя за пару мгновений получить код, после проверки и доработки которого значительно упрощается поставленная задача. ChatGPT может помочь быстро получить набросок функции, компонента или TypeScript. Пока, к счастью, модели не справляются с объемными или сложными задачами полностью без участия человека, но могут послужить верным помощником в повседневной работе.

Идеальный стек в 2023 году — Vue последних версий, TypeScript и Tailwind. Фреймворк активно развивается и улучшается. Если Vue второй версии, поддержка которого закончилась в декабре, отставал по удобству от React, то третья версия уже вполне успешно конкурирует с лидером: Vue позволяет сфокусироваться на задаче и берет вопрос оптимизации на себя, и в то же время сохраняет гибкость и все необходимые удобства в разработке. Tailwind же, в свою очередь, удобен своей простотой. Пропадает необходимость задумываться о наименовании классов, дочерних элементов и модификаторов, оберток и контейнеров, а настройка конфигурации позволяет адаптировать Tailwind под любые условия дизайна на проекте.

Александр Гузенко

Главный программист-эксперт, IT_ONE

Независимо от уровня программиста, у него должна быть сильная база. Даже от джунов ожидают знание хотя бы теории в JS и асинхронном JS. Это касается хард скилов.

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

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

Например, фраза от джуна “Смог самостоятельно за одну неделю сделать красивый лендинг со сложными анимациями через ранее незнакомую мне библиотеку react-spring” мгновенно выделит этого кандидата из серой массы сотен однообразных резюме.

Виталий Матвиевич

Руководитель группы разработки компании-разработчика ПО МойОфис

В основном стеке все стабильно: мы требовали и продолжаем требовать от кандидатов глубокого и практичного понимания Javascript, Typescript, HTML5, CSS3, широкого кругозора с точки зрения доступных в браузере возможностей и API.

Особо обращали внимание на способность кандидата предложить разнообразные технические решения для практических задач, уметь “защитить” выбранное решение и написать чистый читаемый код. Большую роль играл и практический опыт кандидата: какие задачи уже доводилось решать, на какие грабли наступать, какие технологии применять.

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

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

Александр Миранков

Lead Software Engineer

В 2023 году идеальный стек фронтенд-разработчика включал в себя следующие технологии:

1. React.js или Angular: Фреймворки для построения компонентного пользовательского интерфейса;
2. TypeScript: Статическая типизация для улучшения безопасности и поддержки кода;
3. Webpack и Babel: Инструменты для сборки и транспиляции кода;
4. SASS/LESS: Препроцессоры для улучшения управления стилями;
5. Jest или другие фреймворки для тестирования: Для обеспечения высокого уровня надежности.

Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?

Николай Прохоров

Senior frontend-разработчик компании ITFB Group

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

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

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

WebAssembly (Wasm). Как известно, JavaScript не сильно хорош в плане производительности и может не справляться со сложными и высоконагруженными интерфейсами. Wasm решает эту проблему, и его используют, к примеру, в Figma или в web-клиентах торговых площадок. Более того, технология может использоваться не только в web, и потому ее изучение позволит расширить круг своих возможностей.

Александр Гузенко

Главный программист-эксперт, IT_ONE

В React разработке в тренде сейчас библиотека Next.js, она позволяет сильно облегчить жизнь, если необходим серверный рендеринг любого типа. Так же, к моей радости, сейчас становится модно разбираться в архитектуре фронтенда. Модульная архитектура, луковичная архитектура, FSD и знание прочих методологий выгодно выделяют кандидата на фоне остальных. Это показатель того, что челоек развивается в сфере, стремится писать не просто работающий код, а код, который будет проще поддерживать.

Виталий Матвиевич

Руководитель группы разработки компании-разработчика ПО МойОфис

Не готов сделать вывод о трендах за весь рынок, но по моему субъективному мнению специалистам следует качаться в следующих направлениях:

1. Progressive Web Apps (PWA). Тренд не новый, но мне кажется, что он будет сохранять свою актуальность. Как минимум, в нашей компании – точно.
2.  Работа с графикой и анимациями. Возможности браузеров при работе с графикой растут, включая использование 3D или AR-решений. Навыки в этой области могут пригодиться как в навороченных медиапроектах, так и в различных отраслевых веб-приложениях.
3. Работа с ИИ. Мой личный выбор – ChatGPT, отличный помощник, значительно ускоряющий работу над многими задачами. Однако этим помощником тоже нужно уметь правильно пользоваться. Однажды я разрешил кандидату на собеседовании им воспользоваться при решении задачи и… ничего не вышло. Потому что умение задать правильный вопрос и применить ответ – это тоже нарабатываемый навык.
4. Как ни странно, рекомендую качать hard skills с точки зрения архитектуры, алгоритмов, практик оптимизации веб-приложений. Это может сильно выделить вас на фоне других кандидатов.

Александр Миранков

Lead Software Engineer

Тренды во фронтенде в 2024 году и необходимые навыки:

1. SSR (Server-Side Rendering) и SSG (Static Site Generation): SSR и SSG позволяют создавать веб-приложения с лучшей производительностью, поскольку часть рендеринга выполняется на сервере или во время сборки приложения. Это снижает время загрузки и повышает отзывчивость. Так же это положительно влияет на поисковые системы (SEO);
2. Разработка для мобильных устройств: Создание веб-приложений для разнообразных устройств невозможно без применения отзывчивого дизайна, который автоматически подстраивается под различные размеры экранов. С увеличением числа пользователей, предпочитающих мобильные телефоны для интернет-серфинга, этот подход становится не просто желательным, а неотъемлемым;
3. Небольшое знание бэкэндной разработки: В современном мире фронтенд-разработчику предъявляются все более высокие требования. Компании ценят специалистов, обладающих T-shape знаниями, то есть широким кругозором в различных областях, но при этом глубоким пониманием в определенной области. В таком контексте рекомендуется обратить внимание на расширение своих навыков в сфере серверной разработки, а именно – Node.js;
4. Облачные технологии: Облачные технологии становятся неотъемлемой частью современной ИТ-инфраструктуры. Для фронтенд-разработчика важно понимать и владеть основами облачных решений, и AWS – самый популярный облачный провайдер на данный момент – отличное место для начала этого погружения.

Специалистов какого стека не хватает на рынке?

Николай Прохоров

Senior frontend-разработчик компании ITFB Group

Если говорить про frontend, то существует нехватка разработчиков Vue. Большинство курсов по фронтенду берут именно React для обучения, а Vue затрагивают минимально или не затрагивают вообще. Безусловно, вакансий больше на стек React — примерно в полтора-два раза, однако и приток junior-разработчиков, со временем становящихся миддлами, существенно выше.

Если же затрагивать всю IT-сферу, то, безусловно, с растущей популярностью AI растет и потребность в ML-разработчиках. Это, пожалуй, одна из самых высокооплачиваемых сфер с высоким порогом входа и низкой конкуренцией.

Виталий Матвиевич

Руководитель группы разработки компании-разработчика ПО МойОфис

В целом, не сказал бы, что фронтендеров на рынке мало, но несколько направлений я бы выделил:

1. Очень мало ребят, которые умеют глубоко “раскапывать” производительность приложений: работать с Perfomance API, профилированием, разбором снапшотов памяти. При этом по мере роста сложности приложений этот навык кажется все более востребованным. В нашей команде мы сейчас эту экспертизу активно качаем.
2. Субъективно кажется, что не хватает разработчиков с глубокой экспертизой в ElectronJS. Но, возможно, они рынку и не нужны. 🙂
3. За этот год почти не видел кандидатов, которые бы имели хардкорный опыт разработки PWA. А очень хотелось бы увидеть.

Александр Гузенко

Главный программист-эксперт, IT_ONE

Практически любого стека. По моей практике обычно из 10 технических собеседований на Middle/Senior позицию только 2-3 кандидата могут действительно претендовать на роль хотя бы Middle разработчика. И это я говорю про самый популярный стек технологии React/Redux. Теперь представьте какая ситуация с наймом в более узкоспециализированных сферах, где, например, надо работать со сложными анимациями через какой-нибудь Pixi.js…

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

Важно понимать, что ментор – это не про решение проблем, а про советы. То есть я, как ментор, не пишу код, практически не смотрю код, я просто отвечаю на вопросы и даю советы из разряда “лучше попробуй библиотеку X, она подойдет тебе больше потому что…”.

Александр Миранков

Lead Software Engineer

1. Специалисты по безопасности фронтенда: В связи с ростом угроз безопасности, требуются эксперты по защите веб-приложений;
2. Специалисты по мобильной адаптации: Разработчики, которые могут обеспечить отличный пользовательский опыт на различных устройствах.

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

Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики.

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.