Что нового в JavaScript Frameworks (май 2024 г.)

Кэти Хемпениус
Katie Hempenius
X
Адди Османи
Addy Osmani
X GitHub

Может быть сложно идти в ногу со всем, что происходит с фреймворками JavaScript. В этом документе представлен краткий обзор последних событий в экосистеме фреймворков JavaScript за последний год или около того. Более подробное обсуждение некоторых из этих тем можно найти в соответствующем докладе «Навигация по экосистеме JavaScript Frameworks» на мероприятии Google I/O в этом году.

Диаграмма сравнения функций платформы

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

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

Угловой

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

  • Сигналы . Сигналы — это подход, используемый несколькими платформами (включая Angular) для отслеживания состояния приложения. Angular Signals могут улучшить производительность во время выполнения, включая взаимодействие с следующей отрисовкой (INP) , за счет уменьшения количества вычислений, которые должны выполняться во время обнаружения изменений.
  • Отложенные представления . Отложенные представления позволяют отложить загрузку определенных компонентов, директив и каналов. Например, вы можете отложить загрузку зависимости до тех пор, пока содержимое не попадет в область просмотра или пока основной поток не будет простаивать.
  • NgOptimizedImage : NgOptimizedImage — это компонент изображения для Angular, который автоматизирует внедрение лучших практик загрузки изображений.
  • Неразрушающая гидратация . Неразрушающая гидратация устраняет мерцание , которое возникало, когда DOM приложений Angular, отображаемых на стороне сервера, перестраивался на стороне клиента.
  • Частичная гидратация: команда Angular скоро выпустит предварительную версию частичной гидратации для разработчиков. При частичной гидратации по умолчанию браузер не загружает какой-либо код JavaScript страницы при ее отображении. Вместо этого определенные части страницы гидратируются по мере взаимодействия пользователя со страницей.

Астро

Astro, современный конструктор статических сайтов, произвел фурор своим инновационным подходом к веб-разработке. Уделяя особое внимание производительности и опыту разработчиков, Astro выпустила несколько интересных функций и обновлений:

  • Astro Islands : Astro Islands позволяют разработчикам создавать интерактивные компоненты пользовательского интерфейса, изолированные от остальной части страницы. Это обеспечивает эффективные обновления и оптимальную производительность.
  • Гибридный рендеринг : Astro теперь поддерживает гибридный рендеринг, сочетая преимущества генерации статического сайта и рендеринга на стороне сервера для повышения гибкости.
  • Компоненты изображения и изображения : Astro представила новые компоненты изображения и изображения, которые упрощают обработку изображений и обеспечивают автоматическую оптимизацию.
  • Поддержка View Transitions : Astro предлагает встроенную поддержку View Transitions API , обеспечивающую плавные и плавные переходы страниц.
  • Панель инструментов Astro Dev : Панель инструментов Astro Dev предоставляет мощный набор инструментов для отладки и оптимизации приложений Astro.

Реагировать

В прошлом году выпуск React Server Components представил новый подход к компонентам React. С тех пор команда React работала над множеством новых функций, включая функции компилятора React и действия сервера, а также:

  • Серверные компоненты . Серверные компоненты React — это компоненты, которые извлекают данные и отображаются на сервере перед их потоковой передачей клиенту. Это переносит работу по рендерингу на сервер и уменьшает объем кода, который необходимо отправить клиенту.
  • React Compiler : React Compiler — это компилятор , который может автоматически запоминать компоненты. Это повышает производительность за счет сокращения ненужных повторных рендерингов. Команда React заявила, что разработчики смогут использовать компилятор React без внесения каких-либо изменений в код.
  • Действия сервера . Действия сервера обеспечивают связь между клиентом и сервером. С помощью действий сервера вы можете определять функции на стороне сервера, которые можно вызывать непосредственно из ваших компонентов React, устраняя необходимость в ручных вызовах API и сложном управлении состоянием. Это может быть особенно полезно для таких вещей, как изменение данных и отправка форм.
  • Загрузка ресурсов : React работает над декларативными API для предварительной загрузки и загрузки ресурсов, таких как скрипты, стили, шрифты и изображения.
  • Внеэкранный рендеринг : React также работает над внеэкранным рендерингом. Offscreen Rendering — это «новая возможность React для рендеринга экранов в фоновом режиме без дополнительных затрат на производительность. Вы можете думать об этом как о версии CSS-свойства content-visibility , которое работает не только для элементов DOM, но и для компонентов React».

