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

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

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

```

function Form() {
const [formData, setFormData] = useState({ name: '' });
return (

function Input({ name, setFormData }) {

};

```

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

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

```

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

function Input({ name, onChangeName }) {

};

```

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

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

#development #javascript #react #antiPatterns

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 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

Дайджест за 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 выпускает радар, который показывает, какие технологии и инструменты они используют, какие тестируют, от каких отказываются. К каждой практике есть подробное описание про практику и причины попадания в определенную зону радара

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

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

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

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-11-25 - 2024-11-29

Uncontrolled or controlled: A matter of perspective
Статья, разбирающая смысл термином Controlled Component и Uncontrolled Component. В целом, ничего нового, но разбор короткий и понятный

Давайте разберем на небольшом примере

Adopting the compiler in Sanity Studio
Sanity Studio - приложение для создания и редактирования контента (не до конца понял каокго) с режимом совместной работы и постоянной синхронизацией. Приложение реализовано на React и команда решила попробовать подключить react compiler в свой проект.

Если совсем коротко: Sanity Studio подключили react compiler и он обнаружил проблемы в коде и ускорил рендер приложения.

Storybook 8.4
Вышел Storybook 8.4. Основные фичи: улучшения компонентных тестов, уменьшение размера бандла, поддержка svelte 5, поддержка React Native, поддержка тэгов в историях

Теперь давайте разберем по-подробнее

Will we care about frameworks in the future?
Заметка об использовании AI в разработке и о том как это может повлиять на индустрию. Здесь только мысли, без примеров кода или каких-то серьезных аргументов. Но мысли, подобные описанным в статье, в последнее время посещают и меня.

Нужны ли нам фреймворки, если большинство кода будут писать нейронки, а они спокойно пишут код и без фреймворков ? Фреймворки решают разные проблемы, но многие из них связаны в первую очередь с когнитивными ограничениями человека. У нейронок нет таких ограничений (есть правда другие, но не об этом разговор). Нейронке норм копипастить код, или напрямую работать с DOM, вместо инициализации кучи обвязки из фреймворков. Нейронка не боится писать бойлерплейт. Мы - люди, так не делаем - мы стараемся не дублировать логику и использовать высокоуровневые абстракции, чтобы снизить когнитивную нагрузку.

LLMs as a tool for thought
Еще одна статья о нейронках. На этот раз еще менее техническая, чем предыдущая.

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

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

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

LLMs as a tool for thought

Еще одна статья о нейронках. На этот раз еще менее техническая, чем предыдущая.

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

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

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

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

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

https://wattenberger.com/thoughts/llms-as-a-tool-for-thought

#development #llm #thoughts

JS Dates Are About to Be Fixed

Статья, объясняющая грядущие изменения работы с датами в JS. Работа с датами в системах, где нужно учитывать часовой пояс - это всегда боль. Мой любимый пример, с одной из прошлых работ: сотрудник агенства недвижимости работает из Владивостока, само агенство недвижимости зарегистрировано в Казани, а объекты недвижимости продает в Екатеринбург. Вопрос: как отображать время работы менеджера в интерфейсе?

Новое предложение как раз решает эту проблему, добавляя Temporal.ZonedDateTime, в которой кроме, собственно, времени, также хранится и таймзона и календарь (Грегорианский например)

Более того, новое API, кроме таймзон и календаря, будет иметь удобные методы для работы с ним. Например, сравнения

```
const one = Temporal.ZonedDateTime.from('2020-11-01T01:45-07:00[America/Los_Angeles]');
const two = Temporal.ZonedDateTime.from('2020-11-01T01:15-08:00[America/Los_Angeles]');

Temporal.ZonedDateTime.compare(one, two);

```

https://docs.timetime.in/blog/js-dates-finally-fixed/

#development #javascript #Date #proposal

docs.timetime.in

JS Dates Are About to Be Fixed | TimeTime

Why I’m excited about the new Temporal API in JavaScript: finally, easy and accurate date handling with time zones using ZonedDateTime. Say goodbye to the headaches of traditional Date objects.