We Replaced Our React Frontend with Go and WebAssembly

Чуваки из Dagger переписали React на Go. Внимание, не повторять в домашних условиях. Команда Dagger столкнулась со сложностью - у них был интерфейс в вебе и интерфейс в терминале и необходимо было все UI-фичи дублировать в двух разных кодовых базах (собственно React и Go). Решение простое: переписать один из двух UI на ~~typescript~~ Go.

Выбор достаточно храбный, но обоснованный. Команда имеет широкую экспертизу в Go и слабую в web-e, поэтому принято решение попробовать переехать полностью на Go. Статья рассказывает о проблемах, с которыми столкнулась команда и что из этого вышло.

Ребята взяли Go-App - это тулинг для написания PWA-приложиков на go, с применением WASM.

Какие нюансы вскрылись при написании Go приложения для веба:
- Нужно было очень аккуратно оптимизировать потребление памяти. В проекте есть кейсы, когда требуется отрисовывать более 200 тысяч строчек логов, что может привести к развалу приложения.
- Go WASM оказался неповоротливым в обработке огромных объемов JSON, из-за чего пришлось менять архитектуру решения.
- WASM файл получился большим - 32 МБ. Даже после сжатия brotli он остается 4.6 МБ
- Думали, что будет сложно писать UI-компоненты, но оказалось что это не так
- Научились использовать npm библиотеки из Go-кода
- По сравнению с React, прямая работа с UI позволяет лучше оптимизировать код. Можно сделать много разных решений, замерить и выбрать лучшее.
- Дебаг средствами Go - удобен
- За бесплатно получили PWA приложение (в целом, могли и раньше воткнуть конечно)

Следует ли вам проделывать такое? Скорее всего нет. У Dagger специфичный юзкейс:
- Делают непростой UI. Далеко не каждому продукту нужно выводить сотни тысяч элементов на странице
- Команда из сильных go-разработчиков
- Требование синхронизации двух интерфейсов

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

https://dagger.io/blog/replaced-react-with-go

#development #javascript #golang #wasm

Дайджест за 2025-02-24 - 2025-02-28

Style-observer: JS to observe CSS property changes, for reals
В вебе относительно давно есть разные Observer'ы, с некоторыми из которых, кажется, столкнулся каждый - Mutation Observer и Intersection Observer. Но чего нам не хватает - это Style Observer. Статья от Lea verou про то, как сообщество решало задачу "реагировать на изменения в стилях" и как Lea Verou и другие неравнодушные люди сделали Style Observer

Первые решения этой задачи появились еще в 2018 году и было реализованы на полинге - JS код периодически запрашивал стили и реагировал на их изменения. Затем были сделаны решения, которые работали на основе селекторов и transitionstart. Затем в какой-то момент появился transition-behavior: allow-discrete, который позволяет делать более общие решения. На его основе и построен style-observer

Move on to ESM-only
Пора перестать делать пакеты с поддержкой CJS и работать только в ESM. Автор статьи 3 года назад писал гайд, как делать пакет с поддержкой ESM & CJS, но теперь считает, что сообщество и тулинг за эти 3 года ушли далеко вперед и от поддержки CJS можно отказываться.

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

The Popover API is now Baseline Newly available
Popover - это база. Теперь официально. Popover - это стандартизированное API для реализации всплывающих окон в браузере. Вообще Popover реализовали в Firefox еще в апреле 2024 года, но реализация оказалась проблемной для iOS и iPadOS - нельзя было закрыть Popover без уважения кликнув по свободному месту. Поэтому пришлось ждать свежего релиза сафари, чтобы сказать, что Popover - это база

Что это значит для нас: можно считать что Popover прекрасно работает с января 2025. Когда значительная часть пользователей перейдёт на браузеры с версией выше, чем выпущенные в январе 2025 года, можно будет использовать Popover по полной.

How to refactor code with GitHub Copilot
Github развивают свой Copilot и выпускают хорошие статьи по работе с ним. В данном статье рассказывается, как Copilot может помочь в рефакторинге.

Статья делится на несколько частей: что такое рефакоринг => как его начать => как сделать мелкий рефакторинг => как набросать план рефакторинга

We Replaced Our React Frontend with Go and WebAssembly
Чуваки из Dagger переписали React на Go. Внимание, не повторять в домашних условиях. Команда Dagger столкнулась со сложностью - у них был интерфейс в вебе и интерфейс в терминале и необходимо было все UI-фичи дублировать в двух разных кодовых базах (собственно React и Go). Решение простое: переписать один из двух UI на typescript Go.

