В команде Chrome мы заботимся об опыте пользователя и процветающей веб-экосистеме. Мы хотим, чтобы пользователи имели наилучший возможный опыт в Интернете, не только со статическими документами, но и при использовании насыщенных, высокоинтерактивных приложений.
Инструменты и фреймворки с открытым исходным кодом играют большую роль в предоставлении разработчикам возможности создавать современные приложения для веба, а также в поддержке хорошего опыта разработчиков. Эти фреймворки и инструменты расширяют возможности компаний всех размеров, а также отдельных лиц, создающих приложения для веба.
Мы считаем, что фреймворки также могут играть большую роль в оказании помощи разработчикам с ключевыми аспектами качества, такими как производительность, доступность, безопасность, готовность к мобильным устройствам. Вместо того, чтобы просить каждого разработчика и владельца сайта стать экспертом в этих областях и идти в ногу с постоянно меняющимися лучшими практиками, фреймворк может поддерживать их с помощью встроенных решений. Это расширяет возможности разработчиков и позволяет им сосредоточиться на создании функций продукта.
Короче говоря, наше видение заключается в том, что высокая планка качества UX становится побочным эффектом разработки для Интернета.
Aurora: сотрудничество Chrome и веб-фреймворков и инструментов с открытым исходным кодом
Почти два года мы работали с некоторыми из самых популярных фреймворков, такими как Next.js, Nuxt и Angular, работая над улучшением производительности веб-сайтов. Мы также финансировали популярные инструменты и библиотеки, такие как Vue, ESLint, webpack. Сегодня мы даем этим усилиям имя - Aurora .
Полярное сияние — это естественное световое отображение, которое мерцает в небе. Поскольку мы пытаемся помочь пользовательскому опыту, созданному с помощью фреймворков, мерцать и сиять, мы посчитали, что это название — подходящий выбор.
В ближайшие месяцы мы поделимся гораздо более подробной информацией об Aurora. Это совместная работа небольшой команды инженеров Chrome (внутреннее кодовое название WebSDK) и авторов фреймворка. Наша цель — предоставить наилучший возможный пользовательский опыт для производственных приложений независимо от браузера, в котором вы рендерите.
Какова наша стратегия?
В Google мы многому научились, используя фреймворки и инструменты для создания и поддержки крупномасштабных веб-приложений, таких как Google Search, Maps, Image Search, Google Photos и т. д. Мы обнаружили, что фреймворки могут играть решающую роль в предсказуемом качестве приложений, предоставляя надежные настройки по умолчанию и продуманные инструменты .
Фреймворки имеют уникальную возможность влиять как на DX, так и на UX, поскольку они охватывают всю систему: клиента и сервер, среды разработки и производства, и они интегрируют такие инструменты, как компилятор, упаковщик, линтер и т. д.
Когда решения встроены в структуру, команды разработчиков могут использовать их и сосредоточить свое время на самом важном для продукта — предоставлении пользователям отличных функций.
Пока мы работаем над улучшением инструментов, которые находятся на каждом уровне стека, такие фреймворки, как Next.js, Nuxt и Angular CLI, управляют каждым этапом жизненного цикла приложения. По этой причине, а также из-за того, что внедрение React является крупнейшим в экосистеме основных фреймворков пользовательского интерфейса, большинство наших оптимизаций началось с проверки в Next.js, прежде чем распространиться на остальную часть экосистемы.
Aurora поддерживает успех в масштабе, привнося решения в нужный уровень популярных технологических стеков. Устраняя разрыв между браузерами и фреймворками, она позволяет высокому качеству быть побочным эффектом разработки для веба, одновременно выступая в качестве обратной связи для улучшения веб-платформы.
Каков наш рабочий процесс?
Наши принципы того, как Aurora связывает браузеры и экосистему разработчиков: смирение, любопытство, научное исследование и прагматизм. Мы работаем с авторами фреймворков над улучшениями, сотрудничаем с сообществом и проявляем должную осмотрительность перед внесением любых изменений.
Подведем итог шагам, которые мы предпринимаем для каждой новой функции, над которой работаем:
- Определите проблемы, с которыми сталкивается пользователь, в популярном стеке, используя репрезентативные приложения.
- Прототипные решения, которые решают эту проблему, с упором на «строгие значения по умолчанию».
- Проверьте функцию с помощью другого стека фреймворков, чтобы убедиться в ее адаптивности.
- Проверьте функцию, поэкспериментировав с несколькими производственными приложениями, обычно с лабораторным тестированием производительности.
- Разрабатывать дизайн с использованием процесса RFC, учитывая отзывы сообщества.
- Размещайте функцию в популярном стеке, как правило, за флагом.
- Включите функцию в репрезентативном производственном приложении для оценки качества и интеграции рабочего процесса разработчика.
- Измеряйте улучшение производительности, отслеживая показатели в репрезентативных производственных приложениях, которые внедрили эту функцию или обновили ее.
- Включите эту функцию по умолчанию в стеке, чтобы все пользователи, выполняющие обновление, получили выгоду.
- После проверки поработайте с дополнительными фреймворками, чтобы реализовать функцию.
- Выявите пробелы в веб-платформе с помощью цикла обратной связи.
- Переходим к следующим задачам.
Базовые инструменты и плагины (webpack, Babel, ESLint, TypeScript и т. д.) являются общими для многих фреймворков. Это помогает создавать волновые эффекты, даже при внесении вклада в один стек фреймворков.
Кроме того, Chrome Framework Fund поддерживает инструменты и библиотеки с открытым исходным кодом, предоставляя финансирование. Хотя мы надеемся, что проблемы и уровни решений наших усилий, описанных выше, достаточно пересекаются, чтобы перенести их на другие фреймворки и инструменты, мы знаем, что можем сделать больше. С этой целью мы хотим внести свой вклад в обеспечение процветания библиотек и фреймворков, помогающих разработчикам добиваться успеха. Это одна из причин, по которой мы продолжим инвестировать в Chrome Framework Fund. На сегодняшний день он поддержал работу над Webpack 5, Nuxt и производительностью и улучшениями ESLint.
Что нам удалось открыть на сегодняшний день?
Наша работа была сосредоточена на фундаментальных оптимизациях для таких ресурсов, как изображения, JS, CSS, шрифты. Мы отправили ряд оптимизаций для улучшения значений по умолчанию нескольких фреймворков, включая:
- Компонент изображения в Next.js , который инкапсулирует лучшие практики загрузки изображений, за которыми следует сотрудничество с Nuxt по тому же вопросу. Использование этого компонента привело к значительному улучшению времени отрисовки и сдвига макета (пример: сокращение на 57% наибольшей отрисовки содержимого и сокращение на 100% совокупного сдвига макета на nextjs.org/give ).
- Автоматизированное встраивание CSS для объявлений веб-шрифтов во время сборки. Эта функция появилась в Angular (Google Fonts) и Next.js (Google Fonts и Adobe Fonts), что привело к заметным улучшениям в Largest Contentful Paint и First Contentful Paint ( пример ).
- Встраивание критического CSS с помощью Critters в Angular и Next.js для сокращения времени отрисовки. При объединении с функцией встраивания CSS шрифтов это привело к улучшению показателей производительности Lighthouse на 20–30 баллов в типичном крупномасштабном приложении Angular.
- Встроенная поддержка ESLint в Next.js, включающая в себя пользовательский плагин и общую конфигурацию, упрощает выявление распространенных проблем, характерных для фреймворка, во время сборки, что обеспечивает более предсказуемую производительность загрузки.
- Введен встроенный ретранслятор производительности в Create React App и Next.js , позволяющий проще оценить производительность страницы с помощью веб-показателей и других пользовательских метрик.
- Гранулярная фрагментация, реализованная в Next.js и Gatsby, приводит к сокращению размеров пакетов на 30–70 процентов, а также повышению производительности кэширования. Это стало значением по умолчанию в Webpack 5.
- Отдельный блок полифилла для старых браузеров, созданный в сотрудничестве с командой Next.js, для улучшения размера пакета в современных браузерах.
Каждая из этих функций либо автоматизирована для включения по умолчанию, либо требует простого согласия. Это необходимо для того, чтобы разработчики могли легко воспользоваться преимуществами, не усложняя свой рабочий процесс.
Что мы планируем на 2021 год?
В течение оставшейся части этого года мы будем сосредоточены на том, чтобы помочь фреймворкам улучшить пользовательский опыт и то, насколько хорошо они работают по таким метрикам, как Core Web Vitals. Эта работа будет включать:
- Соответствие для внедрения лучших практик. Ознакомьтесь с записью в блоге , чтобы узнать больше.
- Оптимизация производительности начальной загрузки за счет нашего сотрудничества по оптимизации изображений , шрифтов и критически важного CSS .
- Загрузка сторонних скриптов (3P) с минимальным влиянием на производительность за счет использования нашего фундамента работы над компонентом Script и проведения глубоких исследований наилучшего порядка и последовательности 3P.
- Масштабируемая производительность JavaScript (например, поддержка компонентов React Server в Next.js).
Наша команда будет стремиться публиковать более регулярную информацию о запросах предложений (RFC) и проектной документации по этим идеям, чтобы любой фреймворк или разработчик, желающий следовать нашим рекомендациям, мог это сделать.
Заключение
Команда Aurora ( Shubhie , Houssein , Alex , Gerald , Ralph , Addy , Kara , Keen , Katie ) с нетерпением ждет продолжения тесного сотрудничества с сообществом фреймворков с открытым исходным кодом по улучшению пользовательских настроек по умолчанию в Next.js, Nuxt и Angular. Мы будем расширять наше участие, чтобы со временем охватить еще больше фреймворков и инструментов. Следите за этим пространством для получения дополнительных сообщений в блоге, выступлений и RFC от нашей команды в течение следующего года :)