KrasnoVMV's

2022-12-15 12:35:43 Привет!

Столкнулись с интересным кейсом, для меня это просто утечка памяти года - JSON.parse(undefined)

Этот простой код в Node.js до 18 версии вызывает небольшую утечку памяти, примерно 128 байт на вызов, которые не очищаются с помощью Garbage Collector.

Проблема описана в этом issue, и как будто бы исправлена в актуальных мажорках ноды, но фактически утечка присутствует в 14.x и 16.x версиях, по результатам наших проверок.

Почему утечка года:
- она маленькая и медленная, нужны хорошие нагрузки что бы была заметна
- совершенно неожиданная при профилировании (просто посмотрите на этот "undefined" на скриншоте, я просто игнорировал его когда встречал)
- очень легко воспроизвести, у нас оказалось несколько мест где парсим те cookies, которые часто undefined

Очень рад работать с такими крутыми коллегами, один из которых смог это раскопать)

Основной причиной, почему начали смотреть утечки памяти, оказался другой код, связанный с LRU кэшами, но в любом случае это хороший повод обновить Node.js Открыть/Комментировать

2022-12-13 12:40:54 Service Worker для блога.

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

Заметки.

Типы нужно подключать явно так:

///

При этом addEventListener(“fetch”, (event) => …) все равно не выводит event, проставляем явно ExtendableEvent.

caches.match(request) не делаем! Используем только определенную версию caches.open(CACHE).then((cache) => cache.match(request)) что бы можно было ее поменять в случае какой-то ошибки или большой миграции.

Положить в кеш данные браузерного экстеншена нельзя, поэтому их нужно явно скипать !request.url.startsWith('http'), что бы не сыпались ошибки.

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

Тк получение нового контента sw может произойти И до старта скрипта апдейта на странице И позже, нужна простая версия хендшейка - отправляем апдейт сразу и на 'client-ready’, все это в промисе на waitUntil, при этом не забываем фолбек таймаут на клинап что бы промис не завис, на случай быстрого закрытия страницы (до окончания загрузки) и тп.

На клиенте получить новый контент и сравнить с текущим можно как-то так:

new DOMParser()
.parseFromString(data.text, 'text/html')
.querySelector('main')
.innerHTML
===
document.querySelector('main').innerHTML

Скрипт подключения воркера и апдейта контента нужно вынести отдельно и не кешировать.

17 views09:40

Открыть/Комментировать

2022-12-08 13:54:20 Timeline of a React Component With Hooks

Простая анимированная шпаргалка объясняющая, что происходит, когда применяются хуки в React. Можно проследить за каждым шагом применения хука - от старта рендера до отрисовки в браузере

https://julesblom.com/writing/react-hook-component-timeline

#link #development #react #reactHooks Открыть/Комментировать

2022-12-06 11:42:56 memlab, инструмент для поиска утечек памяти в браузерах и в Node.js, разработанный и используемый в Meta → https://facebook.github.io/memlab/ Открыть/Комментировать

2022-12-05 07:33:52 Глубокое погружение в бандлинг через Webpack: подробный обзор процесса сборки через Webpack и его основных концепций и понятий → https://indepth.dev/posts/1482/an-in-depth-perspective-on-webpacks-bundling-process Открыть/Комментировать

2022-12-02 20:17:33 Выпущу портянку:
Про дефолты

Почему плохо
- У всех есть автоимпорт
- Переименование не гарантирует переименование импортов
- В целом, работа с именами дефолтных импортов - магия
- Возможность экспортировать анонимные функции
- Возможность указать любое имя при импорте значения
- В случае множественных импортов создается неконсистентность
- Многострочность
- Отсутствие строгости нейминга -> дубликаты имен

Почему именованые экспорты
- Гарантия корректности нейминга (TS)
- Унификация экспортов, отсутствие когнитивной нагрузки для принятия решения
- Лучшая читаемость, особенно при множественных экспортах (хотя это больше про export const foo vs export { foo } ) - для изменения значения не нужно скроллить туда-сюда, чтобы понять, экспортируется ли оно
- Public API
- Мы всегда можем увидеть, что экспортирует модуль без необходимости лезть внутрь
- Полная явность и открытость содержимого модуля
- Автокомплит
- Реэкспорты без алиасинга
- dynamic imports (кроме React.lazy/dynamic из некста)

Когда хорошо
- Библиотечный экспорт (те же реакт/лодаш)
- Специфичные потребители
- Требования фреймворков/библиотек (напимер, страницы в NextJS)
- Финальные компоненты для lazy динамик импортов
- Конфиги/схемы/etc. в том случае, когда их будет потреблять сокрытая автоматика (webpack, next, tailwind, etc.)

Ссылочки
Обзорные статьи (и канал в телеге хех) с аргументацией отказа от дефолтных импортом
- https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
- https://basarat.gitbook.io/typescript/main-1/defaultisbad
- https://t.me/why_not_export_default
- RFC в гитлабе (там тоже был полный разворот от "только default" к "только named") - https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/20
Стайлгайды
- GitLab - https://docs.gitlab.com/ee/development/fe_guide/style/javascript.html#es-module-syntax
Google - https://google.github.io/styleguide/jsguide.html#es-module-exports Открыть/Комментировать

2022-12-01 18:03:44 Новая статья: Ускоряем Реакт-перформанс в 4 раза

Long time no hear :) Пока я потихоньку справляюсь с выгоранием, ловите большую статью — про то, как мы с Causal оптимизировали Реакт-перформанс в 4 раза: https://3perf.com/blog/causal/

Внутри разное вкусное:
— Как мы пропатчили лишние ререндеры в сторонней библиотеке (AG Grid)
— Как мы (некрасиво, но эффективно) оптимизировали дорогой useEffect()
— Как часть компонентов ререндерились зря из-за редаксовского useSelector() — и как с этим помог useStore()
— и другое Открыть/Комментировать

2022-11-25 18:48:51 В помощь погромистам, кто устраивается на работу в западной компании - сборник задач с собеседов и их решения. На русском:
https://github.com/vitkarpov/coding-interviews-blog-archive/tree/main/posts

Я с удовольствием полистал Открыть/Комментировать

2022-11-21 03:46:36 Открыть/Комментировать

2022-11-07 13:07:26 Code coverage with Storybook test runner

Сначала storybook добавили для историй поле play, в которое можно складывать необходимые взаимодействия с компонентом

Потом они добавили возможность писать там асерты и использовать истории как тесты

Теперь же выходит статья про то, как собирать test coverage с этих тестов.

В общем-то по ссылке доступна очень короткая инструкция про сбор test coverage у storybook тестов.

Достаточно интересная возможность. Радует, что команда развивает storybook не только как песочницу или витрину для компонентов, но и как инструмент тестирования.

О том что storybook - инструмент тестирования в первую очередь, я говорил на своих докладах последние пару лет. Но теперь storybook сам делает удобное API для тестирования и костылить что-то самому нужно намного реже.

https://storybook.js.org/blog/code-coverage-with-the-storybook-test-runner

#development #storybook #testing Открыть/Комментировать