Сергей Руденко из Airbnb написал статью про миграцию кодовой базы фррнтенда компании с JavaScript на TypeScript — "ts-migrate: A Tool for Migrating to TypeScript at Scale".

Для миграции они разработали инструмент ts-migrate, который помогает в массовой конвертации JavaScript файлов. Для автоматического поиска проблемных мест в коде и запуска необходимых трансформаций используются диагностики TypeScript language server. Трансформации представляют собой кодмоды, которые могут использовать jscodeshift, AST TypeScript или могут работать с исходным кодом как с обычным текстом. Есть трансформации для упрощения миграции на TypeScript React-компонентов, но без поддержки хуков.

Благодаря ts-migrate в Airbnb на TypeScript было переведено более 80% всей кодовой базы фронтенда (6 миллионов строк кода). Но так как утилита устанавливает any в проблемных местах, у ребят осталось ещё много работы над добавлением полноценных типов.

Рекомендую почитать статью, если планируете перевести код своего проекта на TypeScript.

#typescript #migration #tool

https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc

Зейнеп Канкара в блоге V8 написала статью про Indicium — новый инструмент рантайм анализа V8 — "Indicium: V8 runtime tracer tool".

Чтобы понять, зачем нужен этот инструмент, нужно немного разобраться в кишках V8. Для представления JavaScript-объектов V8 использует специальную структуру — Map (не тот Map, который определён в ECMAScript). Благодаря этой структуре движок экономит оперативную память при работе с большим числом однотипных объектов. Map в свою очередь использует оптимизацию Inline Cache (IC) для быстрого доступа к свойствам объектов.

Внутри V8 уже есть всё необходимое для получения информации о Map и IC, и уже есть готовые инструменты для их анализа. Indicium представляет эту информацию в удобном виде, связывая между собой Map и IC. С помощью него можно проанализировать создание объектов и быстро выявить проблемные места в исходном коде.

Indicium — это ещё один полезный инструмент для анализа проблем производительности в Chromium и Node.js.

#performance #tool #v8

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

Сегодня узнал про утилиту для управления версиями инструментов JavaScript-тулчейна — Volta.

Если объяснять человеческим языком, то Volta похожа на nvm. С помощью неё можно устанавливать и переключаться между разными версиями Node.js. В отличие от nvm она написана на Rust и работает очень быстро. Инициализация nvm при открытии терминала может занимать несколько секунд (на моём стареньком маке около четырёх секунд). Volta исключает необходимость её инициализации при запуске терминала.

Но если бы дело было только в скорости, то было бы не очень интересно. Ещё Volta позволяет пинить версии node/npm/yarn в package.json и автоматически переключаться на нужную версию при переходе в директорию с таким конфигом. То есть можно запушить package.json с запиненными версиями node и npm в git, и всем членам команды, кто использует volta, не надо беспокоится о ручном переключении версии ноды. Ещё одна фишка — установка утилит из npm, которые не надо переустанавливать при переключении версии ноды.

Volta всё ещё находится в стадии активной разработки, поэтому есть кое-какие шероховатости. Например, есть проблемы с вызовом одной JS-утилиты из другой. Разработчики в issue пишут о том, что эта проблема уже в процессе решения. Над проектом работают разработчики из LinkedIn.

В общем, интересный проект. Поставил себе, пока радуюсь скорости открытия терминала.

#js #nodejs #tool

https://volta.sh/

Несколько дней назад вышла новая версия Snowpack. Фред Шотт — автор проекта — рассказал про все новинки релиза.

Snowpack — это инструмент для сборки фронтенд-приложений. В отличие от Webpack, Rollup и Parcel, приложения, использующие Snowpack, не нуждаются в пересборке бандла на каждое изменение файлов во время разработки. Snowpack транспилирует файлы точечно без бандлинга всех файлов, делегируя процесс создания графа зависимостей и его загрузки браузерам с помощью нативных JavaScript-модулей. То есть если вы пишете большое приложение и сделали изменения, например, в файле Header.tsx, то транспилироваться будет только он, тем самым уменьшая время обратной связи на каждое изменение файлов в разы по сравнению с другими бандлерами.

