Defront — про фронтенд-разработку и не только

Эдди Османи и Дэмиан Рензулли рассказали о тех случаях, когда нужно отключать предварительную подгрузку и пререндер — "What (not) to Prefetch/Prerender".

Предварительную подгрузку и пререндер не следует использовать:
— для страниц аутентификации, чтобы предотвратить разлогины, непредсказуемый сброс пароля и т.п.;
— в ситуациях когда слишком большое количество запросов может вызвать DOS;
— для страниц оформления заказа и корзины, чтобы избежать случайного добавления товаров в корзину или запуска процесса оформления заказа;
— для файлов большого размера: mp4, zip, gif, pdf. Загрузка объёмных ресурсов без ведома пользователя — это плохая практика;
— для рекламы, так как такие запросы могут привести к ложному всплеску маркетинговых показателей;
— для всех протоколов кроме http/https (tel:, mailto:, javascript: и т.п.), в зависимости от браузера, предварительная загрузка такой ссылки может непредсказуемо стригерить действие.

Рекомендую почитать статью, если используете prefetch/prerender на своём сайте.

#performance

https://addyosmani.com/blog/what-not-to-prefetch-prerender/

Вчера в рассылке Web Platform News пришёл апдейт про поддержку новых псевдоклассов — "CSS :is() and :where() are coming to browsers".

Псевдоклассы :is() и :where предназначены для написания CSS-правил без дублирования селекторов. Они отличаются между собой только специфичностью. Специфичность :is() определяется наиболее специфичным селектором, переданным в аргументах. У :where() специфичность всегда нулевая. :where() полезен для создания дефолтных правил, которые могут перекрываться другими правилами без увеличения специфичности селекторов и без использования !important.

Пример использования :is():

/* До */
.embed .button:hover,
.attachment .button:hover {
  opacity: 1;
}

/* После */
:is(.embed, .attachment) .button:hover {
  opacity: 1;
}

Поддержка новых псевдоклассов уже есть в Safari Tech Preview 106 и Firefox Beta 78. В Chrome их реализация пока находится за флагом. Для ускорения внедрения можно поставить звезду соответствующим тикетам в баг-трекере Chromium (ссылки можно найти в оригинальном посте).

#css

https://webplatform.news/issues/2020-06-04

Карлес Ньюнез столкнулся с проблемой при использовании нативной ленивой загрузки изображений, разобрался с ней и написал статью "Deep dive into lazy loading images".

Нативная ленивая загрузка изображений, которую можно активировать с помощью атрибута loading="lazy", появилась в Chrome 76 и Firefox 75. Браузеры начинают загружать изображения по-разному. В Chrome минимальное расстояние до изображения, при котором начинается его загрузка, составляет 3000 пикселей. Автору статьи это не подходило, и он для ленивой загрузки остановился на библиотеке lazysizes.

В отличие от других подобных библиотек lazysizes дружит с SEO. Google при обходе страниц не использует прокрутку. Библиотека проверяет, может ли user agent использовать прокрутку, и если нет, то сразу загружает все изображения.

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

#performance #lazy

https://dev.to/carlesnunez/deep-dive-into-lazy-loading-images-211f

Эверт Пот написал статью про синтаксис ECMAScript 4 — "ECMAScript 4: The missing version".

ECMAScript 4 бы очень большим проектом по модернизации JavaScript. Работа над этой спецификацией шла 9 лет (1999-2008), но была полностью переосмыслена, переродившись в ES5 и ES2015.

В ECMAScript 4 хотели добавить стогую систему типов с поддержкой классов (в итоге они появились в ES2015) и интерфейсов. Было запланировано добавление новых типов: byte, int, unit, double, decimal. Практически ни один из этих типов не попал в последующие версии языка, но на данный момент ведётся работа над пропозалом для добавления в JS типа decimal. Планировали добавить пакеты (packages) для организации кода. Но вместо пакетов в ES2015 решили добавить модульную систему. Существовало расширение ES4 — E4X, которое позволяло работать с XML прямо в JavaScript. Можно сказать, что E4X стал прародителем современного JSX.

