В node.js добавили минимальную поддерджку typescript

В node.js добавили возможность запускать TS модули. Под капотом типы просто вырезаются с помощью swc, то есть нельзя использовать продвинутые фичи типа еnum и нет никакой проверки типов самой нодой.

С одной стороны сделано не так уж много, с другой стороны этого не хватало всегда, но сейчас, учитывая бурное развитие альтернатив в виде bun и deno, предоставляющие полноценную интеграцию из коробки, такой запрос просто нельзя игнорировать. И даже такая простая реализация просто необходима.


https://github.com/nodejs/node/pull/53725

#development #javascript #nodejs #typescript

Вышел релиз Astro 4.12 с Server Islands

Вышел релиз Astro 4.12. Основная фича - server islands. Astro использует концепцию Островов интерактивности в море Статичного Контента - по задумке, с сервера приходит статичная разметка, в котором есть Интерактивные элементы работающие на js. Эти элементы реализованы как JS скрипты, загружаемые в браузер.

В новом релизе добавлена возможность делать серверные острова. То есть это как серверные компоненты, но для островной архитектуры.



https://astro.build/blog/astro-4120/

#development #javascript #astro #islandsArchitecture

Why is spawning a new process in Node so slow?

Хорошая статья обозревающая проблему перформанса при Запуске под-процессов в Node.js. Оказывается, Node.js очень плох в Запуске под-процессов.

Если делать наивное решение, то Node.js окажется в 3 раза медленнее чем bun и deno и в 8 раз медленнее чем Go и Rust.

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

Из интересных открытий - в одном из бенчмарков Node.js запускающий под-процессы bun оказался быстрее чистых Node.js, deno u bun.

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

https://blog.val.town/blog/node-spawn-performance/

#development #javascript #nodejs #bun #deno #performance #recommended

Дайджест за 2024-07-30 - 2024-08-01

В node.js добавили минимальную поддерджку typescript
В node.js добавили возможность запускать TS модули. Под капотом типы просто вырезаются с помощью swc, то есть нельзя использовать продвинутые фичи типа еnum и нет никакой проверки типов самой нодой.

С одной стороны сделано не так уж много, с другой стороны этого не хватало всегда, но сейчас, учитывая бурное развитие альтернатив в виде bun и deno, предоставляющие полноценную интеграцию из коробки, такой запрос просто нельзя игнорировать. И даже такая простая реализация просто необходима.

Вышел релиз Astro 4.12 с Server Islands
Вышел релиз Astro 4.12. Основная фича - server islands. Astro использует концепцию Островов интерактивности в море Статичного Контента - по задумке, с сервера приходит статичная разметка, в котором есть Интерактивные элементы работающие на js. Эти элементы реализованы как JS скрипты, загружаемые в браузер.

В новом релизе добавлена возможность делать серверные острова. То есть это как серверные компоненты, но для островной архитектуры.

⭐Why is spawning a new process in Node so slow?
Хорошая статья обозревающая проблему перформанса при Запуске под-процессов в Node.js. Оказывается, Node.js очень плох в Запуске под-процессов.

Если делать наивное решение, то Node.js окажется в 3 раза медленнее чем bun и deno и в 8 раз медленнее чем Go и Rust.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Benchmarking AWS Lambda Cold Starts Across JavaScript Runtimes

Команда Deno провела замеры скорости холодного старта различных JavaScript-рантаймов в AWS Lambda. Холодный старт - это когда приложение запускается впервые и ему приходится тратить время на свою инициализацию

В сравнении участвовалии: deno, bun, nodejs, aws nodejs (оптимизированная поставка nodejs для запуска в aws). Запускались при этом веб-сервера на express, fastify, hono.

Что можно сказать о результатах: в AWS deno оказался почти везде быстрее всех. Исключение составил запуск fastify - там победил nodejs от aws.

В виртуалке deno победил всех.

За счет чего такие результаты? Команда Deno говорит, что это за счет кеширования модулей, графа модулей, кэша v8. При сборке докер-образа Deno предзапускает код, прогревая кэши приложения.