Выбор достаточно храбный, но обоснованный. Команда имеет широкую экспертизу в Go и слабую в web-e, поэтому принято решение попробовать переехать полностью на Go. Статья рассказывает о проблемах, с которыми столкнулась команда и что из этого вышло.

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

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

Introducing RushDB: Zero-Config Instant Database for Modern Apps & AI Era

Ссылка от подписчика про разрабатываемый им продукт - RushDB. RushDB - это база данных, которую легко развернуть и начать использовать. Основная фишка - это то что БД забирает на себя организацию данных - нормализацию, лейблинг, организацию связей между сущностями. И это очень подходит для AI-решений - вы закидываете данные, БД сама все структурирует, а структуру и связи уже может использовать AI

Также все сделано для того, чтобы работа с БД была простой: есть SDK на typescript и python, можно селф-хостить, можно хостить в клауде, есть гарантии транзакций, возможность работать ничего не настраивая.

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

https://rushdb.com/blog/rushdb-the-zero-config-database-for-modern-apps-and-ai-solutions

#development #javascript #database #ai

The TypeScript Agent Framework

Mastra - фреймворк на Typescript для создания ИИ-агентов. Выглядит достаточно хорошо - поддерживает много разного: кастомные тулы, воркфлоу (и контроль их исполнения), RAG, память.

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

Например, вы хотите сделать код ревью своего МР-а. Как это делается с LLM - создается чат, дается контекст, кидается много файлов и на каждый просится фидбек. Как это делается с ИИ-агентом - вы строите агента, который умеет ходить в апи gitlab или github (и другие апи) для получения данных, в агенте настраиваете воркфлоу как делаются код-ревью. А дальше заходите в чат с ИИ-агентом и говорите "сделай код ревью моего последнего МР-а", а дальше ИИ-агент сам пройдется по всем инструментам и сценариям и сделает для вас код ревью

Возвращаемся к статье. Mastra - фреймворк для описания ИИ-агентов. Я прямо сейчас играюсь с LangChain.js для создания агента, но, видимо, попробую теперь и Mastra.

https://mastra.ai

#development #javascript #ai #aiAgents

Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite

Вышел Deno 2.2. Заехали прикольные фичи: поддержка из коробки sqlite и OpenTelemtry, улучшения линтера, поддержка QUIC (http3), улучшение совместимости с Nodejs API, а также различные работы по перформансу.

Я бы хотел отдельно выделить поддержку Open Telemetry в Deno. Open Telemetry - это крайне важна штука, для обеспечения observability ваших систем. Open Telemetry - это набор соглашений о том, как следует логировать операции в IT-системах. Обычно OT встраивается в фреймворки, либо вы сами подключаете ОТ и инструментируете свой код. Deno же сам инструментирует основные методы (console.log, fetch, Deno.serve), а все что надо инструментировать сверх - остается на вас.

Также в Deno встроен Open Telemetry Exporter - вам достаточно запустить Deno с режимом OT и указать ендпоинт экспорта OT вашего Deno-приложения и телеметрия польется в вашу целевую систему, где вы можете отслеживать все действия юзера.



https://deno.com/blog/v2.2

#development #javascript #deno #releaseNotes

Bundling Dependencies

Статья разбирает, стоит или не стоит бандлить зависимости в свои библиотеки.

Сначала статья разбирает, зачем вообще может понадобится бандлить зависимости, а затем разбирает, какие есть плюсы и минусы у пребандлинга и приводятся примеры библиотек, которые пребандлятся

Зачем может понадобится бандлить зависимости:
- Если у вас зависимости в CommonJS, а делаете решение для браузеров. В этом случае вам проще забандлить эту зависимость
- Вы зависите от очень большого пакета, но используете лишь малую часть. В этом случае можно забандлить малую часть, чтобы не заставлять всех юзеров тянуть огромную зависимость
- Внутренние зависимости. Например, у вас моно-репо и куча мелких пакетов-утилок. Проще их забандлить, чем заставлять юзеров тянуть десятки внутренних мини-пакетов
- Если есть цель быть dependency free или zero dependency

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

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

