Пару дней назад в канале @juliarderity увидел сообщение, что на последней встрече TC39 на stage 2 продвинулся метод item. Ти-Джей Краудер написал статью про это новое предложение — "The item Method for Indexables".

Пропозал добавляет новый метод для индексируемых типов (строки, массивы, типизированные массивы). С помощью него можно получить элемент по переданному индексу, но в отличие от [] в item можно передавать отрицательные индексы для получения элементов с конца (как в Python). Использование нового метода помогает сократить работу, которая требуется для доступа к последним элементам массива, возвращаемого из функции:

// эти две строки кода:
const result = theFunction();
const last = result[result.length - 1];

// можно заменить одной:
const last = theFunction().item(-1);

Выбор названия метода (item) связан с наличием этого метода в DOM-коллекциях NodeList и HTMLCollection. Это было важно учесть, так как на данный момент идёт работа над тем, чтобы сделать из этих коллекций полноценные массивы.

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

#js #proposal

https://thenewtoys.dev/blog/2020/07/25/the-item-method-for-indexables/
https://github.com/tc39-transfer/proposal-item-method

Гари Чу — devrel из Google — опубликовал статью про проблемы использования транспилированного кода в современных браузерах — "Bringing Modern JavaScript to Libraries".

На данный момент многие библиотеки из npm транспилируются в ES5. Это проблема, так как даже если проект не поддерживает legacy-браузеры, он должен "заплатить налог" в виде размера бандла. Этот налог для разных библиотек может быть как 7%, так и 40%.

В январе 2020 года в Node.js 13.7.0 появилась поддержка условных экспортов, с помощью которых можно указать разные сборки для разных типов окружений. Гари предлагает добавить новый тип окружения в условный экспорт для бандлов, которые транспилируются в ES2017 (один из возможных вариантов — browser2017 ). Предполагается, что бандлеры могут использовать это окружение для создания облегчённой версии бандла приложения. Также рассматривается вариант публикации кода без транспиляции, но в этом случае увеличится время сборки.

Очень полезное предложение. Думаю, что бандлеры адаптируют предлагаемый подход или как минимум придут к какому-нибудь другому альтернативному решению

#proposal #perfomance #npm

https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c

Себастиен Лорбер из Facebook написал статью про то, какие преимущества даёт пропозал Records & Tuples для React-приложений — "Records & Tuples for React".

Предложение Records & Tuples добавляет новые иммутабельные структуры данных в JS. Записи и кортежи особенно полезны для React, так как много проблем с производительностью и поведением библиотеки связано с устойчивостью ссылок на объекты (object identities). Некорректное использование литералов объектов в пропсах может привести не только к проблемам с производительностью, но и в некоторых случаях к бесконечным загрузкам данных.

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

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

#react #proposal #performance

https://sebastienlorber.com/records-and-tuples-for-react

Дэниэл Эренберг — участник TC39 — на конференции NodeTLV рассказал про предложение о добавлении в JavaScript нового типа для работы с десятичными числами — "BigDecimal: Avoid rounding errors on decimals in JavaScript".

Не все действительные числа в JavaScript могут быть представлены точно. Это связано с внутренним представлением чисел с плавающей запятой в соответствии со стандартом IEEE 754, который используется в большинстве языков (JavaScript, C, C++, Java и т.п.) Такое представление может приводить к проблемам с операциями над числами, которые должны быть быть представлены точно: деньги, расстояния, размеры и т.п.

В пропозале Decimal описывается новый тип для работы с десятичными числами. Такие числа будут задаваться с помощью суффикса m ( 0.1m + 0.2m === 0.3m ). На данный момент ещё не принято окончательное решение о внутреннем представлении таких чисел. Выбор стоит между BigDecimal и Decimal128.

Предложение находится на первом этапе добавления в стандарт, его поддержки пока нет ни в одном движке.

#js #proposal #talk

https://www.youtube.com/watch?v=G3Q4vWf8Peo

Майкл Бутнер и Кенджи Багу из команды разработки Google Chrome рассказали про новый пропозал, который поможет улучшить скорость загрузки сайтов за счёт префетчинга ресурсов с учётом приватности — "Continuing our journey to bring instant experiences to the whole web".

