WebTransport: новое API для взаимодествие клиент-сервер

WebTransport Working Group опубликовала первый публичный рабочий черновик WebTransport. Новое API можно будет использовать как WebSocket, но с поддержкой нескольких потоков, однонаправленных потоков, доставкой не по порядку (out-of-order delivery) и возможностью выбирать между надежным или ненадежным траспортом. Функциональность строится поверх HTTP3.
Предлагаемое API находится в ранней стадии, и почти наверняка изменится. Разработчики Blink начали экспериментировать с WebTransport около месяца назад. Новое API должно закрыть потребности таких направлений как игры и стриминг, поэтому в эксперименте участвуют такие сервисы как Twitch и Zoom.

Вышел Safari Technology Preview 124

В основном исправления, из нового:
- Имплементация color-mix() в соотвествии с текущим состоянием CSS Color Level 5
- В Element.focus() добавлена опция preventScroll
- Имплементирован AbortSignal.abort()
- Добавлен рендеринг текста на OffscreenCanvas в воркерах
- Для WebGL стал доступен Metal ANGLE бекенд
- Реализована передача RTCDataChannel между процессами

Полный список изменений:

Новые фичи Canvas 2D API

Разработчики Chromium некоторое время работают над нововведениями в Canvas 2D API, и это самое большое расширение API с момента его стандартизации. О новинках хорошо рассказано в видео и git репозитории, где представлено описание (explainer'ы) для каждого из расширений. Ключевые направления расширений:

- Паритет по функциям с другими 2D API;
- Доступ к возможностям Web/CSS;
- Улучшение производительности.

На данный момент в Chromium реализовано 9 фич:

- Reset function – метод reset(), который очищает канвас, текущий путь и стек трансформаций. Не понятно, почему его не было раньше. Позволяет избежать хаков и проседания производительности.
- Color input – добавляет возможность использовать экземпляры CSSColorValue и массивы чисел как значения цвета (сейчас можно использовать только строки).
- Text modifiers – аналоги CSS свойств letter-spacing, word-spacing, font-variant-caps, font-kerning, font-stretch и text-rendering.
- RoundRect – прямоугольник со скругленными углами, что-то вроде CSS border-radius.
- Conic Gradient - аналог CSS conical-gradient()
- Perspective transforms – трансформации с перспективой. На самом деле, сводится к поддержке матриц трансформации 4x4.
- Modern filters – сейчас в канвасе доступны SVG фильтры. Но пользоваться ими неудобно и к тому же они не доступны в воркерах (так как там нет DOM и, соответственно, SVG). Это расширение повторяет SVG фильтры, но в виде JavaScript API.
- willReadFrequently – опция при создании 2d контекста, которая сигнализирует браузеру, что будет активно использоваться getImageData() и браузер может это оптимизировать (как хранить). Сейчас браузеры эвристически решают будет ли активно использоваться getImageData() или нет, что является не надежным и сложным решением.
- Canvas context loss – позволяет браузеру освобождать ресурсы выделенные под контекст, когда канвас не используется (например, за пределами вьюпорта) и добавлять реакцию на восстановление контекста (начать отрисовывать, когда канвас возвращается во вьюпорт).

Еще около 7 фичей находятся на уровне идей.

В середине апреля было объявлено о начале экспериментов в Chrome. Новое API доступно за флагом new-canvas-2d-api (chrome://flags/#new-canvas-2d-api). Разработчики других браузеров в целом относятся позитивно к новым фичам, но есть вопросы по некоторым из них. В Firefox уже ведут разработку, Edge помогает с имплементацией в Chromium, насчет Safari пока информации нет.

Shared Element Transitions

Разработчики Blink собираются начать эксперимент с Shared Element Transitions – новое API, позволяющее делать плавные переходы между состояниями как для Single Page Application так и для Multiple Page Application. API предлагает как переходы между страницами, так и переходы для отдельных элементов страницы. Да, идея похожа на Transitions Filters – технологию, которая была еще в IE5 и IE6, и в дальнейшем спилена. Были попытки сделать что-то подобное и в Blink. Так что это новая попытка добавить функциональность в платформу.
Чтобы понять идею, можно посмотреть видео из статьи Sarah Drasner, в которой она описала как добиваться похожих эффектов используя Vue и Nuxt.js. С новым API все должно стать гораздо проще, и веб приложения смогут быть более похожими на мобильные (в плане интерактивности).
Разработчики других браузеров пока не высказили свое мнение относительно предложения, а вот со стороны веб разработчиков сигналы позитивные. Информации пока не много, будем следить.

Visualizing Garbage Collection Algorithms

Ken Fox разбирает пять алгоритмов работы сборщика мусора и визуализирует каждый из их. Среди алгоритмов есть и Reference Counting Collector, который использовался в первых JavaScript движках, и Copying Collector, который в основном используется в современных движках, когда есть два поколения памяти (молодое и старое).

https://spin.atomicobject.com/2014/09/03/visualizing-garbage-collection-algorithms/

Официальный отчет о 82й встрече TC39

Опубликован отчет последней встречи TC39, которая прошла 19-21 апреля. Сергей уже делал отчет по тому что происходило в каждый из дней. В отчете же от TC39 структура идет от самих пропосалов и их стадии, плюс больше деталей и ссылок.

Официальный сайт #TC39 теперь доступен на нескольких языках

Добавлены русскоязычная, немецкая и китайская версии сайта. Также в скором времени будет добавлена японская версия.

Некоторые ссылки («Предстоящая повестка» и «Протокол последнего собрания») нуждаются в обновлении, что может стать полезным вкладом с Вашей стороны. Также принимаются предложения по улучшению перевода. Репозиторий сайта: https://github.com/tc39/tc39.github.io

Ускорение стек трейсов в Chrome DevTools

Бенедикт Мoйрер рассказал про ускорение стек трейсов в DevTools в Chrome 90. Ускорение в среднем десятикратное, так что открытые DevTools стали значительно меньше тормозить выполнение JavaScript на странице. Это была длинная история, которая включала в себя в том числе изменения в V8. Например, выпилили displayName у функций, так как на поиск (lookup) этого свойства у функции было затратным, а само свойство появилось до ES2015 как хак, так как Function#name тогда было неизменным (immutable) – в ES2015 это исправили и в displayName отпала необходимость (его использовали для нормальных имен функций в стек трейсах). В целом, выходит, что на самом деле ускорили не только DevTools, но и V8.

Действительно ли WebAssembly настолько быстрый?

Таким вопросом задался Surma в статье Is WebAssembly magic performance pixie dust? Короткий ответ неизменен – зависит от многих факторов. Нужно уметь готовить: если сделать что-то не так, то WebAssembly может быть гораздо медленей JavaScript. В статье приводятся такие примеры, сравнивнение разных методов компиляции в WASM и немного опыта по использованию AssemblyScript.

Shadow DOM + Event = ?

Когда говорят про Shadow DOM, обычно вспоминают только про изоляцию DOM элементов и стилей. Но Shadow DOM также добавляет новые правила и особенности в работе событий, а именно в том как они распространяются по DOM дереву. Тема непростая, и Pierre-Marie Dartus взялся написать по ней полноценный гайд. И у него хорошо получилось, всё по делу, а главная фишка гайда – интерактивные визуализации, с которыми проще разобраться в том, что происходит с событием по шагам и с разными свойствами.

Learn CSS — An evergreen CSS course

https://web.dev/learn/css/

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

С начала мая накопилось много новостей, которые я ещё обязательно опубликую, а пока хочу напомнить, что сегодня начинается очередное пленарное заседание #TC39, которое продлится два дня. Ознакомиться с повесткой можно здесь: https://github.com/tc39/agendas/blob/master/2021/05.md

⚡️ Stage 3 пропозал RegExp Match Indices отправляется на stage 4 и попадёт в ES2022

⚡️ Stage 3 пропозал Top-level await отправляется на stage 4 и попадёт в ES2022

⚡️ Stage 2 пропозал Accessible Object.prototype.hasOwnProperty() переходит на stage 3

⚡️ ECMA402 пропозал Intl DisplayNames v2 переходит со stage 2 на stage 3

⚡️ ECMA402 пропозал Extend TimeZoneName Option Proposal также переходит со stage 2 на stage 3

⚡️ Пропозал Resizable buffers переходит со stage 2 на stage 3

Разработчики Flow о будущем проекта

Flow приоритезирует потребности Facebook (ещё больше? 🙃) перед остальным сообществом, собирается добавлять (видимо, несовместимий с JavaScript и TypeScript) новый синтаксис, а также будет (ещё меньше?) уделять внимания внешним контрибьюшнам.

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b

⚡️ Stage 1 пропозал RegExp Unicode set notation + properties of strings отправляется на stage 2

------------------

На этом 83я встреча #TC39 заканчивается. Следующая встреча состоится 13-16 июля. Не уверен, что смогу там присутствовать, потому что в моей таймзоне они будут проходить с 04:00 до 09:00 :(

Вышел Safari Technology Preview 125

В нём улучшения Web Inspector, много исправлений и улучшений CSS, веб анимации, продолжение работы над #WebAssembly Typed Function References, улучшения и исправления разных Web API, рендеринга и WebRTC.