Дорожная карта карьеры фронтенд-разработчика на 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 во фронтенде.

SSR фреймворки

Одностраничные приложения (SPA) и соответствующие им фреймворки (например, React.js, Vue.js, Svelte.js) прошли через более или менее громкие циклы и существуют уже много лет. Однако с появлением мета-фреймворков поверх этих решений мы можем наблюдать четкую тенденцию перехода приложений от рендеринга на стороне клиента (CSR) к рендерингу на стороне сервера (SSR). В наши дни SSR повсеместно используется при работе с JavaScript-фреймворками. Самый популярный SSR фреймворк под названием Next.js работает поверх React.js. Эндрю Кларк, core разработчик React, назвал его "настоящим релизом React 18" в 2022 году, потому что он поставляется со всеми встроенными возможностями (например, Suspense, streaming SSR), которые команда React предоставляет в качестве фундаментальных строительных блоков на нижнем уровне библиотеки. И Vercel (компания, стоящая за Next.js), и основная команда React.js работают в тесном сотрудничестве, обеспечивая отличный опыт для разработчиков.

Хотя многие разработчики смотрят на тесную связь между Next.js и React.js с опаской, для React.js есть альтернативы, такие как Remix (недавно приобретенная Shopify). Remix использует другой подход к превращению React.js в SSR-фреймворк, но есть и функции, которые схожи (например, вложенная маршрутизация) в обоих фреймворках из-за их конкуренции. Несмотря на то, что Next.js уже является признанным лидером в современной SSR разработке и превратил многих фронтенд-разработчиков в фуллстек разработчиков, другие фреймворки тоже должны быть в вашем списке внимания: SvelteKit (построенный на Svelte.js) с его недавним релизом 1.0 при поддержке Vercel и SolidStart (построенный на Solid.js) с его улучшенным DX по сравнению с React.js.

Виды рендеринга

В то время как в последнее десятилетие (2010 - 2020) доминировали одностраничные приложения (SPA) с их клиентским рендерингом (CSR), начиная с Knockout.js и Ember.js и заканчивая Angular.js, React.js и Vue.js, в последние годы наблюдается растущий интерес к рендерингу на стороне сервера (SSR) с SSR-фреймворками. Со стороны кажется, что цикл снова замыкается, потому что мы уже давно (с 2005 по 2010 год) используем SSR с внедрением JavaScript (например, jQuery, MooTools, Dojo.js) в многостраничных приложениях (MPA). Однако, если раньше использовилась Java (например, JSP) или позже Ruby on Rails, то в этот раз все по-другому, потому что вместо этого мы полагаемся на JavaScript. В течение нескольких лет Next.js был движущей силой этой тенденции, однако, другие SSR-фреймворки, такие как SvelteKit, догоняют. SSR довольно долго конкурировал со статической генерацией сайтов (SSG) за идеальную производительность, хотя оба паттерна служат совершенно разным целям. В то время как последний паттерн используется для статического контента (например, веб-сайты типа блога), первый используется для динамического контента (например, веб-приложения). Если SEO имеет значение, то и SSR, и SSG могут иметь смысл. Однако при необходимости создания динамичного контента или контента, ориентированного на пользователя, с аутентификацией, разработчики не могут выбрать SSG (один раз собрать перед развертыванием, поэтому статичен) и вынуждены выбирать между SSR (сборка по требованию для каждого запроса с индивидуальными данными на сервере) и CSR (выборка индивидуальных данных по требованию на клиенте).

