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

Как Google Closure Compiler помог в разработке TypeScript

Люк Хобан рассказал об истории появления TypeScript — "The first TypeScript demo".

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

Стив Люко увидел потребность в новом инструменте и начал работать над Strada (первое название TypeScript). Через некоторое время к нему присоединился Люк Хобан, он помог в разработке парсера. Они хотели успеть сделать полноценный прототип к началу внутренней конференции, но не успевали, так как Стив повредил кисть. Нужно было написать тайпчекер. Люк придумал хак. Они изменили компилятор так, чтобы JavaScript генерировался с аннотациями типов для Google Closure Compiler. Этот код отправлялся в веб-версию компилятора на сервера Google для проверки типов. Демка заработала, в проект поверили, и затем появилась первая версия TypeScript.

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

#typescript #history

https://medium.com/hackernoon/the-first-typescript-demo-905ea095a70f

Использование лоадеров в Node.js

Арал Балкан рассказал об использовании лоадеров в Node.js на примере импорта текстовых файлов — "Make anything a JavaScript module using Node.js ESM Module Loaders".

В Node.js есть экспериментальная поддержка лоадеров. Лоадер — это код, расширяющий поведение import. Лоадеры можно использовать для автоматической транспиляции, для загрузки кода из сети, для компиляции шаблонов, преобразования React, Vue, Svelte-компонентов и т.п. В статье разбирается пример создания ладера для импорта текстовых файлов с помощью библиотеки node-esm-loader. Эта библиотека автоматически подключает лоадеры из файла .loaderrc.js. Без библиотеки лоадеры подключаются с помощью флага --experimental-loader.

Очень интересная фича, но на данный момент она находится в стаусе эксперимента.

https://ar.al/2021/05/27/make-anything-a-javascript-module-using-node.js-esm-module-loaders/

Полифил для предзагрузки JavaScript-модулей с проверкой целостности

Гай Бедфорд — автор jspm и SystemJS — рассказал о своих опытах реализации кроссбраузерной предзагрузки JavaScript-модулей с проверкой целостности — "ES Module Preloading & Integrity".

В нативной модульной системе модули загружаются после загрузки их родителей. Чтобы ускорить загрузку нижележащих модулей, можно использовать предзагрузку с помощью <link rel="modulepreload">. Ещё можно включить проверку целостности с помощью атрибута integrity. Проблема в том, что modulepreload и integrity поддерживаются только в Chrome.

Гай в своей статье предлагает использовать полифил для поддержки modulepreload и integrity во всех браузерах и рассуждает о том, как ещё может быть реализована проверка целостности JavaScript-модулей.

#esm #performance #security

https://guybedford.com/es-module-preloading-integrity

26 августа в 19:00 приглашаем на Tech Talks Зарплаты.ру в Новосибирске

Локацию выберем по количеству регистраций, недалеко от площади Ленина. Каждого оповестим лично.

2 горячие темы: «Архитектура и производительность web-приложений» и «Нужно ли высшее образование в IT»

Tech Talks - это круглый стол или дискуссионная группа, в которой могут принять участие все желающие. Нет деления на докладчика и участника: наравне участвуют все, кто хочет. Кто не хочет - слушает общее обсуждение. Модератор встречи задает и поддерживает общий вектор.

А вот и ссылка на регистрацию: https://zarplata-ru-events.timepad.ru/event/1739999/

Бесшовные переходы между экранами SPA с помощью shared element transition API

Джейк Арчибальд рассказал о новом пропозале для создания бесшовных переходов между экранами SPA — "Smooth and simple page transitions with the shared element transition API".

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

Эти проблемы призван решить shared element transition API. С его помощью можно легко создавать простые переходы между экранами и сложные переходы с разделяемыми элементами. Вот так реализуется простой переход:

async function navigateToSettingsPage() {
  await document.documentTransition.prepare({
    rootTransition: 'cover-left',
  });
  updateDOMForSettingsPage();
  await document.documentTransition.start();
}

Shared element transition API пока доступен в Chrome в экспериментальном режиме. Также на данный момент его можно использовать только в рамках одной страницы, но у авторов спецификации есть планы по его расширению для обеспечения бесшовных переходов между разными страницами сайта.