Прочитал статью несколько раз, чтобы полностью разобраться в этом пропозале. Имхо, его лучше всего объяснить на примере. Представьте, что вы Google и хотите, чтобы у пользователей браузера улучшилась скорость загрузки сайтов. Можно делать разные трюки, например, предсказывать, с какой вероятностью пользователь будет кликать по ссылкам, и в зависимости от этого заранее загружать ресурсы нужных сайтов. Проблема в том, что пользователь на самом деле не выразил своё желание перейти по этой ссылке, но его IP-адрес, куки и другая информация будет передана третьей стороне с отправленными запросами за ресурсами, что очень плохо для приватности.

Предложение описывает подход, с помощью которого можно обеспечить предзагрузку ресурсов, не раскрывая информацию о пользователе. Предполагается, что этот механизм будет работать с помощью HTTP-туннелей с внешним прокси (CONNECT proxy). То есть между браузером и сайтом будет находится прокси, который не позволит утечь пользовательским данным.

Ребята из Google провели успешный эксперимент в Chrome для Android, который показал, что использование префетча с помощью CONNECT proxy ускорило первоначальное отображение сайтов на 40%.

Команда разработчиков призывает всех желающих поучаствовать в обсуждении и разработке полноценной спецификации использования CONNECT proxy с префетчем.

#performance #proposal #chromium

https://blog.chromium.org/2020/12/continuing-our-journey-to-bring-instant.html

Apple вместе с W3C Privacy Community Group представили приватный механизм для отслеживания кликов, который в первую очередь предназначен для измерения эффективности рекламы — "Introducing Private Click Measurement, PCM".

Для отслеживания эффективности рекламы сейчас используют куки. С точки зрения приватности, это не очень хорошее решение, так как пользователи, кликнувшие по рекламе, могут быть затреканы. Apple вместе с W3C Privacy Community Group разрабатывают другой подход с отложенным отправлением данных о кликах.

Принцип работы PCM. При клике по ссылке со специальными атрибутами во внутреннем хранилище браузера на семь дней сохраняется информация о клике. Сайт, на котором был произведен переход, для регистрации клика должен сделать GET-запрос к рекламной платформе по URL https://social.example/.well-known/private-click-measurement/trigger-attribution/<data>/<priority> (ведётся работа над тем, чтобы можно было отказаться от GET-запросов). Браузер при обращении к такому URL сравнивает данные из URL с сохранёнными данными клика в хранилище и, если они совпадают, через 24-48 часов отправляет анонимный отчет о клике рекламной платформе. Также есть возможность отслеживать переходы по рекламным баннерам из нативных приложений.

Экспериментальная поддержка PCM уже есть в бете iOS и iPadOS 14.5.

#apple #proposal #privacy

https://webkit.org/blog/11529/introducing-private-click-measurement-pcm/

Хемант — делегат TC39 — опубликовал статью, посвящённую "Error Cause" — предложению о добавлении в стандарт ECMAScript.

При работе с исключениями полезно сохранять оригинальную ошибку, чтобы она не потерялась в цепочках обработчиков ошибок. Для решения этой задачи разработчики могут добавить в текст с ошибкой оригинальный err.message, обернуть ошибку в новый объект ошибки и добавить её как свойство этого нового объекта или создать новый класс ошибки, в котором возникшая ошибка также будет добавляться как новое свойство и т.п.

Для того чтобы причину оригинальной ошибки можно было найти в предсказуемом месте, например это важно при разработке DevTools, в пропозале "Error Cause" предлагается передавать оригинальную ошибку с помощью объекта со свойством cause вторыми параметром в конструктор объекта Error:

throw new Error('There was a problem', {
    cause: err
});

На данный момент пропозал "Error cause" находится на третьем этапе добавления в стандарт. Его поддержка уже есть в JS-движках Chakra и JavaScriptCore.

#js #proposal

https://dev.to/hemanth/error-cause-in-javascript-425d

Бен Фрейн рассказал о новом черновике спецификации вложенности в CSS — "CSS Nesting – the last piece of the puzzle".

