Управление зависимостями в Javascript заходит на новый виток? Работа с ES модулями без сборщиков

Хорошая статья, которая в начале рассказывает о том, как развивалась идея модулей и их импортирования в JS-экосистеме - от ручного указания скриптов и появления bower, до последних нововведений в NPM.

Вторая часть статьи посвящена реализации идеи написания приложения без использования бандлеров и пакетных менеджеров. API web'а достаточно сильно развилось за последние годы - там появилось много разных крутых штук, которые позволяют нативно использовать то, что раньше было доступно только через инструментарий. Автор показывает, как можно писать react-приложение с использованием JSX-разметки без дополнительных инструментов в виде сборщика и пакетного менеджера. Это, в целом, реально, но все еще недостаточно удобно в плане DX.

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

#development #javascript #esmodules #packageManagers #history

Vitest 2.0.0

Вышел Vitest 2! Если вы используете vitest - рекомендую подробно взглянуть на изменения. В целом там есть немного breaking-changes, немного фиксов багов и значительные работы по браузерному режиму работы vitest (как я понял - это режим работы, в которым тесты запускаются также в ноде, но в браузере появляется UI, позволяющий следить за прогоном тестов и как-то им управлять). Это режим, при котором тесты запускаются прямо в браузере, а не в nodejs

https://github.com/vitest-dev/vitest/releases/tag/v2.0.0

#development #javascript #vitest #release #releaseNotes

В node.js добавляют sqlite модуль

В Node.js добавили встроенный sqlite модуль - node:sqlite, пока что под флагом --experimental-sqlite. Давно пора было сделать что-то подобное т.к. sqlite есть буквально везде и рантаймам следует поддерживать его из коробки

Пример использования нового модуля

import { DatabaseSync } from 'node:sqlite';
const database = new DatabaseSync(':memory:');

// Execute SQL statements from strings.
database.exec(`
  CREATE TABLE data(
    key INTEGER PRIMARY KEY,
    value TEXT
  ) STRICT
`);
// Create a prepared statement to insert data into the database.
const insert = database.prepare('INSERT INTO data (key, value) VALUES (?, ?)');
// Execute the prepared statement with bound values.
insert.run(1, 'hello');
insert.run(2, 'world');
// Create a prepared statement to read data from the database.
const query = database.prepare('SELECT * FROM data ORDER BY key');
// Execute the prepared statement and log the result set.
console.log(query.all());
// Prints: [ { key: 1, value: 'hello' }, { key: 2, value: 'world' } ]

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

#development #javascript #nodejs #sqlite

Дайджест за 2024-07-16 - 2024-07-19

Кратко про основные техники кеширования в браузере
Вводная и простая статья про кеширование. Статья рассказывает о нескольких заголовках - Cache-Control , E-tag, If-Modified-Since и, внезапно, про Local Storage.

Все объяснения сопровождены примерами реализации на Node.js

Управление зависимостями в Javascript заходит на новый виток? Работа с ES модулями без сборщиков
Хорошая статья, которая в начале рассказывает о том, как развивалась идея модулей и их импортирования в JS-экосистеме - от ручного указания скриптов и появления bower, до последних нововведений в NPM.

Вторая часть статьи посвящена реализации идеи написания приложения без использования бандлеров и пакетных менеджеров. API web'а достаточно сильно развилось за последние годы - там появилось много разных крутых штук, которые позволяют нативно использовать то, что раньше было доступно только через инструментарий. Автор показывает, как можно писать react-приложение с использованием JSX-разметки без дополнительных инструментов в виде сборщика и пакетного менеджера. Это, в целом, реально, но все еще недостаточно удобно в плане DX.

Vitest 2.0.0
Вышел Vitest 2! Если вы используете vitest - рекомендую подробно взглянуть на изменения. В целом там есть немного breaking-changes, немного фиксов багов и значительные работы по браузерному режиму работы vitest

В node.js добавляют sqlite модуль
В Node.js добавили встроенный sqlite модуль - node:sqlite, пока что под флагом --experimental-sqlite. Давно пора было сделать что-то подобное т.к. sqlite есть буквально везде и рантаймам следует поддерживать его из коробки

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

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

Moving from express to fastify, pt 1

Статья от команды Val Town про то, зачем и как они мигрировали с express на fastify.

Express - это веб-фреймворк для Node.js, который был создан в 2009 году и позволял в 10 строчек поднять сервер, отдающий Hello World. В то время это было реально круто. Однако прошло 15 лет - экосистема JS сильно изменилась, а express почти не изменился - и в этом его главная проблема. Практически реальный пример, почему нужно быть agile :)

Первая большая боль - экосистема переехала на Typescript, а express - нет и в нем до сих пор неудобно писать типизированный код.

Вторая большая боль - команда Val Town захотела следовать современным лучшим практикам и решила сгенерировать из кода OPEN-API спеку для потребителей API. Для express есть несколько библиотек, реализующих генерацию OPEN API спеки, но их возможности весьма ограничены и у них не очень хороший DX. Эта боль неразрывно связана с предыдущей.