Не уверен, что это корректный бенчмарк, но тем не менее он достаточно интересный



https://deno.com/blog/aws-lambda-coldstart-benchmarks

#development #javascript #nodejs #bun #deno #performance #recommended

Garbage collection and closures

Статья от Джейка Арчибальда про утечку памяти в JS (относится ко всем популярным браузерным движкам).

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

Вот этот код не течёт

function demo() { 
  const bigArrayBuffer = new ArrayBuffer(100_000_000); 
  const id = setTimeout(() => { 
    console.log('hello');
   }, 1000); 
  return () => clearTimeout(id);
 } 
globalThis.cancelDemo = demo();

А вот этот течёт

function demo() { 
  const bigArrayBuffer = new ArrayBuffer(100_000_000);     
  const id = setTimeout(() => {
    console.log(bigArrayBuffer.byteLength); 
  }, 1000); 
  return () => clearTimeout(id);
 }
 
globalThis.cancelDemo = demo();

Память утекает, потому что:
- Движок видит, что bigArrayBuffer ссылается на внутренние функции, поэтому объект остается в памяти, ассоциируясь с областью видимости, созданной при вызове demo().
- Через секунду функция, ссылающаяся на bigArrayBuffer, больше не вызывается.
- Однако область видимости остается, так как функция "cancel" все еще доступна для вызова.
- bigArrayBuffer ассоциируется с этой областью видимости, поэтому остается в памяти.

Если удалить ссылку на функцию cancel, то объект будет удален из памяти

globalThis.cancelDemo = null;

https://jakearchibald.com/2024/garbage-collection-and-closures/

#development #javascript #performance #memoryLeak #recommended

How Google handles JavaScript throughout the indexing process

Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера

Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).

В целом в исследовании также много других интересных пунктов (как например тот факт, что индексируются только страницы с 3хх и 2хх кодами. Т.е. если вам необходимо отрендерить экран с ошибкой - лучше его отрендерить на отдельном урле или с помощью 4хх или 5хх кода хттп).

Рекомендую к прочтению, если вы работаете с SEO



https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

#development #javascript #SEO

Дайджест за 2024-08-05 - 2024-08-07

——————————————

Началась последняя неделя отпуска 🌴. К сожалению немного приболел, поэтому ссылок на всю неделю не ожидается. Завтра поеду на поезде - чекну все дайджесты и, скорее всего, ссылки в канале появятся со среды

——————————————

⭐Benchmarking AWS Lambda Cold Starts Across JavaScript Runtimes
Команда Deno провела замеры скорости холодного старта различных JavaScript-рантаймов в AWS Lambda. Холодный старт - это когда приложение запускается впервые и ему приходится тратить время на свою инициализацию

В сравнении участвовалии: deno, bun, nodejs, aws nodejs (оптимизированная поставка nodejs для запуска в aws). Запускались при этом веб-сервера на express, fastify, hono.

⭐Garbage collection and closures
Статья от Джейка Арчибальда про утечку памяти в JS (относится ко всем популярным браузерным движкам).

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

How Google handles JavaScript throughout the indexing process
Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера

Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Вышел выпуск подкаста от несравненного Андрея Смирнова с моим участием. Рассказываю немножко про карьеру, канал и Новосибирск .
У Андрея в подкасте frontend weekend постоянно выходят выпуски, рекомендую подписаться на подкаст/телегу, если вам нравится такой формат

How we deleted 4195 code files in 9 hours

Вы наверное уже не раз слышали, как компании проводят внутри себя хакатон по какой-то теме, когда команды в короткий промежуток сфокусированной работы стараются создать какую-то крутую ценность. Есть даже багатоны - это когда команды собираются исправлять баги в продукте. И вот в статье описывается новый вид хакатона - клинатон (cleanathon). Это когда цель хакатона - вычистить систему от всякого старья - легаси кода, документов, джоб в пайплайне