Недавно Адам Аргайл представил сообществу черновик спецификации, над которым он работает вместе с Табом Аткинсом. В этой спецификации описывается синтаксис вложенности, который похож на аналогичный синтаксис из SASS и LESS. Основное отличие — нужно использовать @nest при размещения вкладываемого селектора в качестве потомка:

.selector {
    width: 100%;
    @nest .other-selector & {
        color: #333;
    }
}

На данный момент черновик ещё не стабилизировался, и синтаксис описания вложенности скорее всего поменяется, также он пока не поддерживается ни в одном браузере. Бен пишет, что через пару лет все браузеры будут поддерживать вложенность в CSS, и для многих проектов препроцессоры перестанут быть актуальны.

#css #proposal

https://benfrain.com/official-css-nesting-the-last-piece-of-the-puzzle/

На сайте V8 была добавлена страница, посвящённая статическим блокам инициализации класса — "Class static initializer blocks".

Статические блоки инициализации класса — это пропозал ECMAScript, который находится на третьем этапе добавления в стандарт. Он расширяет синтаксис класса, добавляя механизм для локализации кода, который должен быть выполнен только один раз во время инициализации кода:

class C {
  static x = ...;
  static y;
  static z;
  static {
    const obj = doSomethingWith(this.x);
    this.y = obj.y;
    this.z = obj.z;
  }
}

Поддержка сlass static initializer blocks появится в Chrome 91. Также посмотреть на эту фичу в действии можно уже сегодня в Chrome Canary.

#js #proposal

https://v8.dev/features/class-static-initializer-blocks

Сегодня Стэфан Джудис твитнул про то, что в Chrome 91 появилась поддержка JSON-модулей. Это новая фича JavaScript, с помощью которой можно использовать import с JSON-файлами. Твит Стэфана дополнил Аксель Раушмайер ссылкой на статью про Import Assertions.

Синтаксис для импорта JSON немного отличается от стандартного импорта:

// статический импорт
import config from './data/config.json' assert { type: 'json' };

// динамический импорт
import('./data/config.json', { assert: { type: 'json' } })

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

Import Assertions находится в статусе пропозала на stage 3. Он открывает дорогу для импорта не только JSON, но и WebAssembly-модулей и CSS-файлов.

#js #proposal #chrome

https://2ality.com/2021/01/import-assertions.html

Группировка элементов массива с помощью 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/

Пропозал "await.ops"

Недавно узнал про пропозал "await.ops" — расширение await операторами await.all, await.any, await.race и await.allSettled. Они работают точно также как одноимённые методы у Promise.

Благодаря новым операторам код получается немного короче, так как отпадает необходимость в написании Promise:

// до
await Promise.all(users.map(async x => fetchProfile(x.id)))

// после
await.all users.map(async x => fetchProfile(x.id))

На данный момент "await.ops" находится на Stage 1, и его поддержки в браузерах нет. Авторы ищут дополнительные сценарии использования предложения для его продвижения на Stage 2.

#js #proposal

https://github.com/tc39/proposal-await.ops

Оператор конвейера в JavaScript (pipeline operator)

Аксель Раушмайер написал статью об операторе конвейера (pipeline operator, pipe operator) — новом операторе, над которым идёт работа в TC39 — "A pipe operator for JavaScript: introduction and use cases".

Есть два конкурирующих пропозала с реализацией оператора конвейера: конвейер в F#-стиле и Hack-стиле. Оба пропозала вводят в язык оператор |>, благодаря которому упрощается композиция функций:

// стандартная композиция
const y = h(g(f(x)));
// композиция с пайпом в Hack-стиле
const y = x |> f(%) |> g(%) |> h(%);
// композиция с пайпом в F#-стиле
const y = x |> f |> g |> h;

Несмотря на то что пропозал c конвейером в F#-стиле выглядит чище, у него больше недостатков по сравнению с конвейером в Hack-стиле: нужно использовать каррирование, усложняется добавление поддержки yield и await, больше накладных расходов на память. По этим причинам работа над F#-версией конвейера была остановлена.

На данный момент пропозал о добавлении конвейера в Hack-стиле находится на Stage 2, и его поддержки нет ни в одном браузере.

#js #tc39 #proposal

https://2ality.com/2022/01/pipe-operator.html