Выложены записи с сентябрьской встречи #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 свою позицию не озвучили.

Если в коде остаются ссылки на окно (или вкладку или iframe) браузера, то после его закрытия возникает утечка памяти. Хотя окно фактически закрыто, браузер не может очистить память до тех пор, пока код ссылается на него. Деврелы Google написали статью том, как отследить такую проблему и о способах её решения.

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

В конце сентября W3C опубликовал новую версию дорожной карты веб приложений на мобильных устройствах (Roadmap of Web Applications on Mobile). Роадмап включает список спецификаций по группам, а также информацию о поддержке этих спецификаций браузерами.

Сам родмап: https://www.w3.org/2020/09/web-roadmaps/mobile/
Анонс: https://www.w3.org/blog/news/archives/8686

JavaScript будет наиболее производительным тогда, когда он наиболее предсказуем. А предсказуем он тогда, когда состояние инлайн кэша мономорфно, то есть структура объектов не изменяется с течением времени (в объекты не добавляются и из них не удаляются поля в течение жизненного цикла объекта). Новый инструмент Indicium — это системный анализатор, который позволяет отследить когда состояние инлайн кэша становится полиморфным (когда создаются несколько map’ов aka hidden class’ов для одного объекта).

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

Вышел npm v7.0.0. Эта версия будет включена по умолчанию в Node.js 15 (которая, к слову, выйдет уже через неделю). Новая версия теперь поддерживает воркспейсы, сильно увеличена скорость npm install, устанавливать пакеты теперь можно из GitHub PR, а также добавились ещё какие-то фичи, которые разработчики предлагают поискать в ченжлогах, начиная с первой беты 😡. Если Вы знаете что ещё там изменилось или добавилось, то пишите в комментарии.

https://blog.npmjs.org/post/631877012766785536/release-v700

Компания Mozilla запустила дерзкую компанию Unfck the Internet. Призывают бороться с политической рекламой установкой Firefox, посмотерть The Social Dilemma на Netflix, установить расширения Facebook Container (чтобы избавиться от фейсбуковой слежки в интернете) и Flag bad YouTube recommendations (чтобы отучить YouTube предлагать ненужное), а также использовать независимые технологии.

Анонс компании: https://blog.mozilla.org/blog/2020/09/30/the-internet-needs-our-love/
Страница компании: https://www.mozilla.org/en-US/firefox/unfck/
Видос: https://www.youtube.com/watch?v=jeu0oKBThMg

Mozilla, ты пьяна, иди домой.

Chrome Dev Summit 2020 пройдёт онлайн 9-10 декабря.
Запросить инвайт можно тут:
https://developer.chrome.com/devsummit/

17 ноября выйдет Chrome 87. В DevTools появятся полезные штуки:
- инструменты отладки CSS Grid
- новый таб для отладки WebAuthn
- расположение двух отдельных инструментов сверху и снизу
- обновления панели Elements
- Lighthouse 6.4
- добавлены события performance.mark() на временной шкале панели Performance
- новые фильтры в панели Network
- обновление деталей о фрейме во вкладке Application

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