4 мая, 2022

Сова рассылает выпуск #14

Сергей Сова

Node.js 18, поиск утечек памяти, производительность React и SSR практики тестирования в Javascript и Rust!

Я перестал использовать env vars для конфигов 🇺🇸

Автор рассматривает проблемы использования переменных окружения для конфигурации приложения. Как минимум из-за отсутствия четкого синтаксиса и структуры этих переменных бывают конфликты и перезатирания важных значений для приложения, другими значениями. Предлагается использовать конфигурационный файл, вроде yaml, для сохранения структуры конфигов, а все секретные вещи хранить в отдельном месте вроде Vault.

Как-то я уже писал о конфигурации rust-приложений с помощью нескольких файлов, зависимых от окружения.

maheshchandraregmi.com.np

Как использовать терминал like a PRO 🇺🇸

Очень подробная статья про историю терминалов и консолей, posix, какие есть оболочки. Фактически, это настольная книга молодого разработчика по терминалу и некоторым базовым командам. Также есть очень простой гайд по git и GitHub.

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

www.freecodecamp.org

Упущенный из виду фактор оптимизации производительности в React 🇺🇸

Многие люди, включая меня, иногда любят искать простые ответы на проблемы, с которыми они сталкиваются. Довольно легко придумать способ оптимизации относительно популярных кейсов, но мы часто забываем о крайних случаях. В контексте оптимизации производительности в React, одним из таких крайних случаев является положение компонента в дереве.

www.zhenghao.io

Производительность фронтенда с SSR

Очень неплохой обзор на реализацию SSR вместе с обзором производительности и результатов web-vitals метрик.

Авторы предлагают свой взгляд на встраивание Suspense в привычный механизм SSR.

habr.com

Как симулировать поведение юзера в Storybook 🇺🇸

Теперь в stories для компонентом можно запускать Play-блоки как тесты, использующие внутри playwright и jest. Помимо того, что доступна библиотека testing-library. Теперь unit-тестирование компонентов выглядит гораздо более полно. Если можем делать скриншоты, потыкать компонент как пользователь, значит можем давать гарантии по качеству компонента.

P.S. все еще не стоит делать снепшоты(snapshots vs screenshots) верстки компонентов. Это по прежнему бесполезная трата времени, как вашего, так и коллег и ресурсов CI.

storybook.js.org

Как избегать утечек памяти в javascript 🇺🇸

Как вообще подойти к вопросу поиска утечек памяти? Chrome DevTools имеют весьма богатый инструментарий управления памятью, помогают найти утечки и определить их происхождение.

А так как можно подключить Chrome DevTools к Node.js в виде отдельного inspector, то можно находить утечки памяти и в приложениях Node.js, что звучит уже гораздо интереснее и полезнее.

blog.logrocket.com

Node.js 18 уже доступна! 🇺🇸

На самом деле уже успела выйти версия 18.1.

Наконец-то появилась поддержка браузерного fetch из коробки. Но конечно же, твиттерские фронтендеры разнылись, что коробочный fetch работает не так как node-fetch, хотя последний реализует стандарт не полностью и не правильно.

Вместе с ним залетели WebStreams, надеюсь теперь реализация стримов для универсальных пакетов будет проще. Но конечно же, как и fetch это всё пока experimental.

Также появились снепшоты байт-кода, которые можно вбандлить в node.js бинарь. Это имеет смысл для серверных Node.js приложений, ведь тогда можно собрать приложение сразу в байт-код и поставлять внутрь Docker-образа уже оптимизированный вариант бандла, при запуске которого не нужно будет парсить и валидировать javascript-код.

nodejs.org

Модули ядра в Node.js 18 теперь с префиксами 🇺🇸

Во первых, в Node.js 18 теперь доступен встроенный тест раннер.

Во вторых, заимпортировать его можно только через префикс "node:test" и "node:assert". Сделано это, чтобы избежать конфликтов с экосистемой npm (1, 2). Авторам Node.js не придется ломать голову придумывая не конфликтующее имя, затем вымаливать пакет у автора на npm, чтобы поставить заглушку. Все стандартные пакеты в Node.js получат префикс node: и будут доступны через require и import.

Но вот насколько готова экосистема к такому изменению это вопрос. Всякие инструменты вроде Webpack умеют работать со стандартными пакетами, подменяя их для браузера или же помечая как external для node-сборок. Кажется, что с префиксом будет гораздо проще детектить Node.js std, но вероятно никто этого пока еще не умеет.

fusebit.io

Лучшие практики тестирования в JavaScript & Node.js

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

Например, тест стоит структурировать по 3 секциям Arrange, Act & Assert (AAA). Иначе сам тест превратится в код, который нужно тщательно разбирать, а значит польза от теста стремится к нулю.

github.com

В cargo добавлена новая команда cargo add

Ранее, в экосистеме Rust, чтобы добавить новую зависимость, необходимо было руками добавить запись в Cargo.toml, предварительно узнав версию нужного пакета на crates.io или lib.rs.

Альтернативой было установить расширение команд для cargo — cargo-edit. Он добавлял команды cargo add, cargo rm, cargo upgrade.

Теперь же в rust 1.62.0 появилась встроенная команда cargo add. Как минимум это упрощает жизнь разработчикам, а мне как фронтендеру приятно, что в любимой экосистеме появилось знакомое поведение.

t.me

Коробочка для снепшот тестирования 🐙

Если кто-то пробовал использовать снепшоты jest для снятия содержимого любого значения в виде строки, то вы понимаете о чем здесь пойдет речь.

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

lib.rs

Библиотека для снепшот тестирования 🐙

На мой взгляд это гораздо более продвинутый инструмент для построения тестов на основе снепшотов. Умеет работать с разными видами данных, умеет представлять их в разных форматах и записывать в разные места. Я использовал этот тул на практике в своих проектах и остался очень доволен. Моя личная рекомендация.

github.com

Возможно, вы никогда не обращали внимания, но почти у всех ссылок есть emoji. Они расставлены не просто так:

🇺🇸 — статья на английском языке

🐙 — репозиторий на github, пакет на npm или crates

🇷🇺 — статья на русском языке, но теперь я его не буду ставить

Понравился этот выпуск? да нет

Сергей Сова @_sergeysova

Много говорю об effector, пишу на React всё самое сложное, руковожу фронтендом, практикую ночной Rust

Чтобы отменить подписку, нажмите здесь.

Если вам переслали это письмо, и выпуск рассылки вам понравился, подпишитесь: здесь.

Created with Revue by Twitter.