Примеры библиотек, которые пребандлятся:
- Vite - инструмент для сборки, который не используется напрямую в продакшне. Все зависимости пребандлятся, чтобы предоставить удобный опыт использования. Однако, теряется возможность обновлять зависимости Vite на стороне приложений. В будущем Vite планирует перестать бандлить все зависимости
- Storybook также бандлит свои зависимости. Причем, бандлинг начался относительно недавно и значительно улучшил свои перформанс метрики из-за этого, поэтому вряд ли Storybook прекратит бандлить свои зависимости

https://e18e.dev/blog/bundling-dependencies.html

#development #javascript #bundle

ESLint now officially supports linting of CSS

Eslint продолжает развиваться. Теперь он умеет линтить CSS, используя парсер CSSTree. Сделали хорошее базовое решение: пока есть малое количество встроенных правил, но при этом есть удобное АПИ для создания кастомных правил + есть АПИ для расширения синтаксиса CSS (например, есть готовый пресет для расширения синтаксиса для tailwind)

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

https://eslint.org/blog/2025/02/eslint-css-support/

#development #javascript #eslint #css

Дайджест за 2025-03-03 - 2025-03-07

Introducing RushDB: Zero-Config Instant Database for Modern Apps & AI Era
Ссылка от подписчика про разрабатываемый им продукт - RushDB. RushDB - это база данных, которая легко развернуть и начать использовать. Основная фишка - это то что БД забирает на себя организацию данных - нормализацию, лейблинг, организацию связей между сущностями. И это очень подходит для AI-решений - вы закидываете данные, БД сама все структурирует, а структуру и связи уже может использовать AI

Также все сделано для того, чтобы работа с БД была простой: есть SDK на typescript и pythin, можно селф-хостить, можно хостить в клауде, есть гарантии транзакций, возможность работать ничего не настраивая.

The TypeScript Agent Framework
Mastra - фреймворк на Typescript для создания ИИ-агентов. Выглядит достаточно хорошо - поддерживает много разного: кастомные тулы, воркфлоу (и контроль их исполнения), RAG, память.

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

Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite
Вышел Deno 2.2. Заехали прикольные фичи: поддержка из коробки sqlite и OpenTelemtry, улучшения линтера, поддержка QUIC (http3), улучшение совместимости с Nodejs API, а также различные работы по перформансу.

Я бы хотел отдельно выделить поддержку Open Telemetry в Deno. Open Telemetry - это крайне важна штука, для обеспечения observability ваших систем. Open Telemetry - это набор соглашений о том, как следует логировать операции в IT-системах. Обычно OT встраивается в фреймворки, либо вы сами подключаете ОТ и инструментируете свой код. Deno же сам инструментирует основные методы (console.log, fetch, Deno.serve), а все что надо инструментировать сверх - остается на вас.

Bundling Dependencies
Статья разбирает, стоит или не стоит бандлить зависимости в свои библиотеки.

Сначала статья разбирает, зачем вообще может понадобится бандлить зависимости, а затем разбирает, какие есть плюсы и минусы у пребандлинга и приводятся примеры библиотек, которые пребандлятся

ESLint now officially supports linting of CSS
Eslint продолжает развиваться. Теперь он умеет линтить CSS, используя парсер CSSTree. Сделали хорошее базовое решение: пока есть малое количество встроенных правил, но при этом есть удобное АПИ для создания кастомных правил + есть АПИ для расширения синтаксиса CSS (например, есть готовый пресет для расширения синтаксиса для tailwind)



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

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

Если вы вдруг хотите выступить на FrontendConf, но не уверены в своих скиллах или теме - зайдите 13го марта на стрим от FrontendConf, где программный комитет расскажет об интересных темах. От себя отмечу, что много раз уже выступал на FrontendConf и программный комитет всегда хорошо помогал как с выбором направления и темы для доклада, так и с подготовкой самого доклада. Поэтому не стесняйтесь заходить

Встреча потенциальных докладчиков с программным комитетом FrontendConf 2025

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

Приходите! Я уже восьмой год подряд провожу эту встречу (как же быстро растут чужие дети), расскажу, какой видим программу, и обсудим ваши идеи докладов.

Регистрация: https://conf.ontico.ru/event/join/open_fc2025-online.html

Подробнее про программу и форма подачи докладов: https://cfp.frontendconf.ru

TypeScript: the satisfies operator

Большой пост про satisfies оператор в TypeScript. Объясняется что такое satisfies оператор и какие основные юзкейсы у него есть

satisfies проверяет, что значение соответствует какому-то типу, не меняя тип значения.