#chrome #api #spa

https://developer.chrome.com/blog/shared-element-transitions-for-spas/

Производительность стилизации в shadow DOM

Нолан Лоусон провёл небольшое исследование производительности стилизации в shadow DOM — "Does shadow DOM improve style performance?".

В пайплайне рендеринга браузера этап стилизации может занимать значительное время. В теории shadow DOM может его сократить, так как браузеру достаточно обработать инкапсулированные элементы. Проведённый бенчмарк подтвердил эту гипотезу, но только для сложных селекторов. Выигрыша относительно простых селекторов для id и class нет.

Выводы из статьи. Вариант оптимизации стилизации с помощью shadow DOM можно рассматривать при проектировании фреймворков. Shadow DOM не даёт прироста производительности относительно CSS Modules и других подобных решений для инкапсуляции стилей.

#css #performance #benchmark

https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/

Веб-версия SQLite с поддержкой сохранения изменений

Джеймс Лонг (автор Prettier) представил свой новый проект absurd-sql — порт SQLite для веба с поддержкой сохранения изменений в IndexedDB — "A future for SQL on the web".

В вебе пока нет производительного API для работы с большими массивами данных. Идёт работа над Storage Foundation API, который позволит устранить этот недостаток, но его поддержка есть только в Chrome в экспериментальном режиме.

Джеймс попробовал решить эту проблему с помощью адаптации WebAssembly-версии SQLite, в которой данные сохраняются не в память, а на диск с помощью IndexedDB. Такое решение позволило увеличить скорость записи и доступа на несколько порядков благодаря долгоживущим транзакциям, использованию курсоров и пакетной обработки запросов. Он назвал свой проект absurd-sql, так как браузеры (кроме Chrome) для реализации IndexedDB под капотом используют SQLite. То есть буст производительности достигается благодаря WebAssembly-версия SQLite, которая в конечном счёте использует другую нативную версию SQLite.

Проект находится в экспериментальном режиме, но потенциал у него есть. Как минимум благодаря absurd-sql теперь можно портировать в веб такие приложения, для которых критична скорость записи и чтения данных.

#project #storage #experimental

https://jlongster.com/future-sql-web

Хочу немного прервать молчание в канале. Тем более, что есть очень крутые поводы.

У дружественного канала @webnya сегодня день рождения. От души поздравляю Сергея и Романа и желаю дальнейшего развития! Очень рекомендую подписаться на Вебню, если вы этого ещё не сделали.

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

Всем привет!

Два месяца назад у меня начались проблемы со здоровьем. Чтобы не ухудшать текущую ситуацию, я принял решение временно остановить работу над каналом.

Это означает что Defront переходит в режим поддержки, то есть посты в канале теперь будут публиковаться гораздо реже. Также временно останавливаю работу над Defront Plus. Донаты с Patreon на время гибернации канала списываться не будут.

Сколько это будет продолжаться, я не знаю. Надеюсь, что всё придёт в норму в течение нескольких месяцев. Как бы то ни было у меня есть очень много планов по развитию канала.

Хочу поблагодарить всех за поддержку канала. Берегите себя!

Несколько дней назад вышла новая версия Next.js. Команда разработчиков фреймворка рассказала о новинках релиза — "Next.js 11".

— В новую версию попали наработки Google, которые включают в себя разные оптимизации и правила eslint, предотвращающие использование паттернов, приводящих к деградации производительности.

— Добавлена новая реализация загрузчика Babel, ускоряющая время пересборки приложения.

— Добавлен новый компонент Script, упрощающий управление приоритетами загрузки скриптов.

— Компонент Image теперь может генерировать width и height автоматически для улучшения метрики CLS. Была добавлена возможность автоматического создания плейсхолдеров изображений.

— Добавлена экспериментальная автоматическая миграция кодовой базы Create React App на Next.js.

— Добавлен Next.js Live (Preview Release), предоставляющий удобные средства коллобарации.

— Завершена миграция на Webpack 5.

#release #jsframeworks

https://nextjs.org/blog/next-11

Юна Кравец и Алекс Тотик рассказали о результатах работы над улучшением таблиц в Chrome — "TablesNG Resolves 72 Chromium Bugs for Better Interoperability".