В Snowpack v3.0 были добавлены Streaming Imports. Благодаря им Snowpack может загружать и кэшировать npm-модули без явного использования npm install. С этой версии Snowpack может создавать оптимизированные production-билды с помощью esbuild (очень быстрый сборщик, написанный на Go). Реализован новый API, который уже используется в SvelteKit. Сгенерированные с помощью Snowpack файлы теперь можно без проблем импортировать в Node.js.

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

#release #bundle #tool

https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0

Дэниэл Дестефанис из Discord рассказал о том, как разработанные ими плагины для Figma упрощают жизнь разработчикам и дизайнерам — "Building open-source design tools to improve Discord’s design workflow".

Ребята из Discord сделали несколько плагинов для Figma, которые им помогают в работе. Плагин "Auto Theme" используется для автоматической генерации светлой/тёмной темы экранов приложения. Плагин "Design Lint" помогает быстро находить проблемные места в макете, когда в нём используются параметры, которых нет в дизайн-системе (цвет, радиус скругления углов и т.п.) Плагин "Table of Contents" генерирует список ссылок на основные части макета для помощи в навигации по документу. Плагин "Inspect" используется для упрощения разработки плагинов. Все плагины доступны на GitHub.

Интересная статья. Очень рекомендую заглянуть, если работаете с Figma.

#ux #tool

https://blog.discord.com/building-open-source-design-tools-to-improve-discords-design-workflow-9a25c29f9143

Мод Нальпас во второй статье рассказала о том, как настроить HTTPS для локальной разработки — "How to use HTTPS for local development".

Для настройки локального HTTPS удобнее всего использовать утилиту mkcert. Mkcert — это zero-config утилита для настройки локального HTTPS. С помощью команды mkcert -install создаётся локальный certificate authority (CA), с помощью команды mkcert <domain_name> создаётся сертификат, который нужно использовать при настройке локального HTTP-сервера.

Ещё можно использовать самоподписанный сертификат или сертификат подписанный внешним CA. Но эти варианты не очень гибки и удобны по сравнению с mkcert.

#http #tool

https://web.dev/how-to-use-local-https/

Несколько дней назад команда разработчиков Vue зерилизила Vite 2.0. В статье "Announcing Vite 2.0" Эван Ю рассказал о новом проекте.

Vite — это сборщик и dev server, использующий ESM, для ускорения применения изменений на этапе разработки. По своей философии он очень похож на Snowpack и WMR.

Vite создавался для улучшения разработки Vue-приложений, но команда разработчиков решила сделать его независимым от Vue (на данный момент есть поддержка Vue, React, Preact и LitElement). Из-за смены курса разработки первая версия так и не достигла стабильной версии, поэтому Vite 2.0 можно считать официальной первой стабильной версией.

Vite очень похож на Snowpack, но в нём есть несколько уникальных фич: поддержка автоматического код-сплиттинга для CSS, поддержка многостраничных приложений, есть режим для разработки браузерных библиотек, есть встроенная поддержка монорепозиториев и CSS-препроцессоров.

#tool #bundle

https://dev.to/yyx990803/announcing-vite-2-0-2f0a

Хью Хауорт написал обзор современных инструментов сборки — "Comparing the New Generation of Build Tools".

В статье рассказывается про esbuild, Snowpack, Vite и wmr. Esbuild — это очень шустрый сборщик, написанный на Go. Snowpack, Vite и wmr — сборщики нового поколения. Они полагаются на нативную модульную систему JavaScript, устраняя шаг сборки приложения во время разработки.

Snowpack позволяет подключать и гибко настраивать разные сборщики для production-сборки проекта. Vite, наоборот, исповедует принцип zero-configuration, предоставляя набор настроек, которые подойдут большинству проектов. Wmr — самое лёгкое решение, но из коробки поддерживает только React и Preact. Esbuild в этом сравнении стоит особняком, так как это обычный, но очень быстрый сборщик.

Большая и хорошая статья. Очень рекомендую почитать.

#bundle #tool

https://css-tricks.com/comparing-the-new-generation-of-build-tools/

Варун Вачнар пообщался с разработчиками из Adobe, BBC, Twilio, Shopify, Peloton и обобщил подходы, которые они используют при тестировании UI — "How to actually test UIs".

В статье рассказывается о подходах тестирования интерфейсов, создаваемых с помощью компонентного подхода. Для обособленного тестирования компонентов команды используют Storybook, для тестирования поведения компонентов — Testing Library, для тестирования доступности — Axe, для E2E-тестов — Playwright и Cypress.

