Из новостей фронтенд библиотек с прошлой недели:

Команда React выпустила новый JSX Transform, который позволит использовать JSX без импорта React в модуль, немного уменьшит размер бандла, а также создаст основу для дальнейших нововведений

Вышли Early Preview Release библиотек LitElement 3.0 и lit-html 2.0. Там много изменений, в том числе breaking, но большинство из них не должны задеть большинство пользователей. Из интересного стоит отметить поддержку серверного рендеринга в новом lit-html.

https://dev.to/alabulei1/high-performance-and-safe-ai-as-a-service-in-node-js-43lg

Занимательная статья о том, как написать своё веб-приложение для распознования лиц на Node.js и Rust (через #WebAssembly). Для этого используется вируальная машина Second State VM и прилагающийся к ней compiler toolchain, который делает биндинги из JS в Rust через wasm-bindgen.

Вышел Node.js 14.3.0 с поддержкой именованных импортов ESM для CJS модулей и libuv 1.40.0.

https://nodejs.org/en/blog/release/v14.13.0/

NPAPI — старый (создан в 1995 году) API от Netscape для расширения функциональности браузеров. Именно NPAPI помогал запускать Flash, Silverlight, Java апплеты, отображать PDF и DJVu документы. Все эти расширения были практически неконтролируемы, что приводило к проблемам с безопасностью и стабильностью. Последним, что до сих пор останавливает вендоров браузеров перед тем, чтобы отказаться от NPAPI совсем, является Flash. Adobe ещё в 2017 году объявил, что поддержка Flash прекратится в январе 2021. Firefox собирается прекратить поддержку NPAPI именно в эту дату. Chrome прекратил поддержку ещё в сентябре 2015, но вместе с тем стал поддерживать Flash через собственную технологию PPAPI. Эта поддержка закончится также в январе 2021. Поддержка NPAPI в WebKit (и Safari) уже удалена из кодовой базы и будет прекращена в конце 2020.

Подробнее обо всём этом в статье Adrian Perez из Igalia, который занимаетя WebKitGTK и WPE.
https://perezdecastro.org/2020/webkitgtk-npapi-sunsetting.html

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

Представлен рантайм Elsa — конкурент Deno и Node.js на движке QuickJS. Elsa написана на Go и имеет фичи, аналогичные рантайму Deno.

Выложены записи с сентябрьской встречи #TC39. Напомню, что основные результаты этой встречи я собрал вот тут.

43 разных способа создать веб компонент <my-counter/> со сравнением кода, результирующим размером бандла и показателями скорости парсинга JS и создания DOM дерева.

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

В кодовую базу WebKit добавлена поддержка Streams API для TextDecoder API. Такая поддержка позволит комбинировать Encoding API со стримами Fetch API и других, а также реализовать backpressure.

Описание: https://github.com/ricea/encoding-streams/blob/master/stream-explainer.md
Патч в трекере WebKit: https://trac.webkit.org/changeset/266668/webkit

В данный момент поддержка стримов в Encoding API также реализована в браузерах на основе Chromium (с версии 71). Поддержка в браузерах на основе Gecko (таких как Firefox) ещё не реализована.

Хотел написать о релизе webpack 5, но вспомнил, что в @defront уже всё отлично написано за меня.

Вчера зарелизился Webpack 5 с огромным количеством изменений.

TLDR

В новой версии была улучшена скорость сборки. Была улучшена поддержка долгосрочного кэширования бандлов. Улучшен tree shaking. Реализован новый подход для работы с ассетами. Добавлена новая фича Module Federation. Удалены полифиллы для Node.js-модулей. Код сборки может генерироваться в стандарте ES2015.

Подробнее

Улучшена скорость сборки благодаря кэшированию на диске служебных данных между разными сборками (Persistent Caching).

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

Было упрощено использование ассетов. Теперь не нужно устанавливать дополнительные загрузчики, например, file-loader, url-loader, raw-loader. Сергей Мелюков в феврале публиковал статью про ассеты в Webpack 5, рекомендую почитать.

С пятой версии стала доступна ещё одна новая фича — Module Federation. Благодаря ей приложение может прозрачно заимствовать код из других приложений. Это позволяет делать интересные вещи, например, разделить одно большое SPA на несколько небольших. Это SPA с точки зрения пользователя будет работать как одно целое, но может разрабатываться и деплоиться разными командами независимо друг от друга.

Улучшена совместимость с Web-платформой: добавлена поддержка Top Level Await, JSON Modules, WASM Modules, import.meta.

Четвёртая версия Webpack могла генерировать код сборки только в стандарте в ES5. С пятой версии код сборки может генерироваться в стандарте ES2015.

Были удалены полифиллы для Node.js ( node.Buffer, node.console, node.process, crypto и т.п.) Когда появился Webpack, npm чаще всего использовали для распространения Node.js-модулей, поэтому в то время имело смысл поставлять со сборщиком полифиллы. Сейчас ситуация изменилась — в npm есть много кода, который можно использовать и в Node.js, и в браузерах. Также очень много внимания сегодня уделяют размеру генерируемого кода, а полифиллы Node.js могут добавлять очень много кода. Но не все рады удалению полифиллов. Синдре Сорхусу — автору многих библиотек в экосистеме Node.js — это решение не понравилось. Он пишет про то, что не будет исправлять проблемы, связанные с Webpack 5.

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

#webpack #release #bundle

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

В блоге V8 очередная классная статья о сборщике мусора V8 и оптимизации Slack tracking, позволяющей выделить дополнительную память для изменения структуры объектов (до семи раз) прежде чем будет применена оптимизация с использованием hidden classes.

Mozilla закрывает сайт, на котором ранее публиковались все изменения совместимости.

https://www.fxsitecompat.dev/en-CA/blog/2020/sunsetting-fxsitecompat/

П.С. также продолжаются увольнения сотрудников Mozilla. Так, например, недавно были уволены Paul Rouget, работавший над веб платформой и Servo, и Benjamin Bouvier из команды wasm / Cranelift.

Не так давно вышел Chrome 86. Из нового:
- File System Access API вышел из origin trial и теперь доступен по умолчанию. Этот API разрабатывается в рамках Web Platform Incubator Community Group, не является стандартом W3C и разработан исключительно инженерами Google.
- добавлен новый origin trial WebHID для подключения различных устройств вроде геймпадов, джойстиков, LED и т.д.
- добавлен origin trial Multi-Screen Window Placement API для программируемого расположения окон при использовании нескольких мониторов
- новый CSS селектор :focus-visible, псевдо-элемент ::marker

А также:
- защита от отправки данных форм по HTTP при HTTPS соединении
- поддержка FTP отключена по умолчанию
- мета-тег battary-savings
- и много всего другого (см ссылки ниже)

Наиболее полный список изменений: https://support.google.com/chrome/a/answer/7679408#86
Ещё один список изменений: https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html
Видео: https://www.youtube.com/watch?v=GNuG-5m4Ud0

Также вышел Safari Technology Preview 114 с большим количеством изменений:
- улучшения табов Elements, Sources, Network, Timelines, Audit в веб инспекторе
- различные исправления парсера JS, мелкие изменения для полного соответствия спецификации в корнер кейсах, много улучшений Intl API
- улучшения полей ввода типов date и time
- очень много исправлений и улучшений Web Audio
- WebGL 2 теперь включен по умолчанию, поддержка WebGL 2 в Offscreeen Canvas
- исправления и улучшения CSS
- ленивая загрузка айфреймов и изображений
- исправления и улучшения Media и MediaRecorder
- улучшения WebRTC
- исправления рендеринга анимаций и шрифтов, исправления прокрутки
- исправления некоторых других Web API

На прошлой неделе я был в гостях у подкаста Фронтенд Юность. Поговорили о #TC39, JavaScript и о пиве. Кажется немного прогнал там местами (ещё сам не слушал), но в целом, надеюсь, должно быть интересно.

https://twitter.com/frontend_u/status/1315392088243154945

Только что закончилась встреча #WebAssembly Community Group. Из главного:
- у пропозала Relaxed Dead Code Validation, который попал на phase 1 на прошлой встрече, начальное описание, автор представил доклад и собирается представлять его к продвижениею на phase 2 на следующей встрече 27го октября.
- был предложен способ определения поддержки фич в SIMD (слайды)

Бонус: доклад о том, как можно автоматически разбить C++ код на модули для уменьшения времени старта #WebAssembly приложения для веба.

http://soil-initiative.org/seminar/#20201012

И ещё немного про #WebAssembly от Cloudflare. Интересные статьи:
- Exploring WebAssembly AI Services on Cloudflare Workers
- Let's build a Cloudflare Worker with WebAssembly and Haskell

Declarative Shadow DOM — способ задать Shadow DOM прямо в HTML, что должно решить проблему веб компонент с серверным рендерингом. Протестировать эту фичу можно в Chrome 85, включив флаг Experimental Web Platform Features. Поддержка по умолчанию будет включена в Chrome 88, который выйдет в начале 2021 года.

Статья: https://web.dev/declarative-shadow-dom/
Explainer: https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md

Некоторые сотрудники Mozilla выражают свою обеспокоенность тем, как Google пушит эту фичу.

Разработчики WebKit свою позицию не озвучили.