Однако CSR, SSR, SSG - это не самые последние тенденции в технике рендеринга. В то время как SSR и SSG начали тенденцию оптимизации производительности несколько лет назад, появились иные техники рендеринга, такие как Incremental Static Regeneration (ISR) и Streaming SSR. ISR берет за основу SSG, поскольку позволяет статически перестраивать сайт на основе отдельных страниц (например, перестраивать страницу X каждые 60 секунд) вместо того, чтобы перестраивать весь сайт. Кроме того, On-Demand ISR, также называемая On-Demand Revalidation, может быть использована для пересборки через API (например, при обновлении данных CMS). Потоковый SSR, с другой стороны, оптимизирует однопоточное узкое место рендеринга на стороне сервера. В то время как обычный SSR должен ждать от сервера данных, чтобы отправить отрисованный контент клиенту сразу, потоковый SSR позволяет разработчикам разделить приложение на фрагменты, которые могут быть отправлены параллельно от сервера к клиенту.

В последние годы модели рендеринга были довольно прямолинейными с SSG и SSR в SPA/MPA. Однако в наши дни в моду входят более тонкие варианты. Но не только ISR и SSR стриминг становятся более актуальными, но и частичная гидратация (например, React Server Components), которая позволяет гидратировать только некоторые компоненты на клиенте, прогрессивная гидратация (Progressive Hydration), которая дает более тонкий контроль над порядком гидратации, Island Architectures (островные архитектуры) (например, Astro) для изолированных приложений или компонентов в MPA, а также использование возобновляемости вместо гидратации (например, Qwik с его SSR-фреймворком Qwik City) становятся актуальными подходами в наши дни.

Serverless (бессерверные функции)

Технологии рендеринга, такие как SSR и SSG, очень коррелируют с тенденцией serverless at the edge, потому что обе они ориентированы на производительность с целью обеспечения бесшовного пользовательского опыта в браузере. По сути, стремление обслуживать пользователей быстрее веб-сайтов и веб-приложений вызвало интерес к serverless edge. Но давайте начнем с самого начала: Бессерверность, также известная как бессерверные функции, бессерверные вычисления (например, AWS Lambda) или облачные функции (например, Google/Firebase Cloud Functions), уже несколько лет является большой тенденцией в облачных вычислениях. Хотя бессерверность по-прежнему означает наличие работающего (удаленного) сервера, разработчику не нужно управлять сервером и связанными с ним задачами (например, масштабирование инфраструктуры по требованию). Вместо этого необходимо развернуть одну функцию как бессерверную функцию, о которой позаботится облачный провайдер.

Бессерверные функции открывают еще одно преимущество, поскольку вместо развертывания сервера приложений в одном (или нескольких) центре (центрах) обработки данных, их могут быть десятки по всему миру. Поэтому в идеальном мире бессерверные функции должны работать как можно ближе к пользователям, так как это означает кратчайший путь клиент-сервер и, следовательно, улучшенный пользовательский опыт. Развертывание бессерверных функций как можно ближе к пользователю привело к появлению терминов edge computing и edge functions. Многие облачные провайдеры (например, Cloudflare с Cloudflare Workers, Vercel со своей Edge Network, Deno с Deno Deploy) конкурируют в этом пространстве, где каждый оптимизирует для достижения наилучшего времени интерактивности (TTI) для своих конечных пользователей. Пограничные функции не только быстрее обслуживают контент SSG/SSR (поскольку провод до конечного пользователя короче), но и могут кэшировать свои результаты ближе к пользователю. Но не только производительность имеет значение, хотя она и является основным фактором, другие преимущества, такие как снижение стоимости, также связаны с вычислениями, которые происходят ближе к пользователю. Например, часто не все данные, передаваемые между клиентом и сервером (здесь функция edge), должны вычисляться в главном центре обработки данных. В IoT существует множество нерелевантных данных (например, видеозаписи без изменений в каждом кадре), которые отправляются в главный центр обработки данных и могут быть просто отфильтрованы на границе. В конце концов, пограничные функции - это только начало.

Возрождение баз данных

