Адаптация Relay для большой кодовой базы

На прошедшем React Conf 2021 был представлен новый компилятор Relay для оптимизации GraphQL-запросов — "Introducing the new Relay compiler".

Relay — это фреймворк для работы с GraphQL в React-приложениях. При использовании Relay компоненты декларативно описывают необходимые им данные с помощью GraphQL-фрагментов. Компилятор Relay на этапе сборки приложения обходит компоненты и подготавливает оптимизированный GraphQL-запрос на базе этих фрагментов.

Скорость компилятора с ростом кодовой базы Facebook постепенно ухудшалась, поэтому его переписали c JavaScript на Rust. Скорость работы компилятора улучшилась в пять-семь раз. Кроме улучшения производительности новый компилятор подготовил платформу для дальнейшего развития Relay. Например, благодаря ему в Relay появилась поддержка новой директивы @required для упрощения работы с данными. Также этот компилятор лежит в основе расширения для VSCode для поддержки автодополнения имён полей в GraphQL-фрагментах. Расширение на данный момент недоступно для внешних пользователей, так как над ним ещё ведётся работа.

#react #graphql #rust

https://relay.dev/blog/2021/12/08/introducing-the-new-relay-compiler/

Отладка утечек памяти с помощью "Detached Elements" в Edge DevTools

Патрик Броссет из Microsoft рассказал о новом инструменте для упрощения поиска утечек памяти в клиентских JavaScript-приложениях — "Debug memory leaks with the Microsoft Edge Detached Elements tool".

В DevTools Edge была добавлена новая вкладка "Detached Elements". С её помощью можно получить список всех DOM-элементов, откреплённых от документа, и быстро найти участок кода, в котором были сохранены ссылки на эти элементы. Для поиска утечек также можно использовать вкладку "Memory" со снятием снапшотов памяти (доступно во всех Chromium-based браузерах), но по сравнению с "Detached Elements" это не так удобно.

"Detached Elements" будет доступен в Edge 97.

#edge #devtools #debug

https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/

Создание временных сайтов с помощью Netlify Drop

Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов.

Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы.

Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён.

#tool

https://app.netlify.com/drop

Релиз Firefox 95

В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation.

В macOS уменьшено потребление процессора во время обработки событий. А также было уменьшено потребление энергии при программном декодировании видео. Это особенно заметно в режиме полноэкранного просмотра.

В HTML был добавлен глобальный атрибут inputmode для настройки вида виртуальной клавиатуры на смартфонах. Firefox на Android теперь поддерживает CSS-свойство cursor.

В JS-движке значительных изменений не было, но был добавлен Crypto.randomUUID() — API для получения криптографически устойчивых значений UUID. Изменено поведение свойства SpeechSynthesisEvent.elapsedTime; теперь оно возвращает время в секундах.

#firefox #release

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

Преимущества хранения node_modules в git

Джек Франклин из команды разработки Chrome DevTools написал статью о том, почему они коммитят зависимости в систему контроля версий — "Why you should check-in your node dependencies".

Плюсы такого подхода:
— ускорение разворачивания проекта и уменьшение нагрузки на сеть;
— гарантированная воспроизводимость сборок;
— независимость от центрального хранилища кода;
— осознанное использование зависимостей.

Также в статье упоминается про большие диффы при добавлении зависимостей. Эта проблема у них частично решена запретом обновления проектного кода вместе с кодом зависимостей. Про минусы больше ничего нет, однако при таком подходе как минимум появляются проблемы при использовании нативных модулей.

#npm

https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies/

Улучшилась ли скорость веба благодаря Web Vitals?

Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".

Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.

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

Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.

#performance #research

https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/

За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:

— Невидимый бэкдор в JavaScript-коде
— Веб-зомби
— Скромная перегрузка функций в TypeScript
— Откладывание выполнения некритичных скриптов
— Использование ссылок mailto
— Алгоритмы сжатия в HTTP
— Стриминг контента в SPA
— Эффективное решение задач и отладка
— Как работает троттлинг в Lighthouse
— UI браузера с точки зрения безопасности
— Подожди пять минут

Становитесь патроном канала на Patreon, чтобы получить доступ Defront Plus (более 300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

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

https://www.patreon.com/myshov

Глубокое клонирование объектов с помощью structuredClone

Сурма из Google рассказал про новое API для глубокого клонирования JavaScript-объектов — "Deep-copying in JavaScript using structuredClone".

Самым популярным решением для глубокого клонирования объектов был JSON-хак:

const myDeepCopy = JSON.parse(JSON.stringify(myOriginal));

Он стал настолько популярен, что в браузерах были добавлены специальные оптимизации для этого хака. На данный момент он остаётся самым быстрым способом для глубокого клонирования небольших объектов. Однако он не поддерживает объекты с циклическими ссылками, Map, Set, Date, RegExp и ArrayBuffer.

Структурное клонирование — это другое название для глубокого клонирования. Оно использовалось браузерами неявно при передаче объектов с помощью postMessage и сохранении объектов в IndexedDB. Новый метод structuredClone открывает удобный доступ к этому механизму клонирования без недостатков JSON-хака:

const myDeepCopy = structuredClone(myOriginal);

Поддержка strucutredClone на данный момент есть в Firefox 94, в nightly-версии Chrome и Safari TP.

#js #api

https://web.dev/structured-clone/

Релиз Safari 15.2

На прошлой неделе вышла новая версия Safari. Джен Симмонс рассказала про основные новинки релиза — "New WebKit Features in Safari 15.2".

— Объём доступной памяти для WebAssembly увеличен до 4Гб. Была оптимизирована обработка исключений.

— Добавлена поддержка HTTP-заголовков Cross-Origin-Opener-Policy и Cross-Origin-Embedder-Policy для включения SharedArrayBuffer

— Добавлена поддержка цветового пространства P3 в canvas

— Добавлена поддержка File Access API для упрощённой работы с файлами в веб-приложениях

По набору новых фич видно, что разработчики WebKit активно работают над добавлением поддержки веб-версии Photoshop.

Safari 15.2 доступен в macOS Monterey, Big Sur, Catalina и в iOS/iPadOS 15.2.

#safari #release

https://webkit.org/blog/12140/new-webkit-features-in-safari-15-2/
https://developer.apple.com/documentation/safari-release-notes/safari-15_2-release-notes

TechTalks Зарплаты.ру 29.12 в 19:00 в Новосибирске

Финалим год своей любимой развлекухой — болтаем за IT под пиво и пиццу. Как обычно, в программе 2 отделения:

Открытый микрофон
Вы заранее присылаете нам свой вопрос, кейс, жалобу, доклад, стендап - что угодно, о чём бы вы хотели поговорить с IT-аудиторией. Сцена и микрофон к вашим услугам, но можно написать и анонимно — на техтолке "письмо" прочитают ведущие. 5-10 минут на ваш кейс и 10-15 минут на его обсуждение. Форма для вашего кейса

IT-игра "100-к-2" (по мотивам "Сто к одному")
Мы пристали с дурацкими вопросами к сотрудникам Зарплаты.ру — от разработчиков до сотрудников отдела продаж и маркетологов. Будем угадывать самые популярные и самые редкие ответы от наших ребят. Новогоднее настроение, подарки и кринжовый угар — что ещё нужно за 3 дня до конца года?

Руин-паб "Типография" (Новосибирск, Красный проспект, 22), начало в 19:00

Ссылка на регистрацию

Fuite — инструмент для поиска утечек памяти в SPA

Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".

Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.

Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.

#debug #tool #spa

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

Группировка элементов массива с помощью groupBy

На последней встрече TC39 пропозал groupBy перешёл на stage 3. Лаури Барт рассказала о том, как он работает — "Array Grouping Explainer".

Группировка элементов массива распространённая операция. Она поддерживается всеми популярными утилитарными библиотеками (lodash, ramda). Пропозал реализует похожий алгоритм из этих библиотек. Метод groupBy принимает коллбек, в параметрах которого передаются текущий элемент, текущий индекс и сам массив. Элементы массива разбиваются на группы на основе строки, которая возвращается коллбеком. В результате получается объект с распределёнными элементами массива:

const names = ['vasya', 'vasilisa', 'oleg'];
const groupedNames = names.groupBy(name => {
 return name.charAt(0);
}
// результат:
// {v: ['vasya', 'vasilisa'], o: ['oleg']}

Также в пропозале есть второй метод groupByToMap, который работает точно также как groupBy, но возвращает не объект, а Map.

#js #proposal

https://laurieontech.com/posts/array-grouping/

Самые интересные факты из веб-альманаха 2021

Стефан Джудис рассказал о наиболее интересных фактах из веб-альманаха 2021 года — "Highlights of the Web Almanac 2021".

Каждый год майнтейнеры HTTP Archive и активные участники сообщества составляют веб-альманах — слепок текущего состояния веба на базе исследования более восьми миллионов популярных сайтов. В этом году в веб-альманахе было опубликовано 24 главы про HTTP, HTML, CSS, JS, приватность, производительность и т.п.

Из интересного:
— jQuery используется на 84% сайтов, React — на 8%;
— Wordpress обслуживает 33% просканированных сайтов;
— 94% сайтов используют по крайней мере один сторонний ресурс; подавляющее большинство от сервисов Google;
— если на странице подключается виджет youtube, медианное время блокирования главного потока составляет 1,6 секунд;
— 16% страниц используют бессодержательные названия ссылок: "click here", "read", "more" и т.п.;
— 22% сайтов поставляется с HSTS (HTTP Strict Transport Security);
— на 20% сайтов нет определения атрибута lang.

#web #research

https://www.stefanjudis.com/blog/highlights-from-the-web-almanac-2021/

Defront Feed — новости веб-разработки

Мне часто попадаются небольшие новости и статьи, которые не попадают под формат канала. Такие материалы я обычно ретвичу или делюсь ими в чате канала. Долго думал, как эффективнее доносить их до аудитории. Публиковать их здесь не хочется, так как пропадёт фишка канала с дистиллированными статьями. Поэтому решил сделать отдельный канал для такого новостного контента — Defront Feed. В нём будут публиковаться новости и мини-посты, которые не попали в Defront и Defront Plus.

Приглашаю подписаться на канал. Если у вас есть какие-нибудь замечания, идеи и любой другой фидбек, то пишите мне в лс или в чат, контакты есть в описании канала.

@defront_feed

Тюнинг производительности Next.js-приложений

Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".

Для загрузки сторонних скриптов рекомендуется использовать компонент next/noscript со стратегией lazyOnload, чтобы код начинал грузиться тогда, когда завершается загрузка основного кода приложения. Для вставки изображений рекомендуется использовать компонент next/image. Он берёт на себя конвертацию изображений, генерацию плейсхолдеров и поддержку ленивой загрузки. Для уменьшения размера основного бандла приложения можно использовать динамическую загрузку кода с помощью import(). Для динамической загрузки React-компонентов — хелпер next/dynamic.

Полезная статья. Рекомендую почитать, если работаете с Next.js.

#jsframeworks #performance #react

https://calibreapp.com/blog/nextjs-performance

Как подписать JSON

Раскопал в закладках статью Лауренса Вон Хоутвена про проблему криптографической подписи JSON — "How (not) to sign a JSON object".

Задача заключается в следующем. Есть некий JSON, необходимо гарантировать его подлинность.

Самый надёжный способ — сериализация объекта и получение для него подписи (tag) с помощью симметричного шифра. Затем полученная подпись отправляется на сервер вместе с данными в формате tag,json.

Если нужно добавить подпись внутрь передаваемого JSON, то появляется проблема с UTF. Например в python благодаря UTF можно сконструировать побайтово отличающиеся объекты, но идентичные друг другу при их сравнении с помощью ==. Это потенциальная брешь в безопасности. Для решения проблемы можно отправлять сериализовнную строку вместе с данными, использовать строковую замену или использовать альтернативный формат с автоматической канонизацией UTF. Тем не менее всё это можно легко запороть, что подтверждается неудачными реализациями подписей у AWS и Flickr.

В конце статьи автор предлагает использовать TLS для передачи данных или рассмотреть вариант отказа от подписи в пользу других решений.

#security

https://latacora.micro.blog/2019/07/24/how-not-to.html
https://news.ycombinator.com/item?id=20516489 (обсуждение статьи)

Новые метрики для измерения отзывчивости сайтов

Разработчики Chrome уже более полугода работают над добавлением новых метрик, отвечающих за измерение отзывчивости сайтов. Хонгбо Санг рассказывает, как их можно подсчитать — "Hands On with the new Responsiveness Metrics".

В Core Web Vitals за отзывчивость страницы отвечает метрика First Input Delay. FID показывает величину задержки между пользовательским событием и временем, когда это событие начинает обрабатываться. У этой метрики много ограничений: оно показывает время задержки только первого события, оно не включает в себя время обработки события, с её помощью нельзя понять, лагает ли страница.

В новых экспериментальных метриках измеряется время обработки взаимодействий пользователя (interactions) на протяжении всей жизни страницы. Взаимодействие — это комбинация логически связанных DOM-событий. Например, для нажатия кнопки на клавиатуре такими событиями будут keydown, keypress и keyup.

На данный момент ещё нет окончательного списка метрик отзывчивости, так как у разных вариантов есть свои плюсы и минусы. В статье есть ссылка на код, который можно запустить в DevTools, чтобы получить все метрики, которые находятся на рассмотрении. Также есть экспериментальный плагин для Lighthouse для получения этих метрик.

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

#performance #metrics

https://calendar.perfplanet.com/2021/hands-on-with-the-new-responsiveness-metrics/

Причины отсутствия поддержки AVIF в Safari

Джон Хеншоу написал небольшой пост про причины отсутствия поддержки AVIF в Safari — "Why WebKit supports AVIF but Safari does not".

Поддержка AVIF есть в Chrome и Firefox, единственным браузером, который не поддерживает новый формат изображений, остаётся Safari. Похожая ситуация была с WebP — Safari стал последним браузером, который добавил его поддержку. Со стороны это может показаться странным, потому что декодер AVIF был добавлен в WebKit в апреле 2021. Проблема заключается в том, что Safari не использует код WebKit для декодирования изображений, он делегирует эту работу системным библиотекам. Это означает, что поддержку нового формата в Safari стоит ждать тогда, когда его поддержка появится на уровне всей операционной системы.

#graphics #safari

https://www.coywolf.news/webmaster/why-webkit-supports-avif-but-safari-does-not/

Важность тестирования сайтов на слабых устройствах

Эрик Бейли призывает тестировать сайты на слабых устройствах — "Test Your Product on a Crappy Laptop".

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

Чтобы контролировать доступность сайта для всех категорий устройств, Эрик предлагает проводить регулярные юзабилити-тесты на слабых устройствах. Также он предлагает купить дешёвый ноутбук (crapbook) и периодически вести на нём разработку.

У меня есть небольшая история на эту тему. Как-то мне пришлось работать на слабом ноуте, благодаря этому я нашёл редкую проблему с перформансом в React DevTools. Если бы работал на мощном ноуте, то проблема осталась бы незамеченной.

#performance #mobile

https://css-tricks.com/test-your-product-on-a-crappy-laptop/