Чтобы понять разницу между satisfies и as достаточно взглянуть на 1 пример, где as сделает тайпкаст, а satisfies укажет на ошибку

type Point = { x: number, y: number };
const point5 = { x: 2 } as const as Point; // OK
const point6 = { x: 2 } as const satisfies Point; // ERROR

В статье показываются юзкейсы, когда применение satisfies очень полезно для проверки на соответствие какому-то типу, но при этом тип переменной не меняется

Например, у вас есть конфиг для стилей

type TTextStyle = {
  html: string,
  latex: string,
};

const TextStyle  = {
  Bold: {
    html: 'b',
    latex: 'textbf',
  },
}

Если вы используете начнете описывать тип переменной TextStyle, то вы можете столкнуться с тем, что случайно сделаете тип более широким

type TTextStyle = {
  html: string,
  latex: string,
};

const TextStyle: Record<string, TTextStyle>  = {
  Bold: {
    html: 'b',
    latex: 'textbf',
  },
}
TextStyle.KEK // OK

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

Оператор satisfies тут как нельзя кстати

type TTextStyle = {
  html: string,
  latex: string,
};

const TextStyle  = {
  Bold: {
    html: 'b',
    latex: 'textbf',
  },
} satisfies Record<string, TTextStyle>
TextStyle.KEK // ERROR

В статье есть еще разные примеры использования оператора - рекомендую ознакомиться самостоятельно.

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

Например, satisfies может уточнить тип

type Robin = {
  name: 'Robin',
};

const robin1 = { name: 'Robin' };
// robin1.name имеет тип string
const robin2 = { name: 'Robin' } satisfies Robin;
// robin2.name имеет тип 'Robin'

https://2ality.com/2025/02/satisfies-operator.html

#development #typescript #satisfies

import-in-the-middle

import-in-the-middle - библиотека для патчинга экспортов ESM-библиотек. Достаточно интересная штука, которая должна использоваться с умом. Для работы библиотеки необходимо регистрировать её как загрузчик в node.js

node --loader=import-in-the-middle/hook.mjs my-app.mjs

Пример

import { Hook } from 'import-in-the-middle'
import { foo } from 'package-i-want-to-modify'

console.log(foo) // whatever that module exported

Hook(['package-i-want-to-modify'], (exported, name, baseDir) => {
  // `exported` is effectively `import * as exported from ${url}`
  exported.foo += 1
})

console.log(foo) // 1 more than whatever that module exported

Ограничения:
- Нельзя расширить экспорт библиотек новыми полями
- Модули, импортированные через require, не меняются
- Нельзя заафектить на модули, которые уже были зарезолвены через динамические импорты.

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

https://github.com/nodejs/import-in-the-middle

#development #javascript #library #esmodules

Запускаем Pong в 240 вкладках браузера

Вы видели челлендж "сделай игру, помещающуюся в 13кб", вы видели реализацию DOOM на всем чем можно. Но видели ли вы реализацию игры ping pong на фавиконках вкладок? Вот, можете посмотреть по ссылке

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

Если совсем коротко описывать решение то оно следующее:
- Отрываются 8 окон по 30 вкладок с помощью AppleScript
- Есть мастер-вкладка, есть вкладки-воркеры
- Коммуникация между вкладками построена на BroadcastChannel
- Мастер вкладка запускает игру когда дождалась загрузки всех вкладок-воркеров
- Затем мастер-вкладка отправляет воркерам, как им следует обновить фавиконку
- Рассчет того, какой вкладке нобходимо обновить фавиконку идет на основе хардкода размеров окон, фавиконок и всех отступов в Google Chrome




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

#development #javascript #pingPong

Обучение в стратоплане: обзор на первый модуль



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

Что мне понравилось:
Разобрали реально много моделей

---

Например, Модель Менеджмента по Адизесу. Модель предполагает что есть 4 основных стиля управления:
- P - Producer (производитель)
- A - Администратор
- E - Entepreneur (предприниматель)
- I - Интегратор

И на разных стадиях развития организации нужны руководители с разными стилями управления, которые кодируются так: pAeI - сильный администратор и интегратор.
Причем также Адизес интересно описал цикл развития организации - там 10 стадий, переходящих от старта к зрелости, после которой организация переходит к концу через аристократизм и бюрократизм.

---

Модель DISC - выделяет 4 ключевых психотипа личности, на основе того, как люди реагируют на события. В целом, недалеко ушло от 4 типов людей у Пифагора.