С появлением бессерверных функций (на границе) базы данных также переживают ренессанс. При использовании бессерверных функций разработчики быстро столкнулись с проблемой открытия слишком большого количества соединений с базой данных, поскольку существует не один сервер, который держит открытым одно соединение, а множество бессерверных функций с соединением 1:1 с базой данных. Решением этой проблемы стало объединение соединений, но об этом приходится заботиться либо самостоятельно, либо с помощью стороннего сервиса. Популярными соперниками в области бессерверных баз данных являются PlanetScale (MySql), Neon (PostgreSQL) и Xata (PostgreSQL), которые имеют множество функций, таких как разветвление баз данных, дифферинцирование схем и мощный поиск/аналитика/инсайты. Когда речь заходит о бессерверных системах, они предоставляют краевое кэширование или распределенную базу данных только для чтения, чтобы переместить данные ближе к пользователям с минимальной задержкой. Если сторонний сервис должен распространять не только вашу базу данных, но и ваше приложение, Fly.io упаковывает все в одну платформу. Что выводит нас за рамки только баз данных, где также происходит много движений. Railway, рассматриваемый как преемник Heroku, предлагает все для платформы как услуги (PaaS) для развертывания вашего технологического стека. Если вы хотите продвинуться на один шаг вверх по цепочке услуг в сторону Backends as a Service (BaaS), вы получите альтернативу Firebase с открытым исходным кодом - Supabase, которая поставляется с хостингом приложений/баз данных, аутентификацией и пограничными функциями.

Среды выполнения JavaScript

Все началось с того, что Райан Дал объявил о Node.js на конференции в 2009 году. То, что начиналось как эксперимент, который отделил JavaScript от браузера и сделал его доступным на сервере, стало одним из самых больших факторов успеха JavaScript за последнее десятилетие. По сути, Райан Дал использовал JavaScript Engine под названием V8 (реализованный в Chrome) для Node.js без самого браузера. Таким образом, и браузер Chrome, и Node.js используют один и тот же JavaScript Engine, но имеют свои собственные JavaScript Runtimes (например, Browser APIs vs Node APIs) для взаимодействия с ним. Десятилетие спустя Райан Дал объявил Deno преемником Node с обещанием предоставить разработчикам более безопасную и быструю среду, которая поставляется с похожими API браузера, TypeScript и стандартной библиотекой из коробки. Однако Deno, который также работает на V8, является лишь одним из многих JavaScript Runtimes в наши дни.

В конкурирующей стране краевых функций многие облачные провайдеры внедряют свои собственные JavaScript Runtime (например, Cloudflare Workers), которые оптимизированы для их собственной инфраструктуры (например, Cloudflare). Таким образом, бизнес-модель Deno также становится облачным провайдером с Deno Deploy и их SSR-фреймворком для рендеринга на границе (который начинался как доказательство концепции) под названием Deno Fresh. Независимые от облачных провайдеров решения, такие как Bun (работающий на JavaScriptCore Engine), недавно стали еще одним вирусным хитом в гонке за самый быстрый JavaScript Runtime. Если что-то пойдет не так, мы окажемся в той же ситуации, что и с фрагментированной поддержкой JavaScript в браузерах в течение многих лет, но на этот раз на сервере, где не весь JavaScript может поддерживаться одинаково во всех средах выполнения при развертывании на различных облачных провайдерах. Поэтому все заинтересованные стороны (например, Deno, Vercel, Cloudflare) присоединились к WinterCG, чтобы сотрудничать в области совместимости API между их JavaScript Runtimes.

Монорепо

В прошлом монорепо использовалось в основном для крупномасштабных приложений, где один проект содержит более мелкие проекты в одном репозитории с контролем версий. Каждый из этих небольших проектов может быть чем угодно - от отдельного приложения (например, SPA, MPA) до пакета многократного использования (например, функции, компоненты, сервисы). Практика объединения проектов восходит к началу 2000 годов, когда это называлось общей кодовой базой. Однако в наши дни монорепозитории используются не только крупными приложениями, но и небольшими компаниями и проектами с открытым исходным кодом, которые, несомненно, извлекут из них пользу. Например, компания может иметь различные пакеты в монорепозитории, начиная от общих компонентов пользовательского интерфейса, общей системы проектирования (например, многоразовое совместное проектирование) и заканчивая широко используемыми полезными функциями для соответствующей области.