На протяжении нескольких лет разработчики Chrome переделывали механизм рендеринга таблиц, так как старая архитектура не отвечала новым требованиям. Эта инициатива получила название TablesNG. Благодаря ей было решено много проблем. Например, была исправлена совместимость таблиц и position: sticky, улучшен рендеринг границ и исправлены проблемы с субпиксельной геометрией, которые приводили к проблемам с выравниванием при изменении масштаба страницы.

TablesNG был включён по умолчанию в Chrome 91.

#chrome

https://developer.chrome.com/blog/tablesng/

Будущее HTTP клиента в Node.js

В Node.js существует 3 встроенных модуля для HTTP запросов: HTTP, HTTPS и HTTP/2. Из названий, в общем-то, понятно для чего каждый из них предназначен. Все эти модули используют встроенный модуль Net для осуществления запросов.

Но обычно с этими модулями напрямую мы не работаем. Самый популярный пакет-обертка — это request. (он, кстати, задепрекейчен) Следующий по популярности это node-fetch, ну а догоняет его got от Синдре Сорхуса. Где-то в районе четвёртого места появляется axios.

Все эти библиотеки используют те самые встроенные модули. И это проблема, т.к. многие из них манки-патчат методы и это затрудняет добавление фич и исправление багов в ноде.

И здесь мы переходим к undici. Этот непопулярный клиент (52 000 установок в неделю против более 20 000 000 у каждого из пакетов выше) написаный Маттео Калина (со-автор fastify и член TSC Node.js) фундаментально отличается от всех остальных библиотек — он использует модуль Net в обход встроенных http и https. Так же используется WASM билд парсера llhttp. За счёт этого undici в разы быстрее, но что более интересно — в документации Node.js будет ссылка на undici. Т.е. это будет один из рекомендованных способов для работы с HTTP.

Но отвлечёмся на node-fetch и axios: их популярность более чем очевидна — зачем мне учить 2 разных API для сервера и клиента, если я могу использовать одну и ту же библиотеку и всё работает? Тем более учитывая, что в ноде начинают появляться Web API, например Crypto. А ишью с просьбой добавить fetch в ноду вот уже 3 года, но недавно началось интересное движение: один из членов репозитория ноды запостил скрин с использванием fetch из ноды со словами «now who wants to write tests for it :P». Конечно, это ничего не значит, но немного приближает нас к наличию fetch в ноде.

Так же нужно отметить, что существует undici-fetch и скорей всего он будет вмерджен в сам undici. Опять же, сейчас это не более чем размышления на тему, но, возможно, именно undici — будущее HTTP в Node.js.

Отдельно оставлю ссылки на ключевые ишью:
Future of the Node HTTP Client
Implement window.fetch into core

Томас Штайнер написал статью про Storage Foundation API — "High performance storage for your app: the Storage Foundation API".

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

Эту проблему призван решить Storage Foundation API. Он предоставляет средства для производительной работы с хранилищем данных и включает в себя набор примитивов, работа с которыми напоминает работу с обычной файловой системой. С его помощью можно получать информацию о доступном месте, создавать/удалять/переименовывать файлы, производить запись/чтение данных со смещением и т.п.

На данный момент экспериментальная поддержка Storage Foundation API есть только в Chrome в рамках программы Origin Trial.

#api #chrome #experimental

https://web.dev/storage-foundation/

Джейк Арчибальд написал статью о том, кам добиться чёткого отображения фотографий на экранах с высокой плотностью пикселей, не теряя качества и сохранив разумный вес файлов — "Serving sharp images to high density screens".

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

Ещё можно использовать медиавырыжаение -webkit-min-device-pixel-ratio с тегом <source>, чтобы браузер смог выбрать подходящее изображение в зависимости от текущей ситуации.

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

#performance

https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Список нетехнических навыков для опытных разработчиков
— Нестандартное использование функций плавности
— Организация работы с npm-скриптами
— Использование Babel в современном TypeScript-проекте
— Корреляция между Performance Score в Lighthouse и Core Web Vitals
— Функции плавности (easing functions) в CSS
— Как Facebook кодирует видео
— Кастомный REPL для Node.js
— SVG и доступность
— Этапы написания статьи и способы снятия писательского блока

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, на оплату аренды квартиры, покупку еды и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Джек Франклин — участвует в разработке Chrome DevTools — реализовал на React и Svelte небольшое приложение для трекинга времени с сохранением данных в Firebase и рассказал о своём опыте в статье "Comparing Svelte and React".