Задумка достаточно интересная. В статье описывается, как запускать клинатон в компании, что можно чистить и как считать очки (чтобы был соревновательный дух) и как клинатон прошел в компании автора статьи

Итоги клинатона в компании у автора:
- Сэкономили тысячи долларов месячных оплат (за счет удаление чего-то, что требует оплаты)
- Удалили 4195 файлов с кодом и дополнительно 4747 строчек кода
- Закрыли 120 PR и удалили 2851 неиспользуемые гит-ветки
- Удалили 22 фиче-флага и 46 пакетов из зависимостей
- Удалили 42 джобы и 58 пайплайнов
- Архивировали 50 репозиториев
- Удалили 63 таблицы
- Удалили 47804 файла в гугл диске
- Удалили 159 документов в конфлюенсе и архивировали 200 тикетов в jira
- Удалили 6 фигма файлов и 40 правил автоматизации в jira

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


https://zaidesanton.substack.com/p/organizing-the-best-cleanathon-your

#development #hackathon #refactoring

Reactile

Reactile - инструмент для организации UI приложения в виду рабочих столов с виджетами. От вас - виджеты в виде React-компонентов, от Reactile - удобный интерфейс для управления виджетами.

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


https://www.reactile.net/

#development #javascript #react #dragndrop

Common Sense Refactoring of a Messy React Component

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

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

Далее следует поставить себе целью выделить такой код, который плох не только в текущем контексте, но который не хочется видеть в проекте вообще. На такой код необходимо написать автоматические проверки (например, правила eslint)

Далее начинается практика. Первым делом автор делает достаточно простой рефакторинг: удаляет мертвый код.

После этого необходимо бороться с тем, что в компоненте слишком много логики. Это решается несколькими шагами: разделением ветвления вёрстки на независимые под-компоненты, вынос утилитарных функций, констант и хелперов вне компонента, создание кастомных хуков, следование SRP - явное разделение потоков обработки разных вариаций логики.

Из интересных и субъективных рефакторингов - замена fetch на useQuery и замена ручной валидации объекта на библиотеку. В рамках переезда на useQuery также была отброшена отмена запроса т.к. нет смысла отменять запрос в рамках компонента. Оба изменения очень субъективны, но они точно упрощают код, который был в компоненте.

В целом хорошая статья про рефакторинг react-компонентов. Не без субъективных вещей, как и любой нетривиальный рефакторинг


https://alexkondov.com/refactoring-a-messy-react-component/

#development #javascript #react #refactoring

Vitale - Live notebooks in VS Code for JavaScript or TypeScript, web development, and AI experimentation

Vitale - удобный notebook, работающий в VSCode с использованием JS и TS. Я не особо в курсе как корректно перевести notebook в контексте инструмента. Notebook - это категория инструментов, позволяющих вам блочно описывать какой-то код, исполнять его, визуализировать результаты или передавать результат исполнения одного блока в другие блоки. Такие инструменты популярны в академической среде и в продуктовой аналитике. Хотя, лично я думаю, что средней руки тимлид или ведущий разработчик тоже смог бы извлечь много пользы из такого инструмента

Ну так вот, Vitale - это новый notebook, который позволяет писать блоки кода на JS и при этом дает полный DX от VSCode. Звучит и выглядит очень круто и я обязательно поставлю себе эту вундервафлю по выходу из отпуска. Я как раз недавно искал что-то похожее, но не смог найти хорошего решения, а тут вот Vitale вышел.

Что показано на лендосе с Vitale:
- Возможности работы с кодом в режиме REPL
- Возможности визуализации через React
- Хождение в API
- Работа с AI моделями от Github

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


https://githubnext.com/projects/vitale/

#development #javascript #react #notebook #repl

Дайджест за 2024-08-13 - 2024-08-16

How we deleted 4195 code files in 9 hours
Вы наверное уже не раз слышали, как компании проводят внутри себя хакатон по какой-то теме, когда команды в короткий промежуток сфокусированной работы стараются создать какую-то крутую ценность. Есть даже багатоны - это когда команды собираются исправлять баги в продукте. И вот в статье описывается новый вид хакатона - клинатон (cleanathon). Это когда цель хакатона - вычистить систему от всякого старья - легаси кода, документов, джоб в пайплайне