Интересная статья. Рекомендую почитать, если интересуетесь историей JavaScript.

#js #history #specification

https://evertpot.com/ecmascript-4-the-missing-version/

Сегодня вышел Firefox 77. Флориан Шольц и Гарольд Киршнер рассказали про все новинки релиза — "New in Firefox 77: DevTool improvements and web platform updates".

Продолжается раскатка WebRender — нового движка рендеринга, написанного на Rust и использующего GPU для отрисовки элементов страницы. Была улучшена служебная страница управления сертификатами — about:certificate. Пользователям UK стали доступны рекомендации лучших статей при открытии нового таба.

Был добавлен новый метод из будущего стандарта ES2021 для поиска и замены подстроки String.prototype.replaceAll(). У объектов IDBCursor было добавлено новое поле request для более удобной работы с врапперами. В SVG была добавлена поддержка атрибута transform-origin. Он используется для задания точки, относительно которой применяются трансформации.

Есть улучшения и исправления ошибок в инструментах разработчика. Была ускорена работа отладчика и исправлены многие проблемы с source maps. Теперь во время отладки можно выбрать фрейм и сразу же продолжить отладку внутри него без необходимости прокликивания "step out". Был добавлен интерфейс для установки брекпойнтов на чтение свойства объекта или его запись.

#firefox #release

https://hacks.mozilla.org/2020/06/new-in-firefox-77-devtool-improvements-and-web-platform-updates/

Прочитал пост Пауло Кальвано про эвристическое кеширование в браузерах — "HTTP Heuristic Caching (Missing Cache-Control and Expires Headers) Explained".

Для установки времени жизни контента в кэше браузера веб-серверы отправляют http-заголовки Cache-Control и Expires. Если установлены оба заголовка то приоритет получает Cache-Control. Есть ошибочное мнение, что если не отдавать эти заголовки, то браузеры не будут кэшировать контент, но на самом деле браузеры всё равно будут его сохранять. Время жизни обычно составляет 10% от промежутка времени между датой последнего изменения файла Last-Modified и текущей датой. Этот нюанс может принести много проблем, поэтому не рекомендуется удалять заголовки Cache-Conrol и Expires. Для отключения кэширования лучше всего использовать Cache-Control: no-store или Cache-Control: max-age=0.

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

#http #cache

https://paulcalvano.com/index.php/2018/03/14/http-heuristic-caching-missing-cache-control-and-expires-headers-explained/

Я Серёжа Рубанов, приглашённый эксперт #TC39 (комитета, занимающегося разработкой ECMAScript) и основатель канала @juliarderity.

Сегодня начигается 76я встреча TC39, которая станет второй полностью удалённой. В этот раз встреча будет длиться 4 дня по 5 часов вместо 2 дней по 7 часов и заключительного 6-часового.
Повестка очень интересная! Я уже писал обо всех пропозалах, которые готовятся к продвижению на следующий стейдж. С этой публикацией можно ознакомиться вот тут.
Как всегда буду рассказывать всё самое интересное в этом канале. Если что-то невероятно интересное или важное то сразу же лайвом, а также буду публиковать результаты каждого дня ближе к ночи.
Время проведения встреч — 15:00 - 20:00 UTC, для большинства читателей это будет 18:00 - 23:00 (по Москве, Киеву, Минску).

Мне будет приятно если Вы поделитесь этой записью в своих каналах или в сообществах, участникам которых это может быть интересно. Ещё можно поддержать на Patreon.

Increment — журнал про разработку — в этом месяце был полностью посвящён фронтенду. Там много постов от разработчиков из мира фронтенда. Среди них есть статья Эвана Ю "The process: Making Vue 3", где он рассказывает про разработку Vue 3 и особенности его работы.

К 2018 году в кодовой базе Vue 2 накопился технический долг и прояснились архитектурные проблемы. К этому моменту все браузеры стали поддерживать Proxy, благодаря чему можно было сделать новую систему реактивности с исправлением проблем старой. Также вторая версия не очень хорошо дружила со статической типизацией. Все эти факторы послужили причиной полного переписывания фреймворка и перехода на новую мажорную версию.

