Крис Фоллин написал статью про новую архитектуру бэкенда Cranelift — "A New Backend for Cranelift, Part 1: Instruction Selection".

Cranelift — это фреймворк для компиляторов, написанный на Rust. По своему дизайну он похож на llvm: фронтенд часть отвечает за преобразование кода в промежуточное представление (IR), бэкенд часть — за компиляцию IR в исполняемый код целевой платформы. Cranelift используется в Firefox для компиляции wasm. Также он используется в качестве компилятора в wasmtime — обособленном рантайме для WebAssembly.

Старая архитектура бэкенда Cranelift была сложна для добавления новых фич. Также нельзя было скомпилировать последовательность из нескольких команд IR в одну команду (отношение "многие к одному"). Новая архитектура решает эти проблемы.

Статья хардкорная. Рекомендую почитать всем, кто интересуется темой разработки компиляторов.

#firefox #internals #wasm

https://cfallin.org/blog/2020/09/18/cranelift-isel-1/

Узнал сегодня про фреймворк neo.mjs. Его основная фишка — разделение SPA на связанные части, с которыми можно работать из разных окон/вкладок. Тобиас Улих — автор фреймворка — написал статью про его особенности — "Expanding Single Page Apps into multiple Browser Windows".

Neo.mjs под капотом активно использует SharedWorker — специальный вид воркера, доступ к которому можно получить из разных контекстов браузера. Приложения, написанные с помощью этого фреймворка, используют минимум три воркера: VDOM Worker (работа с Virtual DOM), Shared App Worker (общее состояние приложения), Shared Data Worker (работа с данными). Каждое новое окно с приложением обращается к ним для выполнения своих задач. Благодаря такому подходу становятся возможны интересные пользовательские сценарии, например, перемещение компонента или дерева компонентов в другое окно/таб браузера с сохранением состояния инстанса компонента.

Есть проблемы с Safari, так как он не поддерживает SharedWorker. Работа в Safari возможна в режиме фоллбека, но в этом случае, насколько я понял, у каждого окна будет свой набор уже обычных воркеров без всех преимуществ SharedWorker.

В общем, интересный подход. Но, как мне кажется, он не станет массовым, так как сложнее в реализации и поддержке по сравнению с традиционными SPA.

#jsframeworks

https://medium.com/swlh/expanding-single-page-apps-into-multiple-browser-windows-e6d9bd155d59

Примерно месяц назад вышел первый релиз кандидат React 17, в котором нет новых значимых фич. Но в новой версии появится поддержка нового типа преобразования JSX (JSX transform), благодаря которому больше не нужно постоянно импортировать React. Луна Руан в блоге React написала про это статью — "Introducing the New JSX Transform".

Babel и TypeScript преобразуют JSX в вызовы функций React.createElement, поэтому нужно импортировать React в текущий скоуп. Это неинтутивно. Также использование React.createElement влечёт за собой дополнительные накладные расходы. Для решения этих проблем был разработан новый тип преобразований JSX.

React 17 RC включает в себя две новые функции jsx и jsxs, которые должны использоваться только транспиляторами. Транспиляторы импортируют их в код компонентов автоматически при преобразовании JSX.

Поддержка нового преобразования уже есть в Babel 7.9 и TypeScript v4.1 beta. Для его включения в babel 7.9 нужно указать опцию {"runtime": "automatic"}. В babel 8 он будет включаться по умолчанию.

Новый JSX transform будет бэкпортирован в React 16.x, React 15.x и React 0.14.x.

#react #jsframeworks

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Вчера вышел Firefox 81. В новой версии нет каких-либо больших изменений.

Атрибут sandbox у iframe'ов теперь поддерживает токен allow-downloads. Также у iframe'ов была удалена поддержка нестандартного mozallowfullscreen, вместо него следует использовать allow="fullscreen". Новая версия Firefox начала поддерживать нестандартный HTTP-заголовок Content-Disposition, содержащий имя файла с пробелами без кавычек. Скрипты воркеров с неправильным MIME-типом теперь будут блокироваться в Worker и SharedWorker.

Улучшена доступность элементов video и audio. Их элементы управления остаются доступны, даже если они были визуально временно скрыты. Оставшееся время проигрывания теперь доступно скринридерам.