Мне в целом нравится мысль, что все люди - разные и даже один человек может быть разным в разных контекстах. Но, мое имхо, мне модель DISC не нравится:
- а) в базовом понимании - слишком упрощенная;
- б) в полном понимании - слишком сложная;
- в) не дает устойчивых результатов - сегодня модель определила вас как человека, нацеленного на результат, а через пару месяцев - как тихоню.

---

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


---

Модель Такмана - каждая команда проходит через 4 стадии:
- Формирование - все только начали работать вместе
- Шторминг - первые трения и конфликты, эффективность снижается, возможен роспуск команды
- Нормализация - группа пережила шторминг и выходит на производительность
- Эффективная команда

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

---

Были еще разные, но в рамки поста уже не влезет.

Кроме моделей рассматривали, как провести анализ организации и на чем следует фокусироваться:
- Цели
- Стратегия
- Процессы
- Команды
- Сотрудники
- Ожидания
- Смежные команды
- И многое другое

Тоже было весьма полезно. О чем-то уже знал, о чем-то не задумывался. Информацию дали структурировано.

Единственный минус обучения - большой фокус на командную работу в группах. Благо обучение идет среди IT-менеджеров т.е. все в одном контексте + у всех есть минимальные софт-скиллы. Но я такой формат не особо люблю - спонтанная 20-минутная групповая активность не заменяет нормальное обучение.

Короткий итог:
- Было реально полезно. Но в целом пошли по верхам
- Большой упор на работах в группах и вопросах
- Интересное коммьюнити. Получил немного новых знаний и примеров, общаясь в чате группы.


---

Если вас зацепил пост, то скоро (с 17 по 28 марта) Стратоплан будет проводить Антимарафон «Вредные привычки, мешающие вашей карьере». Название странное, но это 10 лекций скорее про хорошие привычки. Судя по описанию поговорят про обратную связь, про лидерство, про планирование работ. Среди спикеров есть крутые чуваки, которые всегда несут пользу в своих публичных выступлениях. Я их читаю и могу рекомендовать вам: Дима Болдырев, Роман Ивлев

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





#note #stratoplan

Migrating 160,000 Lines of Production Banking JavaScript to TypeScript with Zero Downtime

Статья про миграцию 160к строк кода с JS на TypeScript. Статья достаточно поверхностная и моментами странная.

Есть компания, это стартап про деньги на какой-то там ранней стадии (в оригинале seed-stage startup). Код запускается в двух рамтаймах: лямбды в AWS и GraphQL API в ECS. Т.к. стартап в сфере финансов, то необходимо перейти на TS (чтобы избегать глупых ошибок, которые будут дорого стоит) и сделать это без даунтайма

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

Как проводили миграцию:
- Сделали отдельный бранч в гите, где все файлы переименовали из .js в .ts.
- Словили тысячу уникальных ошибок
- По-немногу вводили корректные типы

Все это продолжалось 6 недель, после чего приступили к 2-3 дневному тестингу на стейдж-окружении. Причем тестировали на реальных кейсах. Т.к. приложение связано с деньгами - то переводили $1 между счетами

Из интересного - сделали поддержку запуска и JS и TS кода в скриптах запуска. Удобно для раскатки и отката


https://benhowdle.im/migrating-js-to-ts-zero-downtime.html

#development #javascript #typescript #migration

Дайджест за 2025-03-10 - 2025-03-14

TypeScript: the satisfies operator
Большой пост про satisfies оператор в TypeScript. Объясняется что такое satisfies оператор и какие основные юзкейсы у него есть

satisfies проверяет, что значение соответствует какому-то типу, не меняя тип значения.

import-in-the-middle
import-in-the-middle - библиотека для патчинга экспортов ESM-библиотек. Достаточно интересная штука, которая должна использоваться с умом. Для работы библиотеки необходимо регистрировать её как загрузчик в node.js

node --loader=import-in-the-middle/hook.mjs my-app.mjs

Запускаем Pong в 240 вкладках браузера
Вы видели челлендж "сделай игру, помещающуюся в 13кб", вы видели реализацию DOOM на всем чем можно. Но видели ли вы реализацию игры ping pong на фавиконках вкладок? Вот, можете посмотреть по ссылке

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

Обучение в стратоплане: обзор на первый модуль


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

Migrating 160,000 Lines of Production Banking JavaScript to TypeScript with Zero Downtime
Статья про миграцию 160к строк кода с JS на TypeScript. Статья достаточно поверхностная и моментами странная.