Из статьи узнал, что первые прототипы были написаны с использованием Flow, но команде приходилось поддерживать тайпинги для TS, которые были востребованы гораздо больше чем Flow-тайпинги. В итоге от Flow отказались в пользу TypeScript. Ещё в статье есть интересные технические детали работы Vue 3. В новой версии компилятор шаблонов был полностью переписан. В его основу лёг пайплайн на базе AST-трансформаций, который позволил компоновать оптимизации времени компиляции в виде плагинов трансформаций. Статический анализ шаблонов и новая архитектура позволили ускорить работу с Virtual DOM до 10 раз в бенчмарках рендеринга.

Очень хорошая статья. Советую почитать всем, даже тем, кто не работает с Vue.

#vue #internals #history #jsframeworks

https://increment.com/frontend/making-vue-3/

Аксель Раушмайер опубликовал статью про новый пропозал — "A first look at records and tuples in JavaScript".

Records и Tuples (записи и кортежи) — это новые иммутабельные и сравниваемые по значению примитивные типы данных. Record — это аналог объекта, tuple — массива. Для их создания используются похожие на массив и объект литералы с префиксом "#": #[1, 2], #{a: 1}.

Благодаря иммутабельности записи и кортежи можно безопасно использовать по всей программе без необходимости в клонировании (как в случае с обычными массивами и объектами). Также их можно использовать в тех ситуациях, где не имеет особого смысла использовать обычные литералы массивов и объектов, например, при сравнении в условиях #[1, 2, 3] === #[1, 2, 3] и в качестве ключа Set и Map.

На данный момент пропозал находится на первой стадии добавления в стандарт. Есть полифилл (использует экспериментальные WeakRef и FinalizationRegistry ).

#js #proposal

https://2ality.com/2020/05/records-tuples-first-look.html
https://habr.com/ru/post/504092/ (перевод на русский язык)

Руководители Trello, Vimeo, Canva и Tinder дали интервью изданию Icrement про фронтенд в своих компаниях — "Frontend at scale".

Фронтенд-команды всех компаний используют похожий стек: React и TypeScript (Tinder не учитываю, так как её представитель в интервью рассказывал только про iOS). Все компании в своих процессах разработки объединяют дизайнеров и разработчиков. В Canva пошли немного дальше — у них некоторые дизайнеры параллельно занимаются разработкой.

Были очень разные ответы на вопрос про ключевые инструменты, которые используются разработчиками. Представитель от Trello рассказал про prettier и eslint, от Vimeo — немного про внутренний инструмент для пререндеринга React-приложений, от Canva — про Storybook и его интеграцию в пулл-реквесты.

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

#interview

https://increment.com/frontend/frontend-at-scale/

Google объявил о том, что показатели Web Vitals будут влиять на ранжирование сайтов в поиске — "Evaluating page experience for a better web".

Google учитывает сотни сигналов, которые влияют на ранжирование, например, адаптированность страниц под мобильные устройства, поддержку https, удобный доступ к контенту и т.п. К этим сигналам будет добавлен Web Vitals. То есть среди сайтов с примерно одинаковым контентом и сигналами предпочтение будет отдаваться тем, которые работают быстрее. Также будет изменён алгоритм попадания контента новостных сайтов в "Top Stories" — теперь необязательно, чтобы сайт предоставлял AMP-версию страниц, достаточно, чтобы он работал быстро.

Алгоритм ранжирования будет обновлён не ранее 2021 года. За шесть месяцев до обновления будет ещё один анонс. У владельцев сайтов есть много времени, чтобы улучшить показатели Web Vitals.

#seo #performance #google

https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