Эти пакеты могут быть импортированы в различные приложения: реальное приложение (например, app.mywebsite.com с рендерингом на стороне клиента), которое использует все эти общие пакеты, домашняя/продуктовая/лендинговая страница (например, mywebsite.com с рендерингом на стороне сервера или генерацией статического сайта) с учетом SEO использует только пакет общей системы дизайна, а страница технической документации (например, docs.mywebsite.com) использует общие компоненты пользовательского интерфейса и пакеты общей системы дизайна. Turborepo (приобретенная компанией Vercel) вновь подняла шумиху о монорепо в JavaScript/TypeScript. Turborepo позволяет командам создавать конвейеры сборки для всех своих приложений и пакетов в рамках монорепо. Самое привлекательное: кэширование сборок в рамках конвейера на локальной машине или в облаке для всех команд. Turborepo в сочетании с другими жизненно важными инструментами монорепо, такими как npm/yarn/pnpm workspaces (управление зависимостями) и changesets (версионирование), делает этот инструментарий местом, за которым стоит следить в этом году. Конкурентами Turborepo являются Nx, Rush и Lerna (некоторое время не поддерживался, затем был приобретен компанией Nx - Nrwl).

CSS на утилитах

Разработчики либо любят, либо ненавидят его: Tailwind CSS является примером CSS с утилитами. В то время как одна сторона разработчиков ненавидит его за многословность в коде пользовательского интерфейса, другая сторона разработчиков любит его за его великолепный DX. Как разработчик, вы настраиваете его один раз в своем проекте и сразу же используете его готовый CSS в HTML. Этому разделению любви и ненависти к CSS, ориентированному на утилиты, может прийти конец с недавним ростом рендеринга на стороне сервера (SSR). В течение нескольких лет CSS-in-JS решения, такие как Styled Components (SC) и Emotion, были преобладающей силой для стилизации современных веб-приложений на основе компонентов. Однако, если производительность в мире SSR является одной из основных целей, CSS-in-JS имеет негативные последствия: увеличение размера пакета (SC - 12,7 кБ, Emotion - 7,9 кБ) и, что более важно, накладные расходы во время выполнения из-за сериализации CSS перед вставкой в DOM.

Поэтому мы можем наблюдать миграцию разработчиков в сторону более дружественных SSR решений, таких как utility-first-CSS (например, Tailwind CSS, UnoCSS) в паре с предварительно определенным UI компонентом (например, DaisyUI), других не менее популярных альтернатив, таких как CSS Modules, или так называемых без ранатаймовых (без компиляции) CSS-in-JS (например, vanilla-extract, linaria, astroturf, compiled).

TypeScript

Эволюция от JavaScript к TypeScript неостановима. В этой большой миграции веб-разработки безопасность типов E2E для фулстек приложений, безусловно, является важной тенденцией. Реализация этой концепции зависит от коммуникационного уровня (API), который необходим для передачи типизированных сущностей (например, тип User, тип BlogPost) от сервера к клиентскому приложению. Обычными подходами в веб-разработке для связи клиент-сервер являются REST и GraphQL. Оба этих языка можно использовать с OpenAPI для REST и GraphQL Code Generator для GraphQL для создания типизированного файла схемы для фронтенд приложения. Однако появилась новая восходящая звезда типобезопасных API под названием tRPC, которая может быть использована в качестве замены REST/GraphQL. Если вы работаете в монорепо TypeScript, где фронтенд и бэкенд совместно используют код, tRPC позволяет экспортировать все типы из бэкенда во фронтенд-приложение без промежуточной генерации типовой схемы. Впоследствии фронтенд может вызывать API бэкенда, просто используя типизированные функции, которые под капотом соединены HTTP для обеспечения фактического взаимодействия между клиентом и сервером. Общая тенденция, безусловно, направлена на использование большего количества таких типобезопасных решений для фулстек приложений, таких как tRPC, Zod, Prisma и TanStack Router, которые обеспечивают типобезопасность приложения.