Задумка достаточно интересная. В статье описывается, как запускать клинатон в компании, что можно чистить и как считать очки (чтобы был соревновательный дух) и как клинатон прошел в компании автора статьи

Reactile
Reactile - инструмент для организации UI приложения в виду рабочих столов с виджетами. От вас - виджеты в виде React-компонентов, от Reactile - удобный интерфейс для управления виджетами.

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

Common Sense Refactoring of a Messy React Component
Статья про рефакторинг запутанного реакт-компонента. В статье приводится огромный реакт-компонент, в котором очень много логики и она действительно запутанная. Автор по шагам показывает, как можно сделать рефакторинг такого компонента.

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

Vitale - Live notebooks in VS Code for JavaScript or TypeScript, web development, and AI experimentation
Vitale - удобный notebook, работающий в VSCode с использованием JS и TS. Я не особо в курсе как корректно перевести notebook в контексте инструмента. Notebook - это категория инструментов, позволяющих вам блочно описывать какой-то код, исполнять его, визуализировать результаты или передавать результат исполнения одного блока в другие блоки. Такие инструменты популярны в академической среде и в продуктовой аналитике. Хотя, лично я думаю, что средней руки тимлид или ведущий разработчик тоже смог бы извлечь много пользы из такого инструмента

Ну так вот, Vitale - это новый notebook, который позволяет писать блоки кода на JS и при этом дает полный DX от VSCode. Звучит и выглядит очень круто и я обязательно поставлю себе эту вундервафлю по выходу из отпуска. Я как раз недавно искал что-то похожее, но не смог найти хорошего решения, а тут вот Vitale вышел.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Frontend Security Checklist

Небольшая статья-чеклист про безопасность в вебе.

Разобраны следующие области: XSS, CSP, CSRF, IDOR, Environment Variables. Для каждой из них приводится что это такое, как с этим работать и примеры корректной реализации на JS.


https://www.trevorlasn.com/blog/frontend-security-checklist/

#development #javascript #security #xss #csp

Node.js Best Practices - 2024

Вышло обновление лучших практик Node.js для 2024 года. Обновлены многие пункты, добавлены новые, а также обновлены рекомендуемые библиотеки и решения

https://github.com/goldbergyoni/nodebestpractices/

#development #javascript #nodejs #bestPractices

Процесс, который продолжал умирать

Статья про поиск причины регулярного падения node.js приложения. Написано в нуарном детективном стиле, поэтому читается достаточно интересно. А т.к. это перевод, то некоторые фразы заставляют улыбнуться (об этом дополнительно напишу в конце)

В чем проблема: была компания, у которой раз в 3-4 часа умирал node.js процесс. Статья рассказывает, как автор искал причину такого поведения

Для управления приложениями в компании используется pm2 (тут даже я удивился). PM2 забирает на себя весь менеджмент управления приложениями, но также он известен своими приколами (например, в моей личной практике - отправлял запросы в умерший процесс). В данном случае анализ логов pm2 показал, что приложение рестартует из-за слишком большого потребления памяти. Получается, причина падения - утечка памяти

Далее автор наглядно показывает, как найти утечку памяти в приложении. Запускаем приложением => снимаем снапшот памяти => даем нагрузку => снимаем новый снапшот памяти => сравниваем и находим утечку

В данном случае, в проекте давно не обновляли moment.js, в котором была утечка памяти, пофикшенная в 2020 году.

Ну и, как обещал, жемчужина перевода нуар детектива про разработку с английского на русский - "Это Moment.js. Он истекает памятью, как резаная свинья"

https://habr.com/ru/companies/ruvds/articles/832752/

#development #javascript #nodejs #memoryLeak #performance #pm2

Анимации Hover и эффекты Blur: Полный гид по созданию динамических карточек