Есть раздел про визуальное тестирование (тестирование скриншотами), но там нет упоминания инструментов с открытым исходным кодом, например, Hermione, Gemini, cypress-image-snapshot.

Как бы то ни было, статья хорошая. Очень рекомендую почитать.

#testing #tool

https://storybook.js.org/blog/how-to-actually-test-uis/

Неделю назад Себастьян Маккензи — автор Babel и Yarn — написал пост про то, что его проект Rome привлёк инвестиции.

Rome — это тулчейн с открытым исходным кодом, цель которого — консолидация разных инструментов для работы с JavaScript (пакетный менеджер, линтер, тест-раннер, сборщик и т.п.) В отличие от других инструментов Rome использует единое ядро для всех задач, ускоряя работу всего фронтенд-пайплайна.

Привлечённые инвестиции (4.5 миллиона долларов) пойдут на найм фулл-тайм разработчиков. Себастьян пишет о том, что не планирует закрывать какие-то части Rome, инструмент будет доступен без ограничений. Зарабатывать планируют на вспомогательных сервисах.

В общем, проект полетел. Очень интересно, как он повлияет на JavaScript-экосистему в будущем.

#announcement #tool

https://rome.tools/blog/announcing-rome-tools-inc/

Два дня назад вышла новая мажорная версия текстового редактора Sublime Text. Бенджамин Шааф рассказал о его новых возможностях — "Sublime Text 4".

Теперь Sublime Text поставляется со встроенной поддержкой TypeScript, TSX и JSX. Есть все основные фичи: подсветка синтаксиса, автодополнение кода, переход к объявлению.

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

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

Был улучшен движок подсветки синтаксиса. Упрощено открытие вкладок в режиме split view. Добавлена нативная поддержка Apple Silicon и Linux ARM64.

#tool #programming #announcement

https://www.sublimetext.com/blog/articles/sublime-text-4

Недавно вышла новая версия Jest. Тим Секингер рассказал о новинках релиза — “Jest 27: New Defaults for Jest, 2021 edition”.

— В интерактивном режиме появилась возможность поочерёдного перехода по упавшим тестам.
— Инлайн-снапшоты теперь можно использовать без подключения Prettier.
— Инициализация тестов была ускорена на 70%.
— Продолжается работа над внедрением ESM. Её поддержка уже есть в кастомных раннерах, репортерах и watch-плагинах.
— Добавлена асинхронная поддержка transform для эффективной транспиляции с помощью esbuild, Snowpack и Vite.
— Реализации функций describe, it, beforeEach заменена соответствующими реализациями из jest-circus.
— Теперь используется новая реализация для мока таймеров. В очень редких случаях они могут сломать тесты, но есть возможность отката на старую версию с помощью jest.useFakeTimers("legacy").
— Изменено дефолтное тестовое окружение на node. Для возврата к старому поведению нужно использовать опцию "testEnvironment": "jsdom".
— Изменена логика работы функции done. Её коллбек нельзя вызвать более одного раза и нельзя комбинировать вызов done с возвратом промиса. Блоку describe запрещено возвращать какие-либо значения.
— Модули, загружающиеся с помощью опций testEnvironment, runner, testRunner и snapshotResolver, теперь транспилируются.
— Удалены задеприкейченные методы jest.addMatchers, jest.resetModuleRegistry, jest.runTimersToTime.

#testing #tool #release

https://jestjs.io/blog/2021/05/25/jest-27

jsc — интерпретатор JavaScript, встроенный в macOS

Крейг Хокенберри написал статью про малоизвестную утилиту jsc — "jsc: My New Best Friend".

Все устройства с macOS идут в комплекте с jsc — интерпретатором JavaScript на базе движка JavaScriptCore. Бинарник находится по пути /System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Helpers/jsc. В cтарых версиях macOS по пути /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc.

Крейг пишет, что jsc используется командой разработки WebKit для запуска тестов. Возможно, что это так, но я не смог найти про это информацию. Нашёл, что jsc используется для поддержки выполнения скриптов в Swift- и Objective-C-программах.

Утилита jsc — это не замена Node.js, но она может оказаться полезной для запуска простых скриптов, когда Node.js под рукой нет.

#tool #javascript #macos

https://furbo.org/2021/08/25/jsc-my-new-best-friend/

Анализ JS-бандла с помощью Lighthouse Treemap