Инструменты сборки

В React несколько лет доминировал create-react-app (CRA). В свое время это была небольшая революция, поскольку начинающие разработчики получали готовый стартовый проект React без необходимости настраивать Webpack с React. Однако за последний год Webpack довольно быстро устарел. Vite - это новый инструмент в блоке, когда речь идет об одностраничных приложениях (SPA), поскольку он работает со всеми популярными фреймворками (например, React.js) для создания стартового проекта. Разработанный Эваном Ю, создателем Vue.js, он называет себя фронтенд-инструментом нового поколения. Под капотом он получает свою мощь от esbuild, который по сравнению с другими JavaScript бандлерами написан на Go, и поэтому собирает зависимости в 10-100 раз быстрее, чем его конкуренты (например, Webpack). В то время как экосистема Vite процветает благодаря таким дополнениям, как Vitest (альтернатива Jest для тестирования), совсем недавно появились другие конкуренты, такие как Turbopack от Vercel. Turbopack называют преемником Webpack, потому что его создателем является Тобиас Копперс, создатель Webpack. Поскольку Next.js все еще использует Webpack, а Turbopack разработан той же компанией, мы можем ожидать, что Next.js и Turbopack будут идеально сочетаться в будущем.

Разработка с использованием искусственного интеллекта

Заменит ли ИИ в конечном итоге работу разработчика? На этот вопрос пока нет ответа, однако разработка с использованием ИИ стала реальностью в 2022 году. С выходом GitHub Copilot разработчики получили возможность работать в паре с ИИ-программистом в своей любимой IDE. Это так же просто, как написать код (или написать комментарий с указанием того, что вы хотите написать), и GitHub Copilot автоматически заполнит детали реализации в соответствии со своим пониманием. Но на этом все не заканчивается: ChatGPT от OpenAI - это более общая языковая модель, которая также заботится о задачах программирования. Хотя вы можете задавать ChatGPT вопросы в свободной форме, он также способен выполнять задачи по кодированию. Многие разработчики уже заметили, что используют ChatGPT в качестве замены StackOverflow. Во многих ситуациях ChatGPT давал полезные ответы (хотя и не всегда безупречные), когда использовался в качестве замены поисковой системы. Поскольку последнему приходится иметь дело с большим количеством SEO-спама (не только для контента, связанного с разработкой), ChatGPT рассматривается как жизнеспособная альтернатива на данный момент. Для того чтобы правильно формулировать и задавать запросы в системе ChatGPT для получения наиболее точных и информативных ответов, рекомендую прочитать Как написать запрос к ChatGPT. От промпта к результату.

Однако "в настоящее время" - это важный термин. С высоты птичьего полета созданный искусственным интеллектом контент может (и будет) также вредить всемирной паутине. Если раньше созданный вручную SEO-контент уже был проблемой, то теперь никто не мешает кому-то производить больше автоматически генерируемого SEO-контента с помощью ChatGPT. Будет ли ChatGPT в конечном итоге тренироваться на собственном генерируемом контенте?

Ещё

Есть несколько заслуживающих внимания упоминаний, но которые не попали в список трендов: Tauri как альтернатива Electron для настольных приложений, реализованных на JavaScript/CSS/HTML, Playwright как альтернатива Cypress для E2E тестирования, Warp и Fig как терминалы нового поколения, CSS Container Queries как альтернатива CSS Media Queries для отзывчивого дизайна, и, наконец, htmx как обогащенный HTML для создания интерактивных пользовательских интерфейсов без JavaScript.