В статье сравнивается простота интеграции с аутентификацией Firebase, работа с веб-воркерами, условный рендеринг, реактивность, композиция компонентов, стилизация. По результатам сравнения победил Svelte, так как в нём проще работать с сайд-эффектами. Кодовая база Svelte в целом также оказалась проще. Из коробки идут средства для работы со стилями. Как бы то ни было Джек пишет, что ему нравится работать и с React, и со Svelte.

Немного субъективная статья, но всё равно интересная. Рекомендую заглянуть.

#jsframeworks #react #svelte

https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/

Недавно вышел Lighthouse 8. Самым значимым изменением в релизе стало изменение оценки "Performance Score". Каролина Щур в статье "How Lighthouse 8 Changes Affect Your Metrics" рассказала, как именно поменялась эта оценка.

Были изменены веса метрик FCP, SI, TTI, TBT и CLS. Теперь наибольшее влияние будут оказывать TBT (Total Blocking Time, +30% от общего веса всех метрик) и CLS (Cumulative Layout Shift, +10%). Если на вашем сайте была хорошая оценка, но в новой версии Lighthouse она упала, это означает, что при открытии страницы много времени занимает инициализация и выполнение клиентского кода или из-за того, что на странице происходит сдвиг контента.

Также было изменено определение метрики CLS. Подсчёт общего сдвига контента теперь происходит на основе сгруппированных оценок сдвига за пять секунд. Это изменение позволило устранить корреляцию между оценкой сдвига контента и количеством времени, проведённым на странице, улучшив общую оценку для долгоживущих страниц.

Lighthouse 8 уже доступен в PageSpeed Insights; его поддержка в Chrome появится в версии 93.

#performance #release #lighthouse

https://calibreapp.com/blog/lighthouse-8

Мэттью Гауде — разработчик SpiderMonkey — написал статью про опыт имплементации приватных полей класса в JavaScript-движке — "Implementing Private Fields for JavaScript".

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

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

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

#js #internals #spec #firefox

https://www.mgaudet.ca/technical/2021/5/4/implementing-private-fields-for-javascript

В мае вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v12 is now available".

— Экосистема Angular продолжает миграцию на пайплайн компиляции и рендеринга Ivy; View Engine с 12-ой версии задеприкейчен и будет удалён в одном из будущих релизов.

— Добавлены инструменты для автоматической миграции на новый формат идентификаторов сообщений i18n.

— Protractor (инструмент E2E-тестирования Angular-приложений) больше не используется при создании новых проектов. Его дальнейшая судьба пока неизвестна.

— Теперь @Component поддерживает инлайн SASS-кода. Добавлена поддержка новой модульной системы SASS. Angular CDK и Angular Material больше не поддерживают node-sass.

— Добавлена поддержка Nullish Coalescing в шаблонах. Завершена миграция на Webpack 5 и добавлена поддержка TypeScript 4.2. Команда ng update по умолчанию переключена в production-режим. Задеприкейчена поддержка IE11, она будет удалена полностью в следующей мажорной версии.

#angular #release

https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

Андрей Мелихов на канале ДевШахты опубликовал вторую часть видео, посвящённую Server-Sent Events — "Server-Sent Events: Снимаем ограничения".

В первой части Андрей рассказывал про основные концепции использования API и про решаемые ей задачи (простая альтернатива веб-сокетам, однонаправленный канал связи с сервером). Вторая часть посвящена использованию SSE в реальных проектах.

При использовании SSE поверх первой версии HTTP есть ограничение на максимальное количество подключений к источнику данных — в рамках одной страницы нельзя сделать больше шести подключений. Эту проблему можно обойти переходом на HTTP/2. Также при создании подключения с помощью конструктора EventSource нет возможности передать дополнительные HTTP-заголовки, например, для авторизации. Это ограничение можно обойти с помощью кук.

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

#api #nodejs #video

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