Третья проблема - это отсутствие адекватной поддержки аsync функций. Express появился задолго до появления аsync и до сих пор не поддерживает их из коробки. Хотя определенные подвижки наблюдаются в готовящейся 5-ой версии, но она уже долго не может зарелизится

Изо всех этих проблем Команда Val Town решила переехать на Fastity.
Чем обусловлен выбор fastify:
- Крутая экосистема с качественным плагинами
- Отличная документация
- Поддержка валидаций
- Поддержка аsync
- Интеграции инструментами мониторинга
- А главное, возможность плавной миграции благодаря пакету fastify/fastify-express

Val Town мигрировали своё приложение по роутам, пока наконец не перевели все роуты и теперь они предоставляют SDK скомпилированный из OPEN API (если я правильно все понял)

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

https://blog.val.town/blog/fastify/

#development #javascript #express #fastify #migration

Sneaky React Memory Leaks: How the React compiler won't save you

Sneaky React Memory Leaks: How the React compiler won't save you

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

import { useState, useCallback } from "react";

class BigObject {
  public readonly data = new Uint8Array(1024 * 1024 * 10);
}

export const App = () => {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const bigData = new BigObject(); // 10MB of data

  const handleClickA = useCallback(() => {
    setCountA(countA + 1);
  }, [countA]);

  const handleClickB = useCallback(() => {
    setCountB(countB + 1);
  }, [countB]);

  // This only exists to demonstrate the problem
  const handleClickBoth = () => {
    handleClickA();
    handleClickB();
    console.log(bigData.data.length);
  };

  return (
    <div>
      <button onClick={handleClickA}>Increment A</button>
      <button onClick={handleClickB}>Increment B</button>
      <button onClick={handleClickBoth}>Increment Both</button>
      <p>
        A: {countA}, B: {countB}
      </p>
    </div>
  );
};

Один из разработчиков React compiler сказал, что эта проблема решена в компиляторе. Автор проверил это и пришел к выводу, что проблема находится в квантовой суперпозиции - она и решена и не решена одновременно. Как такое может быть?

Конкретно этот кейс с большой переменной решился тем, что компилятор видит, что объект ни от кого не зависит и его можно агрессивно закешировать. Что он и делает

const bigData = useMemo(() => new BigObject(), [])

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

const bigData = new BigObject(`${countA}/${countB}`);

Вот так вот, проблема и решена (конкретный кейс) и не решена (в общем виде).

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

Поэтому важно следовать простым правилам:
- Пишите маленькие компоненты
- Пишите чистые компоненты
- Используйте кастомные функции и хуки
- Профилируйте память


https://schiener.io/2024-07-07/react-closures-compiler

#development #javascript #react #performance #memoryLeak #reactCompiler

What's coming next for ESLint

В апреле зарелизился ESlint 9.0.0. Это первый крупный релиз ESlint за почти 3 года и в этом релизе видно, что команда ESlint собирается активно развивать свой инструмент. Эта статья показывает, куда пойдет ESlint в ближайшем будущем.

2 года назад было принято решение, что ESLint должен поддерживать не только JS, но и другие языки. Чтобы достичь этого, требуется переделать ядро проекта. Сейчас эта переделка уже в работе и должны появится пакеты:
- eslint/js - все что связано с JS
- eslint/json - первый плагин, который позволяет подключить язык, отличный от JS
- eslint/markdown - переименовали eslint-plugin-markdown чтобы следовать общей схеме именования

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

Также в текущем ESLint есть архитектурные проблемы. Архитектура почти не менялась со времен первого релиза ESLint - 11 лет назад.
Текущие архитектурные проблемы:
- Синхронная логика в ядре. У сообщества большой запрос на добавления асинхронной логики.
- Ограниченное API. Публичное API очень ограничено, потому что оно не было создано с целью его активного использования. Вообще-то оно делалось для браузерной демки
- Отстуствие типизации
- Использование CommonJS

Команда ESLint выбирала между плавным рефакторингом и переписыванием ядра с нуля. И решил переписывать с нуля. Поэтому в скором времени мы можем ожидать:
- Новый репозиторий
- Современные пакеты
- Ядро, не привязанное к определенному рантайму
- Удобное и композируемое API
- Новая CLI

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

Штош, задача выглядит решаемой, пожелаем ребятам удачи.


https://eslint.org/blog/2024/07/whats-coming-next-for-eslint/

#development #javascript #eslint

es-toolkit

es-toolkit - очередная библиотека утилит, которая поддерживает современные тренды, высокопроизводительна, мало весит и типизирована.

Когда был тренд на то, что с новым стандартом языка нам больше не нужны утилиты (и, честно говоря, уже не помню когда я последний раз использовать что-то из готовых утилит кроме группировки и deepMerge). Но вот чел решил сделать свой библиотеку с утилками.

Что же он предлагает:
- es-toolkit предлагает современное исполнение широкоиспользуемых функций, таких как debounce, delay, chunk, sum, pick.
- В 2-3 раза быстрее лодаша
- Три-шейкается из коробки и на 97% меньше чем lodash es
- Отличная поддержка TS. Также предоставляются гварды, например isNotNil
- 100% тестовое покрытие


https://www.npmjs.com/package/es-toolkit

#development #javascript #library

Расширяем возможности мобильного приложения на WebView. Опыт Ozon Банк

Интересная статья от ребят из Ozon, где они коротко рассказывают, почему используют webview в приложении Ozon Банк и какие плюсы и минусы есть у такого подхода.

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

Какие плюсы видят в использовании webview:
- Синхронное обновление функционала на пользователей. Все пользователи одновременно получают весь функционал, чего практически нереально добиться для кросс-платформенной разработки
- Поддержка всех платформ небольшой командой
- Единый UI. Это улучшает восприятие пользователей, облегчает работу команде разработки и упрощает дизайн-ревью

Минусы:
- WebView требует загрузки ассетов. А значит, первое открытие экрана может быть долгим. Это конечно можно попробовать решать разными способами, но факт остается фактом - вы либо смиряетесь с тем, что первый раз экран долго грузится, либо делаете какую-то обвязку для менеджмента ассетов
- Низкая автономность. Если интернета нет - не будет работать и WebView. Это также решаемая проблема, но не совсем из коробки.
- Есть сложности с навигацией. Часть экрана построена как нативный UI (шапка и футер), часть - как WebView. При этом поверх WebView может открываться нативный модал. В таком гибридном приложении есть сложности с навигацией между экранами
- Из-за особенностей WebView на мобильных платформах, может случится такое, что приложение еще живет, а WebView была "остановлена" операционной системой

Из интересного в статье также рассказывается реализация коммуникации между JS и нативным кодом. Обычное взаимодействие асинхронное и делается так: нативный код инжектит в WebView JS, с которым может общаться код WebView и ожидать резолва промисов от этого API. Но иногда требуется синхронное взаимодействие, т.е. необходимо "подвесить" поток WebView. Для этого ребята сделали следующую штуку: они переиспользовали возможности prompt. По умолчанию это команда открывает модальное окно в браузере, в которое необходимо что-то ввести. Но ребята написали свой обработчик prompt и используют эту механику, когда нужно сделать какую-то синхронную коммуникацию



https://habr.com/ru/companies/ozontech/articles/828186/

#development #javascript #webview #ozon

Дайджест за 2024-07-22 - 2024-07-26

—————

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

—————


Moving from express to fastify, pt 1
Статья от команды Val Town про то, зачем и как они мигрировали с express на fastify.

Express - это веб-фреймворк для Node.js, который был создан в 2009 году и позволял в 10 строчек поднять сервер, отдающий Hello World. В то время это было реально круто. Однако прошло 15 лет - экосистема JS сильно изменилась, а express почти не изменился - и в этом его главная проблема. Практически реальный пример, почему нужно быть agile :)

Sneaky React Memory Leaks: How the React compiler won't save you

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

What's coming next for ESLint
В апреле зарелизился ESlint 9.0.0. Это первый крупный релиз ESlint за почти 3 года и в этом релизе видно, что команда ESlint собирается активно развивать свой инструмент. Эта статья показывает, куда пойдет ESlint в ближайшем будущем.

2 года назад было принято решение, что ESLint должен поддерживать не только JS, но и другие языки. Чтобы достичь этого, требуется переделать ядро проекта. Сейчас эта переделка уже в работе и должны появится пакеты:

es-toolkit
es-toolkit - очередная библиотека утилит, которая поддерживает современные тренды, высокопроизводительна, мало весит и типизирована.

Когда был тренд на то, что с новым стандартом языка нам больше не нужны утилиты (и, честно говоря, уже не помню когда я последний раз использовать что-то из готовых утилит кроме группировки и deepMerge). Но вот чел решил сделать свой библиотеку с утилками.

Расширяем возможности мобильного приложения на WebView. Опыт Ozon Банк
Интересная статья от ребят из Ozon, где они коротко рассказывают, почему используют webview в приложении Ozon Банк и какие плюсы и минусы есть у такого подхода.

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

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

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

В 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 постоянно выходят выпуски, рекомендую подписаться на подкаст/телегу, если вам нравится такой формат

С Максимом Сосновым @msosnovfeed мы познакомились 6 лет назад на FrontendConf, когда он впервые там выступал, а я впервые был в составе программного комитета. С тех пор мы ежегодно пересекались на конференциях, мне нравились разнообразные доклады Макса – и вот наконец я взял у него интервью.

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

Вишенкой на торте стало обсуждение новостного телеграм-канала Макса и его источников – получился ёмкий выпуск Frontend Weekend №182 о переходе из тестирования в разработку, популяризации FrontOps и ChatGPT – https://pc.st/e/t5vPKvBMq – и в ютубе – https://youtu.be/VQXTLLTaDEg