В инструментах разработчика дебагер отображает TypeScript-файлы соответствующей иконкой. JSON-ответы с XSSI-защитой корректно парсятся и отображаются в виде дерева. Добавлена поддержка остановки выполнения скрипта на первой инструкции. Улучшен инструмент симуляции проблем со зрением.

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/81
https://www.mozilla.org/en-US/firefox/81.0/releasenotes/

В блоге v8 был опубликован пост Марьи Хёлтэ про использование Atomics — "Atomics.wait, Atomics.notify, Atomics.waitAsync".

Объект Atomics предоставляет набор функций для атомарной работы с разделяемой памятью в воркерах. Можно сказать, что это низкоуровневое API для организации конкурентной работы в JavaScript. В статье разбирается пример создания класса AsyncLock, который реализует мьютекс c помощью Atomics.wait, Atomics.notify и Atomics.waitAsync. Атомики были добавлены в спецификацию ES2017. Их поддержка есть в Firefox, Chrome и Node. Поддержка Atomics.waitAsync пока доступна только в Chrome.

Никогда не работал с Atomics, захотелось посмотреть их в работе. Написал небольшой пример использования AsyncLock (линк на пример в конце этого поста).

В общем, рекомендую заглянуть в статью, если интересно узнать как работать с Atomics.

#js

https://v8.dev/features/atomics
https://github.com/myshov/asynclock

Кэти Хэмпениус написала большую статью про сети доставки содержимого — "Content delivery networks (CDNs)".

CDN используются для ускорения доставки контента до пользователей благодаря сети географически распределённых серверов. Каждый сервер сети хранит закэшированные ресурсы оригинального сайта и в некоторых случаях поддерживает с ним соединение для ускорения доставки динамически генерируемых страниц.

В статье разбираются фичи и протоколы, которые предоставляют современные CDN: TLS 1.3, HTTP/2, HTTP/3, минификация ресурсов, оптимизация изображений и т.п. Есть немного про тюнинг кэширования и возможные проблемы, с которыми можно столкнуться при включении HTTP/2.

Отличная статья. Рекомендую почитать всем, кто интересуется производительностью.

#performance #net

https://web.dev/content-delivery-networks/

Лия Веру недавно написала статью с критикой web-компонентов — "The failed promise of Web Components".

Основная претензия Лии заключается в том, что добавление web-компонентов в платформу не решило проблему простого использования стороннего кода. В то время как у web-компонентов есть потенциал стать средством, которыми могут пользоваться дизайнеры, иногда они требуют настройки сложной сборки, что находится вне компетенции тысяч людей. Как решение этой проблемы Лия призывает сообщество создать единый реестр для консолидации простых и доступных web-компонентов, которыми бы мог воспользоваться любой разработчик вне зависимости от уровня компетенций.

Хорошая инициатива. Но Доменик Деникола (гуглер, занимающийся разработкой web-стандартов) в комментариях пишет о том, что недостаточно создать реестр, также нужно решить проблемы совместимости браузеров.

#webcomponents #musings

https://lea.verou.me/2020/09/the-failed-promise-of-web-components/

Ян Шеффлер и Сигурд Шнейдер — разработчики Chrome DevTools — рассказали о том, как они добавляли новую фичу в инструменты разработчика — "How we built the Chrome DevTools Issues tab".

В статье рассказывается про реализацию таба "Issues", куда попадают проблемы, обнаруженные на странице. Новый таб был добавлен, для того чтобы облегчить поиск и исправление проблем и разгрузить основную консоль.

Добавление новой фичи в инструменты разработчика может затрагивать три области: основной код Chromium, Chrome DevTools Protocol (CDP — это по сути бэкенд для DevTools) и пользовательский интерфейс DevTools (написан с использованием HTML, CSS и JS). В случае добавления "Issues" понадобилось модифицировать только CDP и фронтенд.

Рекомендую заглянуть в статью, если интересно узнать о том, как разрабатывается Chrome DevTools.

#chrome

https://developers.google.com/web/updates/2020/09/issues-tab

Йоханнес Бойс опубликовал итоги анализа производительности большого числа сайтов — "Core Web Vitals – Wix vs. WordPress, Shopify vs. Shopware – What’s fastest?".

