Время пролетело. Взгляните на то, что этот год принес нам в области внешнего интерфейса, с некоторыми основными моментами из одного года обновлений внешнего интерфейса, и давайте сделаем несколько прогнозов!

командой инженеров Whitespectre

Главные события 2022 года

React 18 и параллельные функции

2022 год стал годом выпуска React 18, последним крупным обновлением версии с октября 2020 года. Это была важная веха, потому что команда React годами исследовала и разрабатывала поддержку параллелизма в React, и это фундаментальное обновление для Основная модель рендеринга React.

React 18 предлагает некоторые готовые улучшения, такие как автоматическая пакетная обработка, новые API, такие как startTransition, и потоковый рендеринг на стороне сервера с поддержкой Suspense. Хотите оглянуться? Мы подробно говорили об этом в феврале.

Эволюция JavaScript

С выпуском ECMAScript 2015 (или ES6) в июне 2015 года язык JavaScript вступил в свой золотой век. После предоставления многих долгожданных функций, таких как классы или модули, регулярные ежегодные обновления сопровождались другими важными дополнениями, такими как операторы async/await или rest/spread.

Несмотря на то, что сейчас он находится в довольно зрелом состоянии, язык все еще неуклонно развивается из года в год. Некоторые из основных моментов ECMAScript 2022 — общедоступные, частные и статические члены классов, ожидания верхнего уровня и Object.hasOwn, но ознакомьтесь с нашей июльской статьей для получения полного списка!

Мы также ознакомились с последними трендами JS в ежегодном обзоре состояния JavaScript в феврале. Следите за предстоящим в 2023 году!

Эволюция CSS

Если JS является зрелым, но все еще развивается, CSS делает это быстрее, чем когда-либо. Наряду с HTML5, большим успехом пользовался CSS3, и хотя мы часто говорим о нем как о единой спецификации, уровень CSS 3 разделил язык на несколько отдельных документов, называемых «модулями». В наши дни последнюю версию CSS называют просто CSS, а уровни присутствуют только для того, чтобы отличать функции от более ранних версий.

Если CSS3 был революцией, впереди еще одна революция. Больше единиц Viewport, Native Nesting, Container Queries… Взгляните на наши статьи Март и Май, чтобы узнать больше о последних и предстоящих функциях!

Веб-стандарты и браузеры

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

В этом году мы увидели множество новых функций в браузерах и написали о многих будущих. На ежегодной конференции Google I/O в мае мы также узнали, что команды разработчиков браузеров объединяют усилия и собираются вместе, чтобы обсудить функции и приоритеты, над которыми они намерены работать. Оглянитесь на усилия Compat 2021 и Interop 2022!

Новые парадигмы развития

Это был год передовых методов SSR и гидратации, таких как React Server Components и Selective Hydration, и новых парадигм, таких как архитектура островов. Мы объяснили последнее и прошли некоторые реализации в сентябре.

Мы также начали обсуждать тему CSS-In-JS, которая стала чрезвычайно популярной за последние два-три года, особенно в React. «В октябре мы рассмотрели проблемы и преимущества CSS-in-JS, включая влияние на производительность.

Тенденции, которым следует следовать в 2023 году

Объединение инструментов нового поколения

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

Мы увидели, что альтернативы Webpack, такие как Vite, созрели и стали реальным вариантом в этом году. Мы также видели появление Turbopack, который является многообещающим, потому что он исходит от создателя Webpack и утверждает, что он во много раз быстрее, чем что-либо еще, даже по сравнению с уже молниеносно быстрым Vite.

Turbopack все еще находится в стадии альфа-тестирования, но мы ожидаем, что в 2023 году проект продолжит расти и достигнет состояния готовности к производству. Другие варианты, такие как Vite, по-прежнему будут выступать в качестве серьезных альтернатив Webpack.

О Vite и Turbopack мы рассказывали в наших статьях Январь и Ноябрь соответственно.

Рендеринг на стороне сервера и оптимизация скорости страницы

Люди ожидают быстрого взаимодействия и быстро отказываются от страниц, которые загружаются слишком долго. Рендеринг на стороне сервера делает современные одностраничные приложения такими же быстрыми и доступными, как и приложения, отображаемые на сервере, сохраняя при этом работу, подобную приложению, после загрузки первой страницы.

Мы уже выделили некоторые методы, такие как Компоненты сервера React и Выборочная гидратация. Мы, вероятно, увидим, что в следующем году число таких паттернов увеличится, и мы ожидаем, что в React lazy и Suspense станут еще более популярными.

Прогрессивные веб-приложения

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

Мы можем ожидать, что библиотеки выборки данных (такие как React Query или SWR) или Service Workers будут продолжать набирать обороты, поскольку они имеют решающее значение для обеспечения производительности и динамического взаимодействия с приложениями для устанавливаемых веб-приложений.

Что бы вы хотели добавить? Думаете, чего-то не хватает? Пишите нам в @whitespectrehq, Instagram или LinkedIn, мы будем рады прочитать ваши отзывы!

И не пропустите наши предыдущие истории: