Джек Арчибальд написал статью "Event listeners and garbage collection". В ней рассказывается про способ прерывания любого асинхронного API и объясняется, почему этот способ не приводит к утечкам памяти.

Все современные браузеры поддерживают отмену fetch-запросов с помощью AbortController API. В статье есть код небольшого хелпера, который позволяет использовать AbortController с любым асинхронным API:

async function abortable(signal, promise) {
  if (signal.aborted) {
    throw new DOMException('AbortError', 'AbortError');
  }
  return Promise.race([
    promise,
    new Promise((_, reject) => {
      signal.addEventListener('abort', () => {
        reject(new DOMException('AbortError', 'AbortError'));
      });
    }),
  ]);
}

В нём используется обработчик события "abort", который вызвал подозрение у читателя Джека. В статье очень подробно объясняется, почему этот обработчик не приводит к утечке — при завершении работы асинхронного кода функция удаляется из стека выполнения, поэтому все объекты, которые были связаны с этой функцией, без проблем удаляются сборщиком мусора.

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

#web #api

https://jakearchibald.com/2020/events-and-gc/

Крис Сейнти рассказал про фреймворк от Microsoft для создания SPA-приложений на C# — "What’s behind the hype about Blazor?".

Blazor для C#-разработчиков сейчас очень хайповая тема, потому что благодаря ему можно создавать SPA без использования JavaScript. Его архитектура состоит из двух основных частей: App/Component Model (отвечает за компонентную модель, роутинг и другие невизуальные задачи) и Renderer/Hosting Model (отвечает за обновление и отображение UI).

На данный момент есть два стабильных рендерера: WebAssembly Renderer и Server Renderer. Первый используется для создания привычных SPA-приложений (объявлен стабильным в мае этого года). Второй — для клиентских приложений, которые работают на внешнем сервере, браузер клиента в этом случае отвечает только за обновление DOM. Есть ещё два экспериментальных рендерера: для мобильных приложений (использует нативные UI-элементы) и десктопных приложений (работает поверх Electron/WebWindow).

Если всё взлетит, то Blazor в будущем может стать конкурентом React Native и Flutter.

#webassembly #frameworks

https://stackoverflow.blog/2020/02/26/whats-behind-the-hype-about-blazor/

Новости и благодарности

В этом месяце закончил большую работу — перенёс все статьи из канала на сайт defront.ru. Теперь этот сайт — официальное место обитания проекта в большом интернете. Также у проекта начинают появляться контрибьюторы. Тимур Хазамов два дня назад добавил на сайт поддержку тёмной темы.

Хочу напомнить, что у канала есть чат — @defrontchat. Присоединяйтесь! Подписывайтесь на мой твиттер https://twitter.com/myshov. Там я пишу новости и апдейты, которые иногда не попадают в канал.

Канал существует благодаря вашей поддержке на патреоне. Хочу сказать огромное спасибо моим патронам: Андрею, Артёму, bafonins, brqte, Олегу, Павлу, th1rt3nth, Роману, Сергею, Владу, Денису, Дмитрию и Сергею! Благодарю всех за то, что читаете канал и рассказываете про него своим друзьям и коллегам. Если вам нравится то, что я делаю, и хотите поддержать канал, то это можно сделать тут https://www.patreon.com/myshov.

#спасибо

Аксель Раушмайер написал статью про логические операторы присваивания — "ECMAScript proposal: Logical assignment operators".

Пропозал добавляет в стандарт новые составные операторы присваивания: a ||= b, a &&= b и a ??= b. Благодаря этим операторам можно компактно комбинировать присваивание с коротким циклом вычислений логических операций (short-circuit). Например, запись a ??= b эквивалентна выражению a ?? (a = b). В нём присваивание происходит только в том случае, когда в a находится null или undefined. Пример использования:

const books = [{
  isbn: '123',
}, {
  noscript: 'ECMAScript Language Specification',
  isbn: '456',
}];

// Добавление дефолтного заголовка там, где его нет
for (const book of books) {
  book.noscript ??= '(Unnoscriptd)';
}

assert.deepEqual(books, [{
  isbn: '123',
  noscript: '(Unnoscriptd)',
}, {
  noscript: 'ECMAScript Language Specification',
  isbn: '456',
}]);

Логические операторы присваивания находятся на третьем этапе добавления в стандарт. Его поддержка появилась в Firefox 77 Nightly, Safari Technology Preview 107, и в V8 v8.4 (Chrome 85).

#js #proposal

https://2ality.com/2020/06/logical-assignment-operators.html

Для того чтобы бандлер смог безопасно применить tree-shaking, он должен понимать, что можно удалить, а что нужно оставить. Серджио Гомес написал про это статью — "Everything you never wanted to know about side effects".

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

Чтобы tree-shaking заработал, авторы библиотек добавляют в package.json поле "sideEffects": false, если в библиотеке нет сайд-эффектов, или явно перечисляют файлы, которые нельзя удалять "sideEffects": ["a.js", "b.js"]. Также в исходном коде можно использовать хинт /*#__PURE__*/. Благодаря этому хинту бандлер понимает, что такой код не содержит сайд-эффектов, и его можно безопасно удалить.

Очень рекомендую заглянуть в статью авторам библиотек и всем, кто сталкивался с проблемами tree-shaking.

#performance #bundle

https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/

DebugBear проанализировал влияние тысячи популярных расширений Chrome на производительность страниц и поделился результатами исследования — "2020 Chrome Extension Performance Report".

Наибольшую задержку рендеринга страницы (более 300мс) вызывают расширения Clever, Gramarly, Cash Back For Shopping. Наибольшее влияние на TTI оказывают расширения, Evernote Web Clipper, Grammarly, Avira Password Manager — они блокируют основной поток выполнения более чем на 400 мс. Интересен анализ блокировщиков рекламы. DuckDuckGo Privacy Essentials на большом новостном сайте уменьшает использование CPU с 31 секунды до 1.6 секунд. Но есть другие блокировщики, которые очень сильно увеличивают потребление CPU. Advertising Terminator тратит почти 25 секунд времени CPU на анализ страниц.

В конце исследования есть несколько советов для авторов расширений: лучше всего загружать код расширений только при необходимости, очень не рекомендуется загружать скрипты на document_start, если во время загрузки страницы обновляется иконка расширения, то эту операцию лучше всего прикрыть с помощью debounce.

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

#chrome #research #performance

https://www.debugbear.com/blog/2020-chrome-extension-performance-report

Гал Шлёзингер написал статью про решение задачи FizzBuzz с помощью системы типов TypeScript без использования рантайм-кода — "Typing the Technical Interview in TypeScript".

Всё решение сводится к изобретательной эксплуатации системы типов. Для представления каждого числа используется свой тип: type _0 = 0;, type _1 = Increment<_0>; и т.п. Для сравнения типов между собой используется тип type Eq<A, B extends A> = "passes";. Для логического оператора "и" — type And<A, B> = A extends true ? (B extends true ? true : false) : false; и т.д. После добавления всех необходимых типов результат получается с помощью типа type FIZZBUZZ = FizzBuzzUpTo<_16>;. Результат можно увидеть в подсказке редактора в виде выведенного типа.

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

#typenoscript #fun

https://gal.hagever.com/posts/typing-the-technical-interview-in-typenoscript/

⚡️Официально: Генеральная Ассамблея Ecma International одобрила спецификации
ECMA262 (ECMAScript® 2020 Language Specification)
ECMA402 (ECMAScript® 2020 Internationalization API Specification)

Новое в ECMA262:
- String.prototype.matchAll
- import()
- BigInt
- Promise.allSettled
- globalThis
- for-in mechanics
- Optional chaining
- Nullish coalescing operator
- import.meta

Новое в ECMA402:
- Intl.RelativeTimeFormat
- Intl.NumberFormat Unified API
- Intl.Locale

С новым джаваскриптом! 😄

В блоге Chromium сегодня появился пост о том, какие проблемы совместимости будут исправлены в 2020 году — "Improving Chromium's browser compatibility in 2020".

В прошлом году MDN провёл опрос среди 28 тысяч разработчиков. Его цель заключалась в выявлении самых распространённых проблем, возникающих при работе с web-платформой. Больше всего голосов было отдано пунктам про поддержку старых браузеров, про устаревшую документацию и про совместимость между браузерами.

Команда Chromium выделила несколько направлений работы для исправлений проблем совместимости. Будет переработана имплементация flexbox, она будет перенесена на новый layout-движок LayoutNG. Это позволит добавить поддержку gap, row-gap, column-gap и исправить проблему с flex и fieldset. Также на новый движок будет перенесены гриды, над этим уже работает команда Edge. В ходе переноса планируют добавить поддержку subgrid. Будут работать над исправлением проблем поведения прокрутки контента. Будут изучать вопрос стилизации стандартных элементов управления форм и исправлять их проблемы совместимости, но пока без конкретных анонсов.

#chromium #announcement

https://blog.chromium.org/2020/06/improving-chromiums-browser.html

Матиас Бус написал статью про исправление проблем производительности в Node.js web-фреймворке Hapi — "Hapi: A Performance deep-dive".

Матиас рассказывает про полный цикл поиска и устранения проблем производительности. В самом начале он подготавливает бенчмарк с помощью библиотеки autocannon. Затем были найдены куски кода, которые инициировали вызовы кода нативных библиотек. На горячих участках кода интероп между JavaScript и нативным кодом вызывает падение производительности. Для решения этой проблемы функции, приводящие к вызову нативного кода, были обернуты в геттеры. Была изменена логика инициализации плагинов, чтобы не выполнялась лишняя работа на каждый запрос к серверу. С помощью инструмента Clinic.js была обнаружена проблема с async-функциями. На данный момент V8 не очень хорошо оптимизирует код с async/await, поэтому не рекомендуется использовать async-функции на горячих участках кода. После внесения всех исправлений производительность Hapi улучшилась на 30%.

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

#nodejs #performance

https://www.nearform.com/blog/hapi-a-performance-deep-dive/

Кроме npm и yarn существует ещё другой малоизвестный пакетный менеджер — pnpm. Эндрю Спрус написал статью "Why we switched from Yarn to pnpm", в которой рассказал, почему они для своего проекта выбрали именно pnpm.

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

После оценки возможных решений с помощью yarn 2, lerna и pnpm решили остановиться на последнем варианте. Он позволяет устанавливать пакеты рекурсивно и выполнять работу над подгруппой пакетов с помощью флага --filter.

Интересная статья. Кстати, там упоминается, что pnpm используют в Microsoft.

#package #js

https://www.takeshape.io/articles/why-we-switched-from-yarn-to-pnpm/

Глеб Бахмутов рассказал про визуальное тестирование с помощью Cypress — "Visual testing for React components using open source tools".

В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека cypress-react-unit-test. Для визуального тестирования (сравнения скриншотов компонентов) — cypress-image-snapshot.

В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.

Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.

#react #testing

https://glebbahmutov.com/blog/open-source-visual-testing-of-components/

Сандрина Перейра опубликовала статью про гибридный подход к кастомизации <select> — "Striking a Balance Between Native and Custom Select Elements".

В начале статьи есть небольшой экскурс в нейминг компонентов, реализующих поведение <select>: Menu, Navigation, Select. Последний используется для создания выпадающих списков, именно про него рассказывается в статье.

Для создания доступного и кастомизированного <select> Сандрина предлагает использовать два элемента: визуальный со всеми стилями и нативный, который доступен с клавиатуры и в скринридерах. Переключение между ними происходит с помощью медиа-выражения @media (hover: hover):

@media (hover: hover) {
  .selectCustom {
    display: block;
  }

  .selectNative:focus + .selectCustom {
    display: none;
  }
}

Этот подход был успешно протестирован в Chrome 81, Firefox 76, Safari 13 среди пользователей, использующих технологии доступности.

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

#css #a11y

https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/

Тим Кадлек разобрался в причинах странного поведения prefetch на Netlify и рассказал про свои находки в статье "Prefetching? At This Age?".

Тим подключил к своему сайту библиотеку Instant.Page. Она помогает подгружать страницы в фоновом режиме с помощью prefetch, отслеживая наведение курсора мыши на ссылки и тапы пользователя. Но при хостинге сайта на Netlify подгруженные страницы при переходе по ссылкам не бралась из кэша, а загружалась повторно.

Оказалось, что Netlify (и любые другие CDN) отправляет заголовок Age, когда его значение превышает max-age браузер начинает повторно загружать ресурс. В Chromium, правда, логика немного сложнее — ресурс, загруженный с помощью prefetch, хранится в кэше пять минут вне зависимости от заголовка Cache-Control, но по каким-то причинам этот период учитывал Age. Баг в Chromium уже поправили. В Firefox баг заведён, но пока ещё открыт.

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

#performance #cache

https://timkadlec.com/remembers/2020-06-17-prefetching-at-this-age/

Команда разработки компиляторов из Igalia представила полифилл для пропозала Temporal — "Dates and Times in JavaScript".

Для работы с датами в JavaScript используется объект Date. Он был сделан по образу и подобию Date из Java образца 1995 года. В 1997 году разработчики Java объявили этот API устаревшим. В JS его уже нельзя было поменять, потому что кардинальное изменение API сломало бы web. В результате сообщество создало много библиотек для более удобной работы с датами; Temporal может быть использован вместо них.

Основные особенности Temporal: удобный API для работы с датами и временем, иммутабельность, поддержка разных форматов представления дат, поддержка календарей, отличных от григорианского, полноценная возможность работы с часовыми поясами. В статье есть ссылки на подробное описание API и cookbook с примерами использования Temporal: подсчёт времени перелёта, планирование встречи с участниками в разных часовых поясах и т.п.

Команда Igalia призывает сообщество протестировать полифилл и поделиться критикой и мыслями, пока пропозал находится на Stage 2.

#proposal #polyfill #announcement

https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javanoscript/

Всегда ли WebP сжимает изображения лучше чем JPEG? Этим вопросом задался Йоханнес Сипола и написал статью "Is WebP really better than JPEG?"

Google в своих исследованиях про эффективность сжатия WebP говорил про уменьшение размеров изображений на 25-34% относительно JPEG. Йоханнес предполагает, что такая цифра получилась благодаря тому, что для создания JPEG-изображений использовался референсный кодировщик — cjpeg. В то время как существует более эффективный независимый кодировщик JPEG от Mozilla — MozJPEG. При сравнении разных наборов изображений из датасета от Kodak оказалось, что WebP уступает MozJPEG на больших изображениях. При этом во всех замерах с большим отрывом лидирует новый формат изображений — AVIF.

Выводы из статьи. Используйте WebP, когда сжимаются изображения меньше 500px, когда вы не можете использовать MozJPEG и когда вы можете использовать агрессивное сжатие с потерей качества.

#graphics #optimization #benchmark

https://siipo.la/blog/is-webp-really-better-than-jpeg

Мальте Юбэл из Google рассказал про историю возникновения и развития проекта Accelerated Mobile Pages — "Looking back at five years of AMP".

Проект появился в 2015 году как результат обсуждения с издателями проблем распространения контента. На тот момент большие сайты очень сильно уступали в скорости нативным приложениям. Google представил свое видение для решения этих проблем — проект AMP. Несмотря на очень хорошие показатели вовлечённости рядовых пользователей AMP столкнулся с критикой. При просмотре AMP-страниц url оригинального источника был недоступен, в top-stories выдачи google продвигался только AMP-контент. Для решения первой проблемы были привлечены разработчики браузеров, которые сделали так, чтобы при шаринге AMP-страниц копировался оригинальный URL. Позже была представлена возможность распространения AMP со сторонних доменов. Вторая проблема будет решена благодаря внедрению в поиск сигналов о скорости страниц. Обещают, что хорошо работающие страницы будут попадать в top-stories без проблем.

Интересная статья. В неё стоит заглянуть, если разрабатываете контент-проект или если интересуетесь историей web.

#history #google

https://blog.amp.dev/2020/06/19/looking-back/

Два дня назад вышла новая мажорная версия Angular. Стивен Флюин рассказал про новинки релиза — "Version 10 of Angular Now Available".