В исследование попали 18 миллионов доменов со статистикой о используемых технологиях (CMS, CDN, языки программирования и т.п.) и данными по разным типам устройств. Из самого интересного. Среди CMS самые лучшие метрики производительности показали Jimdo и Typo3. Медленнее всех оказался WIX, на предпоследнем месте находится Wordpress. Только 70% проанализированных AMP-страниц удовлетворяют хорошим показателям Web Vitals. Используемые языки программирования не влияют на метрики производительности. Очень медленными оказались сайты, которые используют Angular.

Интересное исследование. Обязательно посмотрите, если интересуетесь темой производительности.

#research #performance

https://www.sistrix.com/blog/core-web-vitals-wix-vs-wordpress-shopify-vs-shopware-whats-fastest

Пролетело две недели. Пора сделать апдейт о том, что было опубликовано в Defront Plus за это время:

— Как в Slack разрабатывают хорошие HTML-формы
— От Rust к TypeScript
— Производительность сайтов, использующих JAMStack-архитектуру
— Эффективная отправка запросов с помощью пула промисов (promise pool)
— Этичность трекинга пользователей с помощью CSS
— Особенности работы и разработки JavaScript-минификаторов
— Скрипты для анализа проблем настройки окружения для разработки
— Создание изображения, которое можно выполнить как JS-код
— 6 способов синхронизации данных между табами
— Сравнение React и web-компонентов

Defront живёт и развивается благодаря вашей поддержке. Поддержите канал на Patreon, чтобы получить доступ к дополнительным постам.

Спасибо всем, кто читает и поддерживает канал!

https://www.patreon.com/myshov

P.S. В опросе по поводу частоты постов о Patreon голоса распределились примерно одинаково на трёх вариантах. Поэтому пока оставлю так как есть. Одна публикация в две недели кажется самым лучшим вариантом.

Сергей Руденко из Airbnb написал статью про миграцию кодовой базы фррнтенда компании с JavaScript на TypeScript — "ts-migrate: A Tool for Migrating to TypeScript at Scale".

Для миграции они разработали инструмент ts-migrate, который помогает в массовой конвертации JavaScript файлов. Для автоматического поиска проблемных мест в коде и запуска необходимых трансформаций используются диагностики TypeScript language server. Трансформации представляют собой кодмоды, которые могут использовать jscodeshift, AST TypeScript или могут работать с исходным кодом как с обычным текстом. Есть трансформации для упрощения миграции на TypeScript React-компонентов, но без поддержки хуков.

Благодаря ts-migrate в Airbnb на TypeScript было переведено более 80% всей кодовой базы фронтенда (6 миллионов строк кода). Но так как утилита устанавливает any в проблемных местах, у ребят осталось ещё много работы над добавлением полноценных типов.

Рекомендую почитать статью, если планируете перевести код своего проекта на TypeScript.

#typescript #migration #tool

https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc

Джейсон Миллер и Мэйсон Фрид представили экспериментальную поддержку Declarative Shadow DOM в Chrome.

Declarative Shadow DOM позволяет описывать разметку web-компонентов декларативно в коде HTML-страницы без использования императивного API с помощью JavaScript. Это очень важная фича для развития экосистемы web-компонентов. Про неё уже был пост в канале, его можно найти тут.

Самое главное на что стоит обратить внимание при использовании Declarative Shadow DOM. Построение Shadow DOM производится на этапе парсинга страницы, за счёт этого компоненты на странице рендерятся быстрее по сравнению с традиционным императивным подходом. Элемент template c атрибутом shadowroot становится теневым корнем (shadow root) и автоматически прикрепляется к родительскому элементу. Для сериализации DOM дерева с Shadow DOM можно использовать новый метод getInnerHTML().

Экспериментальная поддержка Declarative Shadow DOM появилась в Chrome 85. Ожидается, что она будет включена по умолчанию в Chrome 88. Браузеры без поддержки Declarative Shadow DOM могут использовать полифилл.

#experimental #webcomponents

https://web.dev/declarative-shadow-dom/

Зейнеп Канкара в блоге V8 написала статью про Indicium — новый инструмент рантайм анализа V8 — "Indicium: V8 runtime tracer tool".

Чтобы понять, зачем нужен этот инструмент, нужно немного разобраться в кишках V8. Для представления JavaScript-объектов V8 использует специальную структуру — Map (не тот Map, который определён в ECMAScript). Благодаря этой структуре движок экономит оперативную память при работе с большим числом однотипных объектов. Map в свою очередь использует оптимизацию Inline Cache (IC) для быстрого доступа к свойствам объектов.

