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, которые предоставляют комплексную систему со встроенными уникальными функциями, такими как рендеринг на стороне сервера. Эти платформы обычно используют структуру или библиотеку пользовательского интерфейса для уровня представления.
Разработчики могут отказаться от использования фреймворков, но, объединив воедино библиотеку слоев представления, маршрутизатор, систему стилей, серверный рендерер и т. д., они часто в конечном итоге создают свой собственный тип фреймворка. Несмотря на свою самоуверенность, веб-фреймворки по умолчанию решают многие из этих проблем.
В оставшейся части статьи рассказывается о многих улучшениях, которые недавно появились в различных платформах и инструментах, включая вклад команды Chrome.
Угловой
Команда Angular внесла ряд улучшений в версию 8 фреймворка:
- Дифференциальная загрузка по умолчанию для минимизации ненужных полифилов для новых браузеров.
- Поддержка стандартного синтаксиса динамического импорта для маршрутов с отложенной загрузкой.
- Поддержка веб-работников для запуска операций в фоновом потоке, отдельном от основного потока.
- Ivy , новый механизм рендеринга Angular, который обеспечивает лучшую производительность перекомпиляции и уменьшение размеров пакетов, доступен в режиме предварительного просмотра для существующих проектов.
Вы можете узнать больше об этих улучшениях в «Версии 8 Angular», и команда Chrome надеется на тесное сотрудничество с ними в следующем году по мере появления новых функций.
Next.js
Next.js — это веб-фреймворк, использующий React в качестве уровня представления. В дополнение к модели компонентов пользовательского интерфейса, которую многие разработчики ожидают от клиентской среды, Next.js предоставляет ряд встроенных функций по умолчанию:
- Маршрутизация с разделением кода по умолчанию
- Компиляция и комплектация (с использованием Babel и webpack )
- Серверный рендеринг
- Механизмы получения данных на постраничном уровне
- Инкапсулированный стиль (с помощью styled-jsx )
Next.js оптимизируется для уменьшения размеров пакетов, а команда Chrome помогла определить области, в которых мы могли бы помочь еще больше повысить производительность. Вы можете узнать больше о каждом из них, просмотрев их запросы на комментарии (RFC) и запросы на включение (PR):
- Улучшенная стратегия разделения веб-пакетов, которая генерирует более детальные пакеты, уменьшая количество дублированного кода, получаемого по нескольким маршрутам ( RFC , PR ).
- Дифференциальная загрузка с помощью шаблона модуль/номодуль , который может сократить общий объем JavaScript в приложениях Next.js до 20 % без изменений кода ( RFC , PR ).
- Улучшенное отслеживание показателей производительности с использованием API User Timing ( PR ).
Мы также изучаем другие функции, позволяющие улучшить взаимодействие с Next.js как для пользователей, так и для разработчиков, например:
- Включение параллельного режима для разблокировки прогрессивной или частичной гидратации компонентов.
- Система соответствия на основе веб-пакета, которая анализирует все исходные файлы и сгенерированные ресурсы для выявления более качественных ошибок и предупреждений ( RFC ).
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 исправляют каждую конкретную ошибку путем преобразования в наиболее близкий к максимально возможному неиспорченному современному синтаксису. В результате получается современный код, который можно доставить практически в неизмененном виде в большинство браузеров.
Разработчики, которые уже используют preset-env также получат выгоду от этих оптимизаций без необходимости каких-либо действий, поскольку вскоре они также будут включены в preset-env .
Что дальше?
Тесное сотрудничество с платформами и библиотеками с открытым исходным кодом для повышения удобства работы помогает команде Chrome понять, что принципиально важно как для пользователей, так и для разработчиков.
Если вы работаете над веб-фреймворком, библиотекой пользовательского интерфейса или любым другим веб-инструментом (сборщиком, компилятором, линтером), подайте заявку на фонд фреймворка !