Вышел Babel 7.10.0. Среди нововведений:
- поддержка пропозала Ergonomic brand checks for Private Field (stage 1)
- совместимая с ES2015 поддержка экранирования символов
- улучшения поддержки optional chaining (ES2020)
- поддержка module attributes (stage 1) парсером
- улучшенный три-шейкинг для React
- парсинг import.meta (ES2020) включен по умолчанию
- поля классов (stage 3) добавлены в shippedProposals, так как начинают появляться в браузерах
- новая архитектура для поллифилов. Теперь как альтернативу core-js можно использовать набор полифиллов из es-shims

Пол Батлер — экс-гуглер — написал эссе про будущее web-приложений — "The WebAssembly App Gap".

В 2005 году с появлением AJAX в web'е произошла первая революция, которая принесла в браузеры офисные приложения — текстовые редакторы, календари, почтовые клиенты и т.п. Пол в статье пишет про то, что мы находимся на пороге второй революции, в основе которой лежат WebAssembly и современные браузерные API.

Есть первые ласточки этой революции, например, Figma. Она завоевала рынок благодаря слиянию двух факторов: производительности нативного кода и возможностей web'а для совместной работы. Раньше пользователям хватало обычного графического редактора, сейчас web-альтернатива выглядит достойной заменой, так как сложно игнорировать её преимущества. То же самое может произойти и с другими категориями программного обеспечения.

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

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

#musings #webassembly

https://paulbutler.org/2020/the-webassembly-app-gap/

Иван Акулов проанализировал js-бандлы и флоу загрузки web-приложения Notion и дал много советов по улучшению его производительности — "Case study: Analyzing Notion app performance".

Приложение загружается долго, это особенно заметно на смартфонах среднего ценового сегмента — время загрузки достигает 12 секунд. Больше всего времени уходит на парсинг и выполнение JS. В решении этой проблемы может помочь код-сплиттинг и удаление ненужного кода. Notion использует lodash, чтобы удалить из его кода неиспользуемые методы юзают babel-plugin-lodash. Notion для работы с датами использует moment, вместо этой библиотеки лучше использовать современные и оптимизированные альтернативы, например, date-fns. Также в бандле приложения было найдено три разных версии core.js — библиотеки полифиллов. Такое происходит, когда приложение и зависимости используют core.js разных версий. Для решения этой проблемы можно настроить маппинг модулей с помощью resolve.alias в конфиге wepback. В статье есть рекомендация транспилировать модули в CommonJS с помощью babel-плагина plugin-transform-modules-commonjs с опцией lazy. Такая оптимизация позволяет отложить выполнение js-кода, который можно не выполнять на этапе инициализации приложения.

Очень большая и хорошая статья. Обязательно почитайте, если разрабатываете SPA.

#performance #bundle

https://3perf.com/blog/notion/

Томас Штейнер из Google опубликовал пост про новое API — "The requestVideoFrameCallback API".

Метод requestVideoFrameCallback() находится у элемента <video>. Он позволяет регистрировать колбэк, который будет выполняться при отправке каждого кадра видеопотока в композитор, то есть на этапе рендеринга изображения. Эта фича предназначена для эффективной обработки видео в браузере, для синхронизации с внешними звуковыми источниками, для видео-анализа и "зеркалирования" видео в canvas. Частота, с которой вызывается колбэк, минимальное значение от частоты экрана и частоты кадров видео.

На данный момент поддержка requestVideoFrameCallback API есть только в Chromium, разработчики Firefox тоже заинтересованы в реализации этой фичи. Если всё взлетит, то вполне возможно, что через пару лет в браузере будет работать Adobe Premiere.

#video #api

https://blog.tomayac.com/2020/05/15/the-requestvideoframecallback-api/

Пару недель назад инженеры из facebook опубликовали статью про редизайн главного сайта социальной сети — "Rebuilding our tech stack for the new Facebook".

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

Для работы с CSS используют своё CSS-in-JS решение, которое на стадии сборки приложения извлекает стили из кода компонентов в CSS-файлы. При извлечении стилей используется подход Atomic CSS, в котором одно правило представляется отдельным классом. Благодаря Atomic CSS удалось уменьшить общий объём стилей на 80% по сравнению со старой версией facebook. Кроме извлечения стилей CIJ-библиотека упрощает работу с относительными размерами шрифтов для улучшения a11y. Разработчики могут использовать в коде компонентов размеры в пикселях, на этапе сборки они автоматически преобразуются в rem'ы.

