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.

Вышел Chrome 91

В нём много нового: улучшения File System Access API, возможность копирования файлов из буфера обмена, возможность добавления подсказок для менеджера паролей, Web Transport под origin trial, #WebAssembly SIMD, API для обнаружения поверхностей в WebXR под origin trial, WebSockets через HTTP/2, ES модули в сервис воркерах.

https://developer.chrome.com/blog/new-in-chrome-91/

Также:
- блог разработчиков
- новое в DevTools
- новое в V8

📢 Ищутся волонтёры для помощи с переводом русскоязычной версии сайта #TC39, а конкретно stage 3 пропозалов (от JSON Modules и ниже). Там необходимо перевести заголовки, описания и названия месяцев. Вот файл, в котором находятся все необходимые строки. Можете сразу добавить меня (https://github.com/chicoxyzzy) в ревьюеры или заменшнить в Вашем PR. На всякий случай, — у нас есть code of conduct.

Апдейт: PR уже есть, помогайте улучшать перевод тут https://github.com/tc39/tc39.github.io/pull/254

Sparkplug — новый неоптимизирующий компилятор JavaScript

Оказывается V8 9.1 был добавлен новый неоптимизирующий компилятор Sparkplug. Благодаря отсутствию оптимизации, процесс компиляции происходит гораздо быстрее. По сути, этот компилятор переводит байткод в соответствующие им инструкции. Такой подход позволяет быстрее начать выполнять код на этапе загрузки, а также переключаться на оптимизированный код и обратно. Подход дает выигрыш, так как на старте многие оптимизации все равно не возможны из-за отсутствия фидбека по исполнению кода. На данный момент получилось достичь 5-15% прироста производительности, но пока реализованы не все идеи связанные с новым компилятором. Больше технических деталей и графиков в статье блога V8: https://v8.dev/blog/sparkplug