Внутри V8 уже есть всё необходимое для получения информации о Map и IC, и уже есть готовые инструменты для их анализа. Indicium представляет эту информацию в удобном виде, связывая между собой Map и IC. С помощью него можно проанализировать создание объектов и быстро выявить проблемные места в исходном коде.

Indicium — это ещё один полезный инструмент для анализа проблем производительности в Chromium и Node.js.

#performance #tool #v8

https://v8.dev/blog/system-analyzer

Вчера, когда писал пост про Indicium, в ссылках увидел очень интересную статью Матиаса Байненса и Бенедикта Мюрера про концепции, которые используются при создании всех современных JS-движков — "JavaScript engine fundamentals: Shapes and Inline Caches".

Современные движки (V8, SpiderMonkey, JavaScriptCore, Chakra) преобразуют абстрактное синтаксическое дерево программы в байткод, который исполняется интерпретатором. Во время исполнения программы собирается дополнительная информация, на основе которой оптимизирующий компилятор преобразует байткод в машинный код. В разных движках этот пайплайн компиляции/интерпретации уникален. В V8 есть один оптимизирующий компилятор (TurboFan), в SpiderMonkey два (Baseline, Ion Monkey), в JavaScriptCore три (Baseline, DFG, FTL).

При работе с объектами движки тоже похожи друг на друга. При создании объекта в памяти, они сохраняют структуру объекта в скрытый класс, который в разных движках называется по-разному (Map, Shape, Type, Structure). Благодаря использованию скрытых классов происходит экономия оперативной памяти и становится возможна оптимизация "Inline Cache" для быстрого доступа к свойствам объекта.

Два совета из статьи. Всегда определяйте объекты однообразно, чтобы у них был один и тот же скрытый класс. Не стоит менять атрибуты у элементов массива, из-за этого он преобразуется в неоптимальную форму и доступ к любому элементу будет медленным.

Интересная статья. Очень рекомендую почитать всем, кто интересуется внутренним устройством JS-движков.

#js #internals

https://mathiasbynens.be/notes/shapes-ics

Хочу сделать небольшое напоминание о том, что у проекта есть сайт. Вчера ночью не мог запостить статью в канал из-за того, что лежал телеграм. Тем не менее на сайте всё было размещено как положено. Поэтому если будут проблемы с телеграмом в следующий раз, можете проверить сайт, скорее всего пост там будет опубликован.

https://defront.ru/posts/2020/10-october/03-detached-window-memory-leaks/

Джейсон Миллер и Бартек Новиерски из Google рассказали о том, как находить и предотвращать утечки памяти, вызванные откреплёнными окнами, — "Detached window memory leaks".

Откреплённое окно (detached window) — это такое окно, которое было закрыто, но которое всё ещё доступно из JavaScript-кода. Под это определение также попадает iframe (он ведёт себя как вложенное в документ окно), когда в коде сохраняется ссылка на contentWindow или contentDocument. Обычно ссылки на откреплённые окна сохраняются по ошибке, а утечки памяти, связанные с ними, сложно локализовать.

В статье рассказывается о том, как с помощью DevTools находить проблемный код. Предлагается пять вариантов предотвращения появления утечек: обычное удаление ссылки на окно, удаление ссылки при возникновении события pagehide (или установки свойства window.closed ), с помощью использования WeakRef, с помощью использования postMessage для коммуникации окон между собой, с помощью открытия окна с использованием опции noopener.

Большая и хорошая статья. Рекомендую почитать.

#js

https://web.dev/detached-window-memory-leaks/

Патрик Броссет — разработчик Edge — написал статью про малоизвестные особенности CSS-переменных — "3 things about CSS variables you might not know".

1. Если переменная используется в наследуемом свойстве и она оказывается неопределена (например, из-за опечатки), то в этом случае значение свойства будет унаследовано. Если свойство ненаследуемое, оно будет установлено в значение по умолчанию.

2. В var(--foo, fallback) вторым аргументом передаётся значение, которое будет использовано по умолчанию, если переменная будет неопределена. Также в var() можно вкладывать другие var'ы как фоллбеки: color: var(--foo, var(--bar, var(--baz))).