Статья хорошая с большим количеством технических деталей. В первую очередь рекомендую почитать тем, кто не смотрел оригинальные доклады.

#facebook #cssinjs

https://engineering.fb.com/web/facebook-redesign/

В блоге Chromium была опубликована статья про исследования, которыми подкреплялись пороговые значения недавно анонсированных Web Vitals — "The Science Behind Web Vitals ".

Web Vitals состоит из трёх метрик — Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и First Input Delay (FID). Пороговые значения для них были выбраны с учётом поведения реальных пользователей. Например, одно из исследований говорит о том, что пользователи мобильных устройств обычно сохраняют внимание около 4-8 секунд. Если за это время страница не загрузилась, это означает, что для них общее время загрузки будет состоять из актуального времени загрузки плюс количество времени, в течении которого они не смотрели на устройство, после того как страница была загружена. Ещё одно исследование говорит о том, что пользователи замечают проблемы с отзывчивостью интерфейса, если время задержки до визуального фидбека находится в районе 150 миллисекунд.

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

#performance #metrics

https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html

Флориан Раппл рассказал про текущее состояние микрофронтендов — "The State of Micro Frontends".

Микрофронтенды — это подход к организации приложения, когда команды в рамках одного продукта могут делать фичи, используя разные технологии, и релизить их независимо друг от друга. Микрофронтенды могут быть реализованы по-разному, поэтому существуют разные фреймворки для построения микрофронтендов, покрывающие специфические требования: qiankun, piral, mosaic, micromono и т.п.

Микрофронтенд — это не серебряная пуля, которая может решить все известные проблемы. Но в определённых случаях он может быть полезен. Такой подход для своих продуктов используют IKEA, Microsoft, SAP, Spotify и другие компании.

#architecture

https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a

Роберто Витилло опубликовал в своём блоге статью про TCP — "What every developer should know about TCP".

Есть распространённое ошибочное предположение, что при отправке данных с помощью TCP пропускная способность канала связи не зависит от времени задержки. В статье объясняется, почему это не так.

При установке соединения сетевой стек операционной системы ищет наиболее подходящее количество пакетов (congestion window), которое можно отправить за один round-trip и которое не зафлудит канал получателя. Время доставки такой порции данных определяется с помощью round-trip time (RTT). Теоретическая максимальная пропускная способность зависит от этих двух показателей: Bandwidth = WinSize / RTT. Именно по этой причине сервера стараются размещать ближе к своим пользователям.

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

#performance #net

https://robertovitillo.com/what-every-developer-should-know-about-tcp/

Вчера вышла новая версия Chrome. Пит Лепаж рассказал про все новинки релиза — "New in Chrome 83".

Из origin trial вышел Trusted Types API. Он позволяет избежать распространённых DOM-based XSS атак, блокируя прямой доступ к потенциально небезопасным частям web-платформы (innerHTML, изменение содержимого script, eval, setTimeout и т.п.) Trusted Types API можно включить с помощью заголовка CSP require-trusted-types-for 'script'.

Были обновлены встроенные html-контролы — унифицирован внешний вид, улучшена поддержка клавиатуры и тач-ввода. Над этой фичей работала команда Edge.

В рамках origin tirals доступны performance.measureMemory() — новое API для мониторинга потребления памяти страницей и Native File System API для упрощения работы с файлами в веб-приложениях.

Была добавлена поддержка изолированных окружений, которые гарантируют безопасность при использовании SharedArrayBuffer, performance.measureMemory(), JS Self-Profiling API.

В Chrome Dev Tools теперь можно эмулировать проблемы со зрением. Также можно эмулировать разные локали. При проблемах с Cross-Origin Embedder Policy на панели "Network" будет отображаться соответствующая отладочная информация. Перенесли пункт меню "Settings" в подменю "More tools".

#announcement #chrome #release

https://developers.google.com/web/updates/2020/05/nic83