Небольшая чисто практическая статья про то, как сделать красивый эффект подсветки карточки. Автор показывает, как можно создать карточку, у которой по ховеру будет подсвечиваться бекграунд как будто там неон (чисто мое субъективное восприятие)

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

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

https://habr.com/ru/articles/836308/

#development #css #blur #javascript

How to compose javascript function that take multiple parameters - the epic guide

Очередная крутая статья от James Sinclair про композицию JS функций, у которых несколько параметров.

Для композиции функций с несколькими аргументами рассматриваются несколько техник:
1. Композировать данные в структуры (массивы или объекты)
2. Применять Partial Application
3. Как следствие предыдущего пункта - применять технику каррирования
4. Использовать ap() для решения проблемы одновременного чтения и записи значения
5. Использовать flatMap() для проблемы конфигов

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

const sum = (a,b) => a+b
const sumForCompose = ({a,b}) => sum(a,b)

const result = compose(
   sumForCompose,
   () => ({
     a: getValueA(),
     b: getValueB()
   })
)

Partial Application - одна из техник функционального программирования, которая заключается в создании прокси-функции, которая принимает аргументы частями

const sum = (a,b) => a+b
const sumForCompose = (a) => (b) => sum(a,b)

const result = compose(
   sumForCompose(getValueA()),
   getValueB()
)

// Либо через .bind
const result = compose(
   sum.bind(null, getValueA()),
   getValueB()
)

Каррирование (Currying) - еще одна техника из функционального программирования, напрямую связанная с PartialApplication. PartialApplication - для функции с 4 аргументами можно представить разными способами:

const sum = (a,b,c,d) => a + b + c + d
const partialApplicationVariant1 = (a,b,c) => (d) => sum(a,b,c,d)
const partialApplicationVariant2 = (a,b) => (c, d) => sum(a,b,c,d)
const partialApplicationVariant3 = (a) => (b, c) => (d ) => sum(a,b,c,d)

Т.е. это в целом паттерн разбиения вызова функции на несколько вызовов в той конфигурации, которая нужна нам

Каррирование же это паттерн разбиения вызова функции, когда за 1 вызов мы передаем 1 аргумент (хотя есть варианты когда можно передавать сколько угодно аргументов, а исходная функция вызовется только тогда, когда наберется нужное количество аргументов)

const sum = (a,b,c,d) => a + b + c + d
const curriedSum = a => b => c => d => a + b + c + d

Часто, когда мы работаем с данными, нам надо взять данные из одного поля объекта, преобразовать их и установить в другое поле объекта. Для композиции такого паттерна есть ap

const ap = (binaryCurriedFn) => (unaryFn) => (value) => binaryCurriedFn(value)(unaryFn(value));

Как это работает. Например, у нас есть объект, с полями a и b и надо просуммировать в result

binaryCurriedFn - это функция, которая умеет устанавливать новое поле. В нашем случае

const setResult = obj => value => ({...obj, result: value})

unaryFn - функция, которая высчитывает какое-то значение их полей объекта. В нашем случае

const sum = ({a,b}) => a + b

Теперь с помощью применения ap, мы можем получить функцию, которая считает поля объекта a и b и запишет их сумму в поле result

const setResult = obj => value => ({...obj, result: value})
const sum = ({a,b}) => a + b
const sumABtoResult = ap(setResult)(sum)

И теперь можно это использовать для обработки объектов

const arr = [{a:1, b:2}, {a:2, b:3}]
arr.map(ap(setResult)(sum))

Теперь имея в своем арсенале getter, transformer, setter и ap, можем завести примитив getSet

const getSet = (setter) => (getter) => (transform) => ap(setter)(compose(transform, getter));

flatMap и flip я оставляю на самостоятельное изучение, потому что а) там сложно б) я подошел к лимиту длины поста в телеге :)

Рекомендую статью к прочтению не только любителям ФП, но и вообще всем т.к. композируемость ценится не только в ФП

https://jrsinclair.com/articles/2024/how-to-compose-functions-that-take-multiple-parameters-epic-guide/

#development #javascript #functionalProgramming #composition #recommended