Развитие экосистемы веб-фреймворков

Chrome сотрудничает с платформами с открытым исходным кодом, чтобы улучшить работу Интернета

Chrome вносит активный вклад в экосистему веб-фреймворков, и наш доклад на Chrome Dev Summit 2019 посвящен тому, над чем мы работали за последний год.

Прочтите расширенный обзор выступления с дополнительными подробностями и ресурсами.

Как сделать Интернет лучше?

Цель каждого члена команды Chrome — сделать Интернет лучше. Мы работаем над улучшением API-интерфейсов браузера и V8 — основного движка JavaScript и WebAssembly, лежащего в основе Chrome, — чтобы разработчики были оснащены функциями, помогающими им создавать отличные веб-страницы. Мы также пытаемся улучшить веб-сайты, которые уже работают сегодня, различными способами внося вклад в инструменты с открытым исходным кодом.

Большинство веб-разработчиков, когда это возможно, полагаются на инструменты с открытым исходным кодом и предпочитают не создавать полностью настраиваемую инфраструктуру. Клиентские фреймворки JavaScript и библиотеки пользовательского интерфейса составляют растущую часть использования открытого исходного кода. Данные по трем наиболее популярным клиентским фреймворкам и библиотекам: React , Angular и Vue , показывают, что:

  • 72% участников Первого ежегодного опроса веб-разработчиков и дизайнеров MDN используют хотя бы одну из этих платформ и библиотек.
  • Более 320 000 сайтов из 5 миллионов самых популярных URL-адресов, проанализированных HTTP Archive, используют хотя бы одну из этих платформ и библиотек.
  • Если сгруппировать по затраченному времени, 30 из 100 самых популярных URL-адресов используют хотя бы одну из этих платформ и библиотек. (Исследование проводилось на внутренних данных.)

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

Вклад в веб-фреймворки

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

  • Платформы пользовательского интерфейса (или библиотеки), такие как Preact, React или Vue, которые обеспечивают контроль над уровнем представления приложения (например, через модель компонента).
  • Веб-фреймворки , такие как Next.js, Nuxt.js и Gatsby, которые предоставляют комплексную систему со встроенными уникальными функциями, такими как рендеринг на стороне сервера. Эти платформы обычно используют структуру или библиотеку пользовательского интерфейса для уровня представления.

Спектр UI-фреймворков и библиотек в сравнении с веб-фреймворками

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

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

Угловой

Команда Angular внесла ряд улучшений в версию 8 фреймворка:

График, показывающий уменьшение размера пакета angular.io с дифференциальными сборками и без них
Уменьшение размера пакета angular.io с дифференциальными сборками (из версии 8 Angular )
  • Поддержка стандартного синтаксиса динамического импорта для маршрутов с отложенной загрузкой.
  • Поддержка веб-работников для запуска операций в фоновом потоке, отдельном от основного потока.
  • Ivy , новый механизм рендеринга Angular, который обеспечивает лучшую производительность перекомпиляции и уменьшение размеров пакетов, доступен в режиме предварительного просмотра для существующих проектов.

Вы можете узнать больше об этих улучшениях в «Версии 8 Angular», и команда Chrome надеется на тесное сотрудничество с ними в следующем году по мере появления новых функций.

Next.js

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

  • Маршрутизация с разделением кода по умолчанию
  • Компиляция и комплектация (с использованием Babel и webpack )
  • Серверный рендеринг
  • Механизмы получения данных на постраничном уровне
  • Инкапсулированный стиль (с помощью styled-jsx )

Next.js оптимизируется для уменьшения размеров пакетов, а команда Chrome помогла определить области, в которых мы могли бы помочь еще больше повысить производительность. Вы можете узнать больше о каждом из них, просмотрев их запросы на комментарии (RFC) и запросы на включение (PR):

  1. Улучшенная стратегия разделения веб-пакетов, которая генерирует более детальные пакеты, уменьшая количество дублированного кода, получаемого по нескольким маршрутам ( RFC , PR ).
  2. Дифференциальная загрузка с помощью шаблона модуль/номодуль , который может сократить общий объем JavaScript в приложениях Next.js до 20 % без изменений кода ( RFC , PR ).
  3. Улучшенное отслеживание показателей производительности с использованием API User Timing ( PR ).
Домашняя страница Barnebys.com
Barnebys.com , крупная поисковая система по антиквариату и предметам коллекционирования, зафиксировала сокращение общего количества JavaScript на 23% после включения детального разделения на фрагменты.

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

  • Включение параллельного режима для разблокировки прогрессивной или частичной гидратации компонентов.
  • Система соответствия на основе веб-пакета, которая анализирует все исходные файлы и сгенерированные ресурсы для выявления более качественных ошибок и предупреждений ( RFC ).
Пример ошибки сборки соответствия в Next.js
Пример ошибки сборки соответствия в Next.js (прототип)

Nuxt.js

Nuxt.js — это веб-фреймворк, который объединяет Vue.js с различными библиотеками для обеспечения продуманной настройки. Подобно Next.js, он включает в себя множество готовых функций:

  • Маршрутизация с разделением кода по умолчанию
  • Компиляция и комплектация (с использованием Babel и webpack )
  • Серверный рендеринг
  • Асинхронная выборка данных для каждой страницы
  • Хранилище данных по умолчанию ( Vuex )

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

Вавилон

Мы также добились прогресса в улучшении производительности важного базового инструмента почти во всех упомянутых платформах — Babel .

Babel компилирует код, содержащий новый синтаксис, в код, понятный различным браузерам. Стало обычным использовать @babel/preset-env для современных браузеров, где можно указать различные цели браузера, чтобы обеспечить достаточно полифиллинга, необходимого для всех выбранных сред. Один из способов указать цели — использовать <script type="module"> для таргетинга на все браузеры, поддерживающие модули ES .

Чтобы оптимизировать этот случай, мы запустили совершенно новый пресет; @babel/preset-modules . Вместо преобразования современного синтаксиса в старый синтаксис, чтобы избежать ошибок браузера, preset-modules исправляют каждую конкретную ошибку путем преобразования в наиболее близкий к максимально возможному неиспорченному современному синтаксису. В результате получается современный код, который можно доставить практически в неизмененном виде в большинство браузеров.

Новый пресет Babel, обеспечивающий лучшее полифиллинг для браузеров.

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

Что дальше?

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

Если вы работаете над веб-фреймворком, библиотекой пользовательского интерфейса или любым другим веб-инструментом (сборщиком, компилятором, линтером), подайте заявку на фонд фреймворка !