В команде Chrome мы заботимся об удобстве пользователей и процветающей веб-экосистеме. Мы хотим, чтобы пользователи получали наилучшие впечатления от работы в Интернете не только со статическими документами, но и при использовании многофункциональных интерактивных приложений.
Инструменты и платформы с открытым исходным кодом играют большую роль, позволяя разработчикам создавать современные приложения для Интернета, а также поддерживают хороший опыт разработчиков. Эти платформы и инструменты расширяют возможности компаний любого размера, а также частных лиц, занимающихся созданием веб-приложений.
Мы считаем, что фреймворки также могут сыграть большую роль, помогая разработчикам в решении ключевых аспектов качества, таких как производительность, доступность, безопасность, готовность к работе с мобильными устройствами. Вместо того, чтобы просить каждого разработчика и владельца сайта стать экспертом в этих областях и идти в ногу с постоянно меняющимися передовыми практиками, фреймворк может поддерживать это с помощью встроенных решений. Это расширяет возможности разработчиков и позволяет им сосредоточиться на создании функций продукта.
Короче говоря, наше видение заключается в том, что высокая планка качества UX становится побочным эффектом разработки для Интернета.
Aurora: сотрудничество Chrome и веб-фреймворков и инструментов с открытым исходным кодом
В течение почти двух лет мы работали с некоторыми из самых популярных фреймворков, таких как Next.js, Nuxt и Angular, работая над улучшением веб-производительности. Мы также профинансировали популярные инструменты и библиотеки, такие как Vue, ESLint, webpack. Сегодня мы даем этому усилию имя – Аврора .
Полярное сияние – это явление естественного света, мерцающее на небе. Поскольку мы пытаемся помочь пользователям, созданным с помощью фреймворков, сиять и сиять, мы подумали, что это имя — подходящий выбор.
В ближайшие месяцы мы поделимся более подробной информацией об Авроре. Это результат сотрудничества небольшой команды инженеров Chrome (под кодовым названием WebSDK) и авторов фреймворка. Наша цель — обеспечить наилучшее взаимодействие с пользователем для рабочих приложений независимо от браузера, в котором вы выполняете рендеринг.
Какова наша стратегия?
В Google мы многому научились, используя платформы и инструменты для создания и поддержки крупномасштабных веб-приложений, таких как Поиск Google, Карты, Поиск изображений, Google Фото и т. д. Мы обнаружили, как платформы могут играть решающую роль в предсказуемом качестве приложений, предоставление надежных настроек по умолчанию и самоуверенных инструментов .
Фреймворки имеют уникальную возможность влиять как на DX, так и на UX, поскольку они охватывают всю систему: клиент и сервер, среды разработки и производства, а также интегрируют такие инструменты, как компилятор, сборщик пакетов, линтер и т. д.
Когда решения встроены в структуру, команды разработчиков могут использовать эти решения и сосредоточить свое время на том, что наиболее важно для продукта — предоставлении пользователям замечательных функций.
Пока мы работаем над улучшением инструментов, находящихся на каждом уровне стека, такие платформы, как Next.js, Nuxt и Angular CLI, управляют каждым этапом жизненного цикла приложения. По этой причине, а также из-за того, что внедрение React является самым масштабным в основной экосистеме UI-фреймворка, большая часть наших оптимизаций началась с проверки в 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 для сокращения времени отрисовки. Результатом стало улучшение показателей производительности Lighthouse на 20–30 пунктов в типичном крупномасштабном приложении Angular, когда это было объединено с функцией встраивания шрифтов CSS.
- Готовая поддержка ESLint в Next.js, включающая собственный плагин и общую конфигурацию, упрощающую выявление типичных проблем, специфичных для платформы, во время сборки, что приводит к более предсказуемой производительности загрузки.
- Внедрение встроенного ретранслятора производительности в Create React App и Next.js , позволяющего упростить анализ производительности страницы с помощью веб-показателей и других пользовательских показателей.
- Детальное разбиение на фрагменты реализовано в Next.js и Gatsby, что приводит к уменьшению размеров пакетов на 30–70 процентов и одновременно повышению производительности кэширования. Это стало значением по умолчанию в Webpack 5.
- Отдельный фрагмент полифилла для старых браузеров, созданный в сотрудничестве с командой Next.js для увеличения размера пакета в современных браузерах.
Каждая из этих функций либо была автоматизирована и включена по умолчанию, либо требуется только простое согласие. Это важно для того, чтобы разработчики могли легко воспользоваться преимуществами, не усложняя свой рабочий процесс.
Что планируем на 2021 год?
До конца этого года мы сосредоточимся на том, чтобы помочь стекам фреймворков улучшить взаимодействие с пользователем и повысить эффективность их работы по таким показателям, как основные веб-показатели. Эта работа будет включать в себя:
- Соответствие для внедрения лучших практик. Чтобы узнать больше, ознакомьтесь с публикацией в блоге .
- Оптимизация производительности начальной загрузки за счет нашего сотрудничества по оптимизации изображений , шрифтов и критического CSS .
- Загрузка сторонних скриптов (3P) с минимальным влиянием на производительность благодаря нашему опыту работы над компонентом Script и проведению глубокого исследования того, как лучше всего упорядочивать и упорядочивать 3P.
- Масштабируемая производительность JavaScript (например, поддержка серверных компонентов React в Next.js).
Наша команда будет стремиться публиковать более регулярную информацию о RFC и проектной документации для этих идей, чтобы любой фреймворк или разработчик, желающий следовать за нами, мог это сделать.
Заключение
Команда Aurora ( Шубхи , Хусейн , Алекс , Джеральд , Ральф , Адди , Кара , Кин , Кэти ) надеется на продолжение тесного сотрудничества с сообществом фреймворков с открытым исходным кодом над улучшением настроек пользовательского опыта по умолчанию в Next.js, Nuxt и Angular. Со временем мы будем расширять наше взаимодействие, чтобы охватить еще больше платформ и инструментов. Следите за этим разделом, чтобы увидеть больше публикаций в блогах, выступлений и RFC от нашей команды в следующем году :)