Technology Radar | October 2024

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

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

Что нового и интересного я увидел там для себя

Очень много про AI и LLM:
- Using GenAI to understand legacy codebases
- Small language models
- Synthetic data for testing and training models
- LLM as a judge
- Function calling with LLMs
- Dynamic few-shot prompting
- On-device LLM inference
- Structured output from LLMs
- FastChat
- Software engineering agents (например Copilot Workspace)

Все эти штуки либо в зоне бест-практисов, либо в зоне перспективных
Однако одна штука уехала в зону "надо выбрасывать", а именно "Replacing pair programming with AI". Чтож, теперь есть и вердикт от thoughtworks, что copilot не может заменить человека для парного программирования

Про практики:
- Domain storytelling - практика для фасилитации старта построения домена для DDD
- Observability 2.0 - переход к единому подходу к обсервабилити, вместо использования кучи разных
- Continuous deployment и 1% canary перешли в бест-практисы

Из того, что более менее связано с вебом:
- Component testing - сразу попало в бест-практисы. Под компонентными тестами имеются в виду тесты компонентов в jsdom. Использование реального браузера слишком медленное и нестабильное.
- GraphQL for data products - GraphQL в радаре с 2019 года, но вот оказалось что GraphQL весьма неплох для получения данных из больших хранилищ данных. Более того, graphQL удобен для нейронок т.к. есть схемы и понятное апи для доставания данных
- Spinkube - опен-сорс серверлесс рантайм для WASM в k8s
- PGLite - wasm реализация PostgreSQL
- Rspack - добавлен как перспективный сборщик фронтенд проектов
- tsoa - это проект, который предлагает использовать TS как единую точку правды о контрактах API и генерировать swagger на основе ts. Плюсы использования TS: это ЯП, в котором удобно работать со структурами и типами, и в который легко войти. Также можно использовать все практики для кода (бранчевание, версионирование, линтинг и тд)



Инструменты:
- Zed - редактор на Rust от создателей Atom. Поддерживает много языков программирования, AI и совместную работу. Но пока рано говорить что Zed может заменить vscode.
- Warp - терминал для macos и linux. Я уже писал о нем в канале - это очень удобный терминал. Использую его уже давно и пока нравится. Основная фича, на мой взгляд, это просто крутой DX - это терминал в котором удобно работать. Но еще есть AI, сниппеты и еще куча всякого вокруг, но я это не использовал
- Raycast - ланчер для macOS, который умете запускать программы, искать файлы, запускать автоматизированныеп задачи
- Mockoon- опен-сорсный тул для мокирования. Умеет работать с OpenAPI
- GitButler - простой и удобный git client
- Difftastic - тула для показа diff, которая учитывает контекст. Например, когда вы смотрите обычный дифф (например в том же гите) кода как дифф текста, то вы наверняка сталкивались с тем, что дифф неправильно понял, например, рефакторинг. Или просто показывает много шума (вы добавили точку с запятой - это супер безопасное изменение, но показывается ровно также как обычное изменение). Diffstatic учитывает контекст и убирает весь шум. Я пока не пробовал, но звучит круто (если еще и рефакторинги в TS будет понимать - будет ваще пушка) и мой коллега уже юзает и пока хвалит (пользуясь случаем - привет Серёга 👋)


https://www.thoughtworks.com/radar

#development #thoughtworks #techradar

Дайджест за 2024-12-02 - 2024-12-05

Conditional Props in React Using Type Discrimination
Хорошая вводная статья про Type Discrimination в Union в typescript. Это паттерн, который позволяет выделять разные типы объектов по какому-либо полю

Например, у вас есть объект юзера, но у него разные свойства в зависимости от его роли - админ или простой чел

Overflow Clip
Хорошая статья про то, как работает overflow в css. Наверное, каждый фронтендер использовал это свойство для обрезки контента или чего-то подобного. С одной стороны - все просто, с другой, вряд ли кто-то глубоко погружался в то, какие возможности вообще есть у этого функционала.

В данной статье представлены крутые интерактивые примеры использования overflow: clip, которые позволяют сделать то, что сложно (или невозможно) сделать с помощью overflow: hidden.

typescript advent и adventofcode
Снова декабрь. Снова адвенты. Выделяю 2 адвента, о которых знаю: адвент по typescript и advent of code.

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