Сиа Кармаленгос написала статью про новый инструмент анализа JS-бандлов, доступный в Lighthouse — "Explore JavaScript Dependencies With Lighthouse Treemap".

В последних версиях Lighthouse появилась новая фича — визуализация JS-бандлов с помощью Treemap. Если вы знакомы с webpack-bundle-analyzer, то уже можете представить себе новый инструмент. Основное отличие Treemap в Lighthouse — возможность анализа бандлов любых сборщиков. Если сборка происходит с генерацией сорс-мапов, то в Treemap будут отображаться названия модулей. Но самая интересная функция — оценка покрытия кода. Если включить опцию "unused bytes", то можно оценить сколько кода было загружено, но не выполнено.

Поддержка Lighthouse Treemap уже доступна в сервисе PageSpeed Insights, Lighthouse Node CLI и Chrome Canary.

#tool #js #bundle #performance

https://sia.codes/posts/lighthouse-treemap/

Интерграция VS Code с Edge DevTools

Разработчики Edge рассказали о новой экспериментальной фиче для подключения VS Code в качестве основного редактора DevTools — "Opening source files in Visual Studio Code".

Если включить интеграцию с VS Code, то при открытии исходного кода проекта в инструментах разработчика между экземпляром редактора и DevTools установится двусторонняя связь. При редактировании файлов в VS Code изменения не только будут сохраняться на диск, но и будут автоматически пробрасываться в DevTools с автоматическим обновлением открытой страницы. И, наоборот, при редактировании стилей на вкладке Elements все изменения будут автоматически пробрасываться в редактор.

Подключить VS Code можно в экспериментальных опциях DevTools: Settings > Experiments > Open source files in Visual Studio Code.

#tool #dx #edge

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode

Релиз Parcel 2

Parcel — это сборщик, который можно использовать без каких-либо настроек. Все опции используют разумные значения по умолчанию. Точка входа для сборки — основной HTML-файл приложения или сайта. В новой версии была улучшена производительность сборки, реализована новая система плагинов, три-шейкинг, код-сплиттинг, улучшение сборок библиотек, улучшена работа HMR и многое другое.

Значительно улучшена производительность сборки благодаря новому компилятору, написанному на Rust. В его основе лежит swc. Использование компилируемого языка уменьшило время инициализации кода и решило проблему медленной сериализации больших AST-объектов. Сборка теперь работает в десять раз быстрее и в три раза быстрее при использовании Terser.

Реализована новая система плагинов, которая делает Parcel полностью расширяемым. Она позволяет использовать Parcel как для небольших проектов, так и для серьёзных проектов со сложными требованиями к сборке.

Три-шейкинг включён по умолчанию. Он работает для ESM, CommonJS, динамических импортов и CSS-модулей. Есть диагностика проблем три-шейкинга, которую можно включить с помощью флага --log-level verbose. Работает автоматический код-сплиттинг с выносом общих модулей в разделяемые бандлы. Также в Parcel по умолчанию включена поддержка паттерна module/nomodule для улучшения производительности загрузки кода.

В production-режиме в Parcel включена lossless-оптимизация JPEG- и PNG-изображений. Она уменьшает объём изображений, не снижая их качество. Также появилась полноценная поддержка SVG с автоматической оптимизацией с помощью SVGO.

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

#bundle #tool #release

https://parceljs.org/blog/v2/

Лучшие практики использования виджетов сторонних сервисов

Лина Сохони, Эдди Османи и Кэти Хэмпениус написали статью о лучших практиках подключения сторонних виджетов — "Best practices for using third-party embeds".

В статье предлагается использовать ленивую загрузку содержимого iframe с помощью атрибута loading="lazy". Некоторые виджеты поддерживают ленивую загрузку из коробки, например, в социальных плагинах Facebook для этого можно использовать атрибут data-lazy="true". Есть хороший совет использовать фасады для сторонних виджетов, чтобы пользователи не загружали лишний код при открытии страницы. Затрагивается тема непредсказуемого сдвига контента (Layout Shift).

Ещё ребята рекомендуют использовать готовые библиотеки для ленивой загрузки виджетов (lazysizes), создания фасадов (lite-youtube-embed, lite-vimeo-embed, react-live-chat-loader) и уменьшения непредсказуемого сдвига контента (Layout Shift Terminator).

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

#performance #tool

https://web.dev/embed-best-practices/