3. Значение CSS-переменных это обычный текст. Это означает, что в них может содержаться строка с запятыми. То есть такое определение вполне валидно --my-variable: one, two, three;. Более того такую строку можно использовать в фоллбеке: content: var(--foo, one, two, three);, в этом случае в var содержится не четыре, а два аргумента.

Интересная статья. Рекомендую почитать всем, кто хочет узнать больше подробностей.

#css

https://patrickbrosset.com/articles/2020-09-21-3-things-about-css-variables-you-might-not-know/

Мэт Перри — автор библиотеки Framer Motion — рассказал о том, в каких случаях браузеры могут троттлить requestAnimationFrame — "Browsers may throttle requestAnimationFrame".

Метод requestAnimationFrame (rAF) — самый главный инструмент для создания плавных анимаций, контролируемых js-кодом. Мэт столкнулся с тем, что в Safari на iOS на двух одинаковых смартфонах, одна и та же анимация в одном случае работала в 30fps, а в другом 60fps. Проблема оказалась в том, что Safari включает троттлинг rAF в режиме сохранения энергии. Также Safari троттлит rAF в iframe'ах с контентом сторонних доменов.

Троттлинг rAF есть и в Firefox, но в нём он ограничивается из-за вопросов безопасности. Для отключения троттлинга сайт должен отправлять HTTP-заголовки: Cross-Origin-Opener-Policy: same-origin и Cross-Origin-Embedder-Policy: require-corp.

#rendering #js

https://mattperry.is/writing-code/browsers-may-throttle-requestanimationframe-to-30fps

Сегодня узнал про утилиту для управления версиями инструментов JavaScript-тулчейна — Volta.

Если объяснять человеческим языком, то Volta похожа на nvm. С помощью неё можно устанавливать и переключаться между разными версиями Node.js. В отличие от nvm она написана на Rust и работает очень быстро. Инициализация nvm при открытии терминала может занимать несколько секунд (на моём стареньком маке около четырёх секунд). Volta исключает необходимость её инициализации при запуске терминала.

Но если бы дело было только в скорости, то было бы не очень интересно. Ещё Volta позволяет пинить версии node/npm/yarn в package.json и автоматически переключаться на нужную версию при переходе в директорию с таким конфигом. То есть можно запушить package.json с запиненными версиями node и npm в git, и всем членам команды, кто использует volta, не надо беспокоится о ручном переключении версии ноды. Ещё одна фишка — установка утилит из npm, которые не надо переустанавливать при переключении версии ноды.

Volta всё ещё находится в стадии активной разработки, поэтому есть кое-какие шероховатости. Например, есть проблемы с вызовом одной JS-утилиты из другой. Разработчики в issue пишут о том, что эта проблема уже в процессе решения. Над проектом работают разработчики из LinkedIn.

В общем, интересный проект. Поставил себе, пока радуюсь скорости открытия терминала.

#js #nodejs #tool

https://volta.sh/

Сегодня вышел Chrome 86. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

File System Access API доступен по умолчанию. С помощью него можно получить доступ к файловой системе пользователя для упрощения работы с локальными файлами.

В рамках origin trials стал доступен Web HID, благодаря которому web-приложения могут взаимодействовать с оборудованием пользователя. Также в рамках origin trials стал доступен Multi-screen Window Placement API. Благодаря этому API возможно получить информацию о всех экранах пользователя и программно управлять размещением окон.

В CSS появилась поддержка псевдокласса :focus-visible, которое позволяет применять для фокуса эвристики, которые использует браузер. Добавлена поддержка псевдоэлемента ::marker для стилизации маркера списка.

Начался процесс удаления поддержки ftp (будет отключён в Chrome 88). Удалена поддержка API WebComponents v0 во WebView.

Много изменений в Chrome DevTools. Добавлена новая панель "Media" для упрощения дебага видеоплейеров. Теперь, как и в Firefox, можно сделать скриншот любого узла DOM-дерева с помощью контекстного меню на панели "Elements". Проблемы с third-party cookie на вкладке "Issues" скрываются по умолчанию. Теперь возможно эмулировать недоступность локально установленных шрифтов. Добавлена эмуляции неактивности пользователей (Idle Detection API) и эмуляция опции экономии траффика (медиа-запрос prefers-reduced-data ). Lighthouse обновлён до версии 6.2.

#chrome #release

https://developers.google.com/web/updates/2020/10/nic86
https://developers.google.com/web/updates/2020/08/devtools