По сравнению с прошлой версией релиз получился довольно скромный. В Angular Material был добавлен элемент управления для выбора диапазона дат. При импорте CommonJS модулей фреймворк будет выводить предупреждение о потенциальных проблемах с размером бандла. Во время создания проекта с помощью ng new можно передать новый флаг --strict для включения строгих проверок в TypeScript-коде и шаблонах, отключения объявлений типа any, уменьшения порогового значения размера бандла на 75% и конфигурации приложения как side-effect free для продвинутого три-шейкинга.

Поддержка IE9, IE10 и IE Mobile объявлена устаревшей и будет удалена в следующей версии. Были обновлены зависимости: TypeScript обновлён до версии 3.9, TSLib до версии 2.0, TSLint до версии 6.

#angular #release #announcement

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

Микаэль Роджерс написал пост про организацию совместимости Node.js-модулей, использующих ESM, и require — "Native ESM in Node.js with require() fallbacks".

Последние версии Node.js поддерживают нативную модульную систему и позволяют импортировать CommonJS-модули внутри ESM-файлов. Но может возникнуть ситуация, когда нужно обеспечить импорт ESM-файлов в CommonJS. Node.js не поддерживает такое направление импорта. Для обхода этого ограничения можно использовать export maps в package.json. В нём каждому файлу сопоставляются соответствующие CommonJS- и ESM-версии:

"exports": {
  ".": {
    "import": "./index.js",
    "require": "./dist/index.cjs"
  },
  "./basics.js": {
    "import": "./basics.js",
    "require": "./dist/basics.cjs"
  },
  ...
}

Для автоматического создания cjs-файлов из esm-файлов Микаэль воспользовался Rollup и небольшим конфигом.

Статья будет полезна тем, кто хотел использовать в своих пакетах ESM, но не делал этого из-за отсутствия совместимости с CommonJS.

#nodejs #esm

https://dev.to/mikeal_2/native-esm-in-node-js-w-require-fallbacks-and-support-for-all-front-end-compilers-2ded

Амит Мерчант написал пост про новую экспериментальную фичу Chrome Dev Tools — CSS Overview.

CSS Overview — это новая вкладка в Dev Tools. На ней отображается сводная информация по текущей странице: количество элементов, статистика использования разных видов селекторов, список всех использованных на странице цветов, шрифтов и медиа-выражений (очень полезно при поиске проблемных элементов). Есть раздел со списком неактивных CSS-деклараций и объяснениями, почему свойства не работают. Включить фичу можно в настройках Chrome Dev Tools: "Experiments" -> "CSS Overview".

CSS Overview немного глючит, но пользоваться им вполне можно.

#tool #css #chrome

https://www.amitmerchant.com/experimental-css-overview-feature-chrome-awesome/

Сегодня зарелизился Firefox 78 ESR. Флориан Шольц и Гарольд Киршнер рассказали про все новинки — "New in Firefox 78: DevTools improvements, new regex engine, and abundant web platform updates".

Firefox 78 — это Extended Support Release (ESR). Обычно Firefox релизится каждые четыре недели, но каждый год выходит ESR-версия, которая поддерживается в течение года. C 78-ой версии будет прекращена поддержка OS X 10.11 и ниже, пользователи этих ОС будут переключены на обновления из ESR-канала.

Для упрощения написания длинных CSS-селекторов в Firefox 78 были добавлены псевдоклассы :is() и :where(). Также теперь можно стилизовать элементы форм с помощью псевдоклассов :read-only и :read-write. Был обновлён движок регулярных выражений, теперь он поддерживает все фичи регэкспов из ECMAScript 2018. Добавлена поддержка Intl.ListFormat и улучшено форматирование чисел в ECMAScript Intl API. Был добавлен удобный метод для замены потомков DOM-узла — ParentNode.replaceChildren.

В WebAssembly добавлена поддержка расширения multi-value, с помощью которой функции могут возвращать несколько значений. Добавлена поддержка импорта и экспорта 64-битных целых чисел в параметрах функций.

В инструментах разработчика logpoints поддерживают маппинг имён переменных из транспилированного кода на имена переменных из оригинального кода. Улучшена производительность DOM-инспектора. Переработано отображение ошибок для неперехваченных ошибок промисов. На вкладке "Network" теперь можно найти причины блокировки запросов.

#firefox #release #announcement

https://hacks.mozilla.org/2020/06/new-in-firefox-78/