Ремикс

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

  • Выпуск Remix 2.0 : Remix 2.0, выпущенный в сентябре 2023 года, привнес в платформу значительные улучшения и новые функции.
  • Стабильная поддержка Vite : Remix теперь предлагает стабильную поддержку Vite, быстрого и легкого инструмента сборки, обеспечивающего более быструю сборку разработки и повышенную производительность.
  • Режим SPA : Remix представил режим SPA, который позволяет создавать чисто статические сайты без необходимости использования сервера JavaScript в производстве. Это позволяет разработчикам использовать мощные функции Remix, такие как маршрутизация на основе файлов, автоматическое разделение кода и многое другое, сохраняя при этом простоту развертывания статического сайта.

Next.js

Выпуск Next.js 13.4 в мае 2023 года был особенно примечателен, поскольку он положил начало стабильной поддержке серверных компонентов React, потоковой передачи и приостановки. С тех пор Next.js продолжает развивать поддержку новых API-интерфейсов React (например, Server Actions ) и совершенствовать опыт разработчиков с помощью таких инициатив, как Turbopack . Другие основные моменты включают в себя:

  • App Router : App Router, ставший стабильным в Next.js 13.4, представляет собой новый способ структурирования и управления маршрутизацией в приложениях Next.js. Маршрутизатор приложений является необходимым условием для использования новых функций Next.js, таких как общие макеты и вложенная маршрутизация, а также новых API-интерфейсов React, таких как компоненты сервера React, приостановка и действия сервера, в вашем приложении Next.js.

  • Turbopack : в настоящее время экспериментальный) подход к рендерингу страниц, построенный на основе React Suspense API . Частичный предварительный рендеринг отображает страницу с использованием оболочки статической загрузки. Однако оболочка оставляет «дыры» для динамического контента внутри страницы, и этот контент загружается асинхронно. Это обеспечивает преимущества в производительности кэшируемой статической страницы, сохраняя при этом возможность включать динамические данные в содержимое страницы.

Вю

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

  • Выпущен Vue 3.4 : функции включают «полностью переписанный парсер, который работает в два раза быстрее, более быструю компиляцию SFC и переработанную систему реактивности, которая повышает эффективность повторных вычислений ».
  • Vue Vapor Mode : Vue работает над Vapor Mode — добровольной стратегией компиляции, ориентированной на производительность, которая работает с однофайловыми компонентами Vue . Режим Vapor генерирует код, который более эффективен, чем код, создаваемый в настоящее время компилятором Vue. Кроме того, использование режима Vapor со всеми компонентами устраняет необходимость в Vue Virtual DOM (что уменьшает размер пакета).
  • Vue 2 достигает EOL : Окончание срока службы Vue 2 (EOL) наступило 31 декабря 2023 года. Однако Vue 2 по-прежнему довольно широко используется: ~ 50% загрузок пакетов Vue npm приходится на Vue 2.

Нукст

Nuxt близок к выпуску Nuxt 4 . Помимо частых выпусков платформы Nuxt за последний год, экосистема модулей Nuxt выросла почти до 220 модулей. Некоторые недавние разработки в этой области включают в себя:

Твердый

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

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

стройный

В прошлом году команда Svelte была сосредоточена на предстоящем выпуске Svelte 5, который будет иметь большое значение. Другие основные моменты включают в себя:

  • Скоро появится Svelte 5 : помимо « переписывания компилятора и среды выполнения Svelte», Svelte 5 также представляет концепцию Runes .
  • Объявление о рунах : Руны — это новая функция в Svelte 5. «Руны открывают универсальную, детальную реактивность... Благодаря рунам реактивность выходит за пределы ваших файлов .svelte... Реактивность Svelte 5 основана на сигналах, однако [в отличие от других фреймворков], в Svelte 5 сигналы — это скрытая деталь реализации, а не то, с чем вы взаимодействуете напрямую».
  • Выпущен SvelteKit 2 : SvelteKit — это метафреймворк для Svelte. Функции этого выпуска включают мелкую маршрутизацию и поддержку Vite 5.

Хром Аврора

Chrome Aurora — это команда Google, которая сотрудничает с различными веб-платформами с открытым исходным кодом, чтобы улучшить взаимодействие с пользователем, особенно производительность, в сети. Вот некоторые из инициатив, в реализацию которых мы внесли свой вклад за последний год:

Заключение

Экосистема фреймворка JavaScript продолжает развиваться быстрыми темпами, причем каждый фреймворк привносит свой собственный набор инноваций и улучшений. Интересуетесь ли вы новейшими функциями известных фреймворков, таких как Angular, React и Vue, или изучаете новые варианты, такие как Astro, Remix и Solid, нет недостатка в интересных разработках, за которыми нужно быть в курсе.

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

Мы надеемся, что этот обзор дал вам представление о текущем состоянии фреймворков JavaScript. Чтобы глубже погрузиться в темы, затронутые в этом сообщении блога, обязательно ознакомьтесь с сопутствующим докладом Google I/O. Приятного кодирования!