Technology Radar | October 2024
Вышел новый выпуск радара технологий от thoughtworks. Напомню, что это такое: периодически компания thoughtworks выпускает радар, который показывает, какие технологии и инструменты они используют, какие тестируют, от каких отказываются. К каждой практике есть подробное описание про практику и причины попадания в определенную зону радара

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

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

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

proposal-import-sync

Пришел апдейт по пропозалам в EcmaScript. Внезапно для себя увидел там динамический синхронный импорт :О . Пока еще в stage 1, т.е. все еще может сильно поменяться.

Кейсы использования из пропозала

Синхронная загрузка кода, который уже должен быть загружен

import 'app';

// this will always work if 'app' has been loaded previously
const app = import.sync('app');

Если модуль еще не загружен (или код не выполняется в top-level await), то такой вызов синхронного импорта кинет исключение.

Условная загрузка

let fs;
try {
  fs = import.sync('node:fs');
} catch {}

if (fs) {
  // Use node:fs, only if it is available
}

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

https://github.com/tc39/proposal-import-sync

#development #javascript #proposal

React 19 is now stable!

React 19 можно использовать в проде. С момента публикации бетки доки про 19 реакт в доке появилось 2 изменения: улучшения в Suspense и новое статичное API в React Dom

Улучшения Suspense заключаются в том, что теперь, если необходимо отрендерить фолбек, то фолбек будет рендерится сразу, а не дожидаться рендера соседей по дом-дереву. Это улучшает user experience (и, как я помню, на это многие жаловались в github-ишуях react'а).

Новое статичное API для React DOM представляет собой методы для статической генерации сайтов prerender и prerenderToNodeStream. Это версия рендера, которая дожидается загрузки данных и только потом отдает разметку. Обычный же рендер серверных компонентов может сначала отдать разметку с фолбеками, а только потом дослать апдейт разметки когда данные загрузятся.

Кто уже обновился?

https://react.dev/blog/2024/12/05/react-19

#development #javascript #react #react19

State of Node.js Performance 2024

Новый бенчмарк по производительности новой версии Node.js по сравнению с предыдущими. В целом все как обычно: часть операций ускорилась, часть немного замедлилась. В основном, конечно, все стало быстрее

Если вы пишете высоконагруженные приложения на node.js, то вам точно стоит посмотреть. Можете, например, выяснить, что именно ваш код замедлится на 50% (например, если вы декодируете latin1) и надо подождать, пока команда node.js исправит это. Или наоборот, значительно ускорится и лучше быстрее обновляться.



https://nodesource.com/blog/State-of-Nodejs-Performance-2024

#development #javascript #nodejs #performance #benchmark

React Anti-Pattern: Stop Passing Setters Down the Components Tree

Короткая и немного скомканная статья про один из анти-паттернов в React - протекание абстракции из-за прокидывания в пропсы компонента функции, которая умеет много больше, чем занимается компонент.

Ну я слишком широко взял, автор сетует на прокидывание set-функции из useState в компоненты.

function Form() { 
    const [formData, setFormData] = useState({ name: '' }); 
    return (
        <div>
            {/* прокидываем в инпут колбек, который сетит ВСЮ форму*/}
            <Input name={formData.name} setFormData={setFormData} />
        </div> 
    ); 
};


function Input({ name, setFormData }) { 

    const handleInputChange = (event) => { 
     // обновляем только одно поле
        setFormData((prevData) => ({ ...prevData, name: event.target.value })); 
    }; 
    
    return <input type="text" value={name} onChange={handleInputChange} />;
};

В чем проблема такого кода: input получает функцию, которая позволяет установить стейт всей формы, а не только лишь значение поля формы. Это и есть протекание абстракции: знание о всей форме протекло в конкретное поле. Теперь, если потребуется изменение абстракции, например, рефакторинг на useReducer или использование какой-нибудь библиотеки для менеджмента форм, то придется править не только абстракцию формы, но и исправлять кучу файлов, куда асбтракция формы протекла.

Как должно быть в упрощенном примере:

function Form() { 
    const [formData, setFormData] = useState({ name: '' }); 
    const setName = (name) => setFormData({...formData, name})
    return (
        <div>
            <Input name={formData.name} onChangeName={setName} />
        </div> 
    ); 
};


function Input({ name, onChangeName }) { 

    const handleInputChange = (event) => {
     onChangeName(event.target.value) 
    }; 
    
    return <input type="text" value={name} onChange={handleInputChange} />;
};

Можно пойти еще дальше - вынести все в хук или контекст, но суть не в этом. Суть текущего поста не в том, как делать "правильно", а как не делать "неправильно" - не кидайте в компоненты "лишние" данные и функции.

https://matanbobi.dev/posts/stop-passing-setter-functions-to-components

#development #javascript #react #antiPatterns

Дайджест за 2024-12-17 - 2024-12-20

proposal-import-sync
Пришел апдейт по пропозалам в EcmaScript. Внезапно для себя увидел там динамический синхронный импорт :О . Пока еще в stage 1, т.е. все еще может сильно поменяться.

Кейсы использования из пропозала

React 19 is now stable!
React 19 можно использовать в проде. С момента публикации бетки доки про 19 реакт в доке появилось 2 изменения: улучшения в Suspense и новое статичное API в React Dom

Улучшения Suspense заключаются в том, что теперь, если необходимо отрендерить фолбек, то фолбек будет рендерится сразу, а не дожидаться рендера соседей по дом-дереву. Это улучшает user experience (и, как я помню, на это многие жаловались в github-ишуях react'а).

State of Node.js Performance 2024
Новый бенчмарк по производительности новой версии Node.js по сравнению с предыдущими. В целом все как обычно: часть операций ускорилась, часть немного замедлилась. В основном, конечно, все стало быстрее

Если вы пишете высоконагруженные приложения на node.js, то вам точно стоит посмотреть. Можете, например, выяснить, что именно ваш код замедлится на 50% (например, если вы декодируете latin1) и надо подождать, пока команда node.js исправит это. Или наоборот, значительно ускорится и лучше быстрее обновляться.

React Anti-Pattern: Stop Passing Setters Down the Components Tree
Короткая и немного скомканная статья про один из анти-паттернов в React - протекание абстракции из-за прокидывания в пропсы компонента функции, которая умеет много больше, чем занимается компонент.

Ну я слишком широко взял, автор сетует на прокидывание set-функции из useState в компоненты.

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

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

Remove Image Background

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

Сайт использует готовые модельки (на выбор даются 2 из выпадашки), которые скачиваются прямо в браузер (весят в пределах пары десяток мегабайт) и прямо в браузере запускаются через Transformer.js - библиотеку, которая позволяет запускать в JS различные модельки с huggingface.

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

https://bg.addy.ie

#development #javascript #TransformerJs #ai

FSD 2.1 или как «pages first» подход может ухудшить структуру ваших Frontend приложений

Вышло обновление Feature Sliced Design 2.1, в котором добавили сущность страниц и папку pages. Теперь вместо супер плоского списка в руте проекта код можно делить по страницам.

Статья по ссылке является частным мнением про нововведение (оценка фичи - негативная). В комментариях есть немного интересных комментариев

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

Один из главных минусов FSD, для меня, было игнорирование базового принципа декомпозиции. Например, у меня есть страница, на странице есть форма, у формы есть сложные поля. Эта иерархичная структура (страница => форма => поля) отлично ложится на тестовую модель, на описание архитектуры, на работу дизайнеров и она полностью отрицается FSD т.к. нельзя делать вложенные контексты. Ну, вот и pages появились. Осталось дождаться когда разрешат внутри делать вложенные контексты - тогда можно будет вернуться к рассмотрению FSD.

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

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

#development #javascript #fsd #featureSlicedDesign

Как мы мигрируем с JQuery на React

Неплохая статья про миграцию легаси кодовой базы с ASP + jquery на React. Люди, в целом, делятся на 2 типа: одни знают базовый способ как итеративно переписывать кодовую базу, а другие не знают и хотят все переписать. Для первых статья не принесет ничего принципиально нового, но можно посмотреть на интересные решения. Для вторых статья будет полезна как реальный пример итеративной миграции, где надо скрещивать новые и старые технологии.

У меня в свое время была похожая задача, но правда вместо ASP+jquery был php+jquery, но суть JS-фреймворка была примерно та же, что и у автоора в статье - были глобальные неймспейсы, в которых можно было регистрировать код и из которых можно было его доставать. Один из приколдесов этого всего был факт, что порядок подключения файлов был реально важен т.к. сначала модуль надо зарегистрировать, а только потом доставать.

Вернемся к статье: перескажу её коротко. Есть приложение на ASP+jquery. Оно большое, оно работает и развивается. Переписывать его единомоментно - это большие риски и придется вместо выпуска фич переписывать код (возможно с багами).

Код при этом организован в неймспейсы. Т.е. условно jquery компоненты существуют и достаются так

const combobox = new App.Components.Combobox({
  container: document.querySelector('#someDiv'),
  props: {}
});

Внутри эти компоненты описывались в react-like стиле

namespace App.Components {
 export interface ComboBoxProps {
  container: JQuery;
  items: ComboBoxItem[];
  renderOption: (item: ComboBoxItem) => JQuery;
 }
 
 export class ComboBox {
  constructor(private props: ComboBoxProps) {
   // создаём разметку и рендерим её в container
   this.container.append(this.render());
  }
 
  private render(): JQuery {
   const viewItems = this.props.items.map(this.props.renderOption);
   // ... создаём разметку
   return view;
  }
 
  setItems() { /* ... */ }
  enable() { /* ... */ }
  disable() { /* ... */ }
 }
}

Если мы хотим использовать современный тулинг вместо jquery и внедрять этот тулинг итеративно, то базовый хороший вариант - внедрить этот тулинг в эти неймспейсы. Что автор и делает: создается адаптер, который "склеивает" новый и старый подходы.

Создается адаптер, который скрывает, что он рендерит React-компонент

export async function renderAppHeader(props: AppHeaderProps, container: HTMLElement) {
    const { AppHeader } = await import('./components/AppHeader');
 
    return renderComponent({
        container,
        component: <AppHeader {...props} />,
        autoUnmount: true
    });
}

Который в коде используется примерно также, как использовался Combobox

myLib.renderAppHeader(document.getElementById('header-container'), {
 title: 'Cool App',
 // остальные пропсы ...
})

React-код при этом находится в отдельном репозитории и компилируется как UMD библиотека (чтобы быть глобально доступной). При этом встает проблема сборки html и вставки туда скриптов библиотеки. Страницы собирает .NET и самый простой способ менять ссылки на новые при каждом релизе компонентов - это пересобирать .NET проект. Способ ужасный, поэтому в .NET был написан код, который умеет работать с manifest.json webpack-а и понимает какие файлы необходимо отдавать.

Также интересен выбранный стейт-менеджер. Изначально стейт был в React Context'е и хуках, но потом было необходимо заиспользовать полноценный стейт-менеджер. Выбор пал на zustand, как более менее удобный и который можно использовать в старом коде, а не только в новом.

В общем, статья неплохая - не слишком глубокая и не слишком поверхностная.  

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

#development #javascript #habr #jquery #react #migration #ASPnet

Дайджест за 2024-12-23 - 2024-12-27

Remove Image Background
Addy Osmani сделал тул для удаления заднего фона с фотографий, который работает прямо в браузере. Сам тул не то чтобы сильно интересный или предоставляет какие-то уникальные функции, но интересен тем, как он сделан.

Сайт использует готовые модельки (на выбор даются 2 из выпадашки), которые скачиваются прямо в браузер (весят в пределах пары десяток мегабайт) и прямо в браузере запускаются через Transformer.js - библиотеку, которая позволяет запускать в JS различные модельки с huggingface.

FSD 2.1 или как «pages first» подход может ухудшить структуру ваших Frontend приложений
Вышло обновление Feature Sliced Design 2.1, в котором добавили сущность страниц и папку pages. Теперь вместо супер плоского списка в руте проекта код можно делить по страницам.

Статья по ссылке является частным мнением про нововведение (оценка фичи - негативная). В комментариях есть немного интересных комментариев

Как мы мигрируем с JQuery на React
Неплохая статья про миграцию легаси кодовой базы с ASP + jquery на React. Люди, в целом, деляться на 2 типа: одни знают базовый способ как итеративно переписывать кодовую базу, а другие не знают и хотят все переписать. Для первых статья не принесет ничего принципиально нового, но можно посмотреть на интересные решения. Для вторых статья будет полезна как реальный пример итеративной миграции, где надо скрещивать новые и старые технологии.

У меня в свое время была похожая задача, но правда вместо ASP+jquery был php+jquery, но суть JS-фреймворка была примерно та же, что и у автоора в статье - были глобальные неймспейсы, в которых можно было регистрировать код и из которых можно было его доставать. Один из приколдесов этого всего был факт, что порядок подключения файлов был реально важен т.к. сначала модуль надо зарегистрировать, а только потом доставать.

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

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

Чем заняться на новогодних каникулах

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

Этот пост для тех, кто составляет бэклог для чтения на год или на выходные. Рекомендую книги, которые прочел сам и которые будут полезны любому разработчику. Все книги ниже сильно рекомендую к прочтению.

------------------------

Про то, как писать хороший код

Роберт Мартин - чистый код (Clean Code)

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

Мартин Фаулер - 2 издание книги про рефакторинг
Искать так:
- Refactoring: Improving the Design of Existing Code (2nd Edition)
- Рефакторинг кода на JavaScript. Улучшение проекта существующего кода

Во втором издании все примеры кода написаны на JS. Книга описывает, какие приёмы рефакторинга существуют и как и когда их следует применять. Кроме самих рефакторингов также разбираются кейсы, где эти рефакторинги применяются по шагам. Книга полезна по двум причинам: дает готовые примеры безопасных рефакторингов и учит делать рефакторинг безопасно (мало знать про безопасные рефакторинги, надо уметь делать их безопасно)

Роберт Мартин - чистая архитектура (Clean Architecture)

Постоянно видите споры в интернетах про то, что на самом деле означает S в SOLID, но не можете влететь в него с двух ног и вас это расстраивает? Тогда эта книга для вас! В книге рассказываются как практики для написания кода (разделение ответственности и тд), так и практики по проектированию систем.

Философия разработки ПО
Как искать:
- Philosophy of software design, John K. Ousterhout

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

Принципы Юнит-Тестирования, Хориков Владимир

Примеры в книге написаны на C#, но общие принципы написания авто-тестов везде одинаковые. Книга очень хорошо описывает лучшие практики и антипаттерны автоматического тестирования, учит по шагам, как научиться писать хорошие тесты.

------------------

Про код закончил, перейду теперь к процессам и командам

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

Проект "Феникс". Как DevOps устраняет хаос и ускоряет развитие компании | Ким Джин, Бер Кевин
Буквально адаптация предыдущей книги к реальности в IT. Читать после Цели.

Deadline. Роман об управлении проектами | ДеМарко Том
Самый странный (с художественной точки зрения) бизнес-роман из всех в этой подборке. Если коротко, книга рассказывает о контр-интуитивных вещах про процессы разработки, менеджмент, команду и производительность. Читается порой сложно - я перечитывал этот роман 3 раза и каждый раз открывал его с новой стороны.

Пять пороков команды | Ленсиони Патрик

Бизнес-роман про 5 основных проблем, которые не дают команде стать командой. Кое где весьма спорно, но тем не менее, все чаще замечаю на практике, что идеи в книге верные.

--------

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



#note #books

Всех с наступающим новым годом 🎄

Желаю всем интересных проектов на работе, успехов в хобби и всего самого лучшего в личной жизни.

Встретимся в новом году

Electrobun

Electrobun - фреймворк для создания десктопных приложений на Typescript, который под капотом использует bun. В целом, из названия понятно, что это аналог Electron, но с использованием bun

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

https://electrobun.dev

#development #javascript #electron #bun #desktop

Refactoring with Codemods to Automate API Changes: часть 1

В блоге Мартина Фаулера появилась статья про кодмоды. Она еще не закончена (позднее будут апдейты), но уже достаточно интересна. Кодмод (codemod => code modification) - это инструмент для автоматического изменения кода.

В статье рассказывается, что такое Codemod, зачем он нужен и как сделать простейший Codemod на jscodeshift. Из нового для меня - в статье используется инструмент Hypermod, который позволяет в песочнице написать и посмотреть, как работает Codemod.

Как всегда в блоге Мартина Фаулера, все раскладывается по полочкам. Сначала описывается проблема, которая привела к созданию таких инструментов: иногда нужно сделать повторяющиеся изменения в коде проекта и не всегда это можно сделать простым find-and-replace или с помощью sed. Тут на помощь приходят кодмоды - они позволяют описывать изменения не в формате строка => строка, а в формате AST => AST, что намного гибче и позволяет учесть много разных кейсов.

Возможность работать с AST значительно упрощает рефакторинг. Я думаю, многие сталкивались с ситуацией, когда у вас уже есть какой-то интерфейс (библиотеки или модуля), который по-началу казался удобным, но контекст изменился и теперь следует делать по другому. Поменять интерфейс на более удобный с ходу не получается, т.к. нужно переписать кучу кода. Как раз тут на помощь и приходят кодмоды. Они позволяют вместе с изменением интерфейса изменить и вызывающий код.

В статье разбирается 2 примера:

Удаление уже неактуальных фиче-тоглов

Если вы разрабатываете через фиче-тоглы, то вы знаете о проблеме работы с тоглами:

Когда фича не готова, мы ее закрываем фиче-тоглом

const data = featureToggle('feature-new-product-list') ? { name: 'Product' } : undefined;

Когда фича готова и протестирована, надо удалить фиче-тогл

const data = { name: 'Product' };

Эту работу можно сделать с помощью кодмода на jscodeshift

module.exports = function (fileInfo, api, options) {
  const j = api.jscodeshift;
  const root = j(fileInfo.source);

  // Find ConditionalExpression where the test is featureToggle('feature-new-product-list')
  root
    .find(j.ConditionalExpression, {
      test: {
        callee: { name: "featureToggle" },
        arguments: [{ value: "feature-new-product-list" }],
      },
    })
    .forEach((path) => {
      // Replace the ConditionalExpression with the 'consequent'
      j(path).replaceWith(path.node.consequent);
    });

  return root.toSource();
};

Рефакторинг компонента Avatar

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

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

+ import { Tooltip } from "@design-system/tooltip";
import { Avatar } from "@design-system/avatar";

const UserProfile = () => {
  return (
-    <Avatar  image="/juntao.qiu.avatar.png" name="Juntao Qiu/>
+    <Tooltip content="Juntao Qiu">
+      <Avatar image="/juntao.qiu.avatar.png" />
+    </Tooltip>
  );
};

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

https://martinfowler.com/articles/codemods-api-refactoring.html

#development #javascript #refactoring #codemod

You don't need Next.js

История команды ComfyDeploy о том, как они переехали с Next.js на чистый React. Статья убер короткая, но кейс интересный.

Что дал переезд на чистый React:
- Ускорение сборки с 3 минут до 18 секунды
- Хот релоад до 200мс
- Все в команде стали счастливее

Теперь перейдем к кейсу. ComfyDeploy - это опен-сорс проект, приложение в котором есть и бекенд и фронтенд. Проект столкнулся со следующими проблемами:
- Пришел счет от Vercel на $2000 от использования приложения одним юзером. (тут я не до конца понял кому пришел счет - юзеру, который пошел в ишуи проекта жаловаться, или самом проекту, но в целом понятно что это много)
- Тестировать приложение сложно
- Скорость сборки очень медленная
- Любое микроизменение при локальной разработке приводит к полному релоаду страницы

Next.js это мощный фулстек фреймворк, но он также несет с собой сложности, с которыми нужно бороться при росте приложения. В общем, автор дошел до точки, когда исправление небольшой опечатки требовало ожидания 7 минут сборки и решил отказаться от Next.js и перейти просто на React, т.к. большинство фичей Next ему были не нужны.

В статье есть гифки, где сравнивается открытие страницы при старте дев-сервера на next.js 15 с режимом turbo и чистым React. Победил React - 1.67 секунды против 10 секунд. Сравнение не совсем честное т.к. пока автор переводил проект на React, он удалял еще всякое ненужное по пути (старые фичи, неиспользуемые библиотеки).

Что автор потерял от отказа от Next.js:
1. Пришлось разделить кодовые базы бекенда и фронтенда (не сказал бы конечно, что это минус)
2. Потеряли фичи кэширования из Next.js, пришлось делать кэширование руками
3. Потеряли статическую генерацию, теперь приходится больше думать о сплитовании чанков. Но зато теперь нет проблем с кликами по элементам, которые уже отрендерены, но еще не работают
4. Потеряли "магию" серверных компонентов.


https://www.comfydeploy.com/blog/you-dont-need-nextjs

#development #javascript #nextjs #react

Node’s new built-in support for TypeScript

Node.js, начиная с версии 23.6.0, поддерживает TS без прокидывания каких-либо флагов. Dr. Axel Rauschmayer в своем блоге рассказывает, как использовать TS в Node.js без компиляции, какие есть ограничения, и что будет с этой фичей в будущем.

Все основные ограничения связаны с тем, что Node.js не компилирует TS, а просто лишь вырезает типы из кода. Т.е. не получится использовать фичи TS - енамы, неймспейсы. Также нет поддержки TSX (что логично, т.к. нет поддержки JSX)

Также из интересного, при вырезании типов Node.js использует подход, описанный инженером из Bloomberg, когда типы вырезаются, оставляя после себя пробелы. Это позволяет не генерировать отдельные сормапы т.к. весь код остается на своем месте (включая и строчки и колонки)

Например:

function describeColor(color: Color): string {
  return `Color named “${color.colorName}”`;
}
type Color = { colorName: string };
describeColor({ colorName: 'green' });

Скомпилируется в

function describeColor(color       )         {
  return `Color named “${color.colorName}”`;
}

describeColor({ colorName: 'green' });

Что можно ожидать в ближайшем будущем:
- TS 5.8 будет предупреждать об использовании фичей, которые не поддерживаются простым вырезанием типов. Получается команда TS сама делает свой тулинг удобнее для тех, кто будет использовать вырезание типов. Это круто
- Уже в разработке фича по полноценной транспиляции TS в JS.

https://2ality.com/2025/01/nodejs-strip-type.html

#development #javascript #node #typescript

2024 JavaScript Rising Stars

Кто-то подвел итоги 2024 года в Javascript и выделил восходящие звезды (по сути выделили проекты, которые получили больше всего звезд на гитхабе за год). Звезды поделены по категориям: фреймворки, тулинг, Реакт, Бекенд, тестирование и так далее.

Есть достаточно интересные вещи. Например, в общем списке проектов:
- Excalidraw - достаточно популярная рисовалка
- Affine - аналог Notion
- Bruno - аналог postman (использую сам)
- n8n - low-code платформа (использую для публикации статьей в канал)
- Flowise - low-code платформа для LLM

В целом во многих категориях топ без каких-либо изумлений. Например, в стейт менеджерах:
- Zustand (недавно кстати начал юзать в одном пет-проекте, о нем позже еще напишу)
- Jotai
- XState
- Pinia
- Nano Stores

Однако, все равно рекомендую вам самостоятельно посмотреть весь список, возможно вы найдете что-то для себя. Лично я изучу пару инструментов (в основном связанных с LLM)



https://risingstars.js.org/2024/en

#development #javascript #yearResults

Дайджест за 2025-01-13 - 2025-01-17

Electrobun
Electrobun - фреймворк для создания десктопных приложений на Typescript, который под капотом использует bun. В целом, из названия понятно, что это аналог Electron, но с использованием bun

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

Refactoring with Codemods to Automate API Changes: часть 1
В блоге Мартина Фаулера появилась статья про кодмоды. Она еще не закончена (позднее будут апдейты), но уже достаточно интересна. Кодмод (codemod => code modification) - это инструмент для автоматического изменения кода.

В статье рассказывается, что такое Codemod, зачем он нужен и как сделать простейший Codemod на jscodeshit. Из нового для меня - в статье используется инструмент Hypermod, который позволяет в песочнице написать и посмотреть, как работает Codemod.

You don't need Next.js
История команды ComfyDeploy о том, как они переехали с Next.js на чистый React. Статья убер короткая, но кейс интересный.

Что дал переезд на чистый React:

Node’s new built-in support for TypeScript
Node.js, начиная с версии 23.6.0, поддерживает TS без прокидывания каких-либо флагов. Dr. Axel Rauschmayer в своем блоге рассказывает, как использовать TS в Node.js без компиляции, какие есть ограничения, и что будет с этой фичей в будущем.

Все основные ограничения связаны с тем, что Node.js не компилирует TS, а просто лишь вырезает типы из кода. Т.е. не получится использовать фичи TS - енамы, неймспейсы. Также нет поддержки TSX (что логично, т.к. нет поддержки JSX)

2024 JavaScript Rising Stars
Кто-то подвел итоги 2024 года в Javascript и выделил восходящие звезды (по сути выделили проекты, которые получили больше всего звезд на гитхабе за год). Звезды поделены по категориям: фреймворки, тулинг, Реакт, Бекенд, тестирование и так далее.

Есть достаточно интересные вещи. Например, в общем списке проектов:

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

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

A checklist for your tsconfig.json

Пост от Dr. Axel Rauschmayer, который объясняет основные опции в tsconfig и дает советы, какие опции следует указать в своем конфиге в разных случаях (в зависимости от типа приложения).

По сути, это переработка доки по tsconfig с комментариями. Тем не менее, все рассказано достаточно ёмко и понятно.

https://2ality.com/2025/01/tsconfig-json.html

#development #javascript #typescript #tsconfig