Есть компания, это стартап про деньги на какой-то там ранней стадии (в оригинале seed-stage startup). Код запускается в двух рамтаймах: лямбды в AWS и GraphQL API в ECS. Т.к. стартап в сфере финансов, то необходимо перейти на TS (чтобы избегать глупых ошибок, которые будут дорого стоит) и сделать это без даунтайма

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

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

upfetch - advanced fetch client builder

upfetch - библиотека для удобной работы с fetch. В целом API максимально похоже на fetch, но добавлены всякие фишечки для удобства работы: таймауты, хуки, валидация, удобная передача body и query и тому подобное

Проще всего сравнить код на fetch с кодом на upfetch

Ниже примеры из ридми проекта

Отправка query-параметров
fetch:

fetch(
   `https://api.example.com/todos?search=${search}&skip=${skip}&take=${take}`,
)

upfetch:

upfetch('/todos', {
   params: { search, skip, take },
})

Отправка body
fetch:

fetch('https://api.example.com/todos', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({ title: 'New Todo' }),
})

upfetch:

upfetch('/todos', {
   method: 'POST',
   body: { title: 'New Todo' },
})

Валидация по схеме

import { z } from 'zod'

const posts = await upfetch('/posts/1', {
   schema: z.object({
      id: z.number(),
      title: z.string(),
   }),
})

Хуки

const upfetch = up(fetch, () => ({
   onRequest: (options) => {
      // Called before the request is made, options might be mutated here
   },
   onSuccess: (data, options) => {
      // Called when the request successfully completes
   },
   onError: (error, options) => {
      // Called when the request fails
   },
}))

Настройка таймаута для всех запросов

const upfetch = up(fetch, () => ({
   timeout: 5000,
}))

Из интересного, возможность использовать другие fetch-compatible api

import { fetch, Agent } from 'undici'

const upfetch = up(fetch)

const data = await upfetch('https://a.b.c', {
   dispatcher: new Agent({
      keepAliveTimeout: 10,
      keepAliveMaxTimeout: 10,
   }),
})

https://github.com/L-Blondy/up-fetch

#development #javascript #library #github #fetch

React Scan

React Scan - инструмент, который находит проблемы в производительности React-приложений. Я не пробовал, но обещают сумасшедший DX - просто добавляете скрипт или устанавливаете браузерное расширение или запускаете cli, а инструмент вам скажет, какие конкретно компоненты требуют исправления перформанса.

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

Гифка в ридмихе вполне себе вдохновляющая, рекомендую попробовать.

Осталось докрутить интеграцию с LLM и исходным кодом, чтоб инструмент сразу предлагал как исправить проблему

https://github.com/aidenybai/react-scan

#development #javascript #react #library #github #performance

Speeding up the JavaScript ecosystem - Rust and JavaScript Plugins

Достаточно необычная статья в серии про ускорение JS-тулинга. Если помните, есть чувак, который заходит в разный опенсорс, находит там проблемы перформанса и ускоряет инструменты в сотни раз. Тем самым доказывания, что надо иметь прямые руки, а не переписывать все на Rust или Go

Текущая статья тоже о том, что не обязательно переписывать все на Rust.

В чем суть. Автор работает в Deno и в Deno есть свой линтер, который написан на Rust. Но никто не будет писать кастомные правила для фронтенд-проектов на Rust: фронтендеры не смогут, а растовикам это не интересно.

Если же реализовывать мостик между JS и Rust, то затраты на коммуникацию съедят все профиты от введения Rust. Например, если передавать AST-дерево файла checker.ts из исходников TS размеом в 610к AST-нод между Rust и JS в json-формате, то это займет почти 3 секунды. Достаточно много.

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

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

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-11/

#development #javascript #rust

Michigan TypeScript Founder Successfully Runs Doom Inside TypeScript's Type System

Не знаю зачем вам эта информация, но система типов в TS - Тьюринг полная. Если утрировать, это значит, что на ней можно написать любую программу. Ну вот чел и переписал DOOM на системе типов. Пара триллионов строк кода, эмуляция ОЗУ, процессора и другого железа, 100 гигов оперативки чтобы это запустить - и вот DOOM уже запустился у вас в vscode с 0.000001 FPS.

Статья содержит ссылку на репозиторий и около нуля технического контента. Какой-то видео-демки тоже нет.

https://socket.dev/blog/typescript-types-running-doom

#development #javascript #typescript