Development

Development

1854 bookmarks
Custom sorting
TwoPizzaTeam
TwoPizzaTeam

Статья в блоге Мартина Фаулера про 2 pizza team. В статье кратко рассказывается откуда пошел термин и что он вообще значит.

2 pizza team - это команда, которую можно накормить двумя пиццами (по крайней мере американскими, говорят они там большие). Этот термин пошел из Amazon т.к. там этот принцип и зародился. В переводе на обычные числа это обычно означает 5-8 людей, хотя Мартин Фаулер говорит что предел около 15 человек

2pizza team должна быть самодостаточной и автономной - она должна уметь выпускать и сопровождать продукт собственными силами (т.е. иметь все необходимые компетенции и уметь работать как продуктовая команда (строить гипотезы, понимать желания пользователя и переводить их в код)).

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

·martinfowler.com·
TwoPizzaTeam
React Query and React Context
React Query and React Context

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

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

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

·tkdodo.eu·
React Query and React Context
Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript
Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript

Статья на хабре про новый синтаксис using, который призван упростить работу с объектами, которые требуют исполнения кода при прекращении работы с ними (например, соединения к БД).

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

В целом новый синтаксис призван превратить это:

в это

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

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

Чтобы использовать эту фичу, resource должен реализовать у себя поле Symbol.dispose или Symbol.asyncDispose (в этом случае нужно использовать async using), в котором как раз будет реализовано освобождение ресурса

·habr.com·
Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript
How platform teams get stuff done
How platform teams get stuff done

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

Чем платформенные команды отличаются от продуктовых? Основное различие в определении пользователя. Для продуктовых команд пользователи - это внешние пользователи продукта. Для платформенных команд пользователи - это другие команды компании

Есть 3 стадии развития платформы:

  • Миграция на платформу
  • Использование платформы
  • Эволюция платформы

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

  • Завести задачу в продуктовую команду
  • Внедрить инженера платформенной команды в продуктовую (чтобы он сделал изменения). Это называется Tour of Duty
  • Сделать изменения самим. Тут есть 2 варианта - если продуктовая команда доверяет платформенной, то это паттерн Trusted Outsider и платформенная команда просто вносит изменения. Либо же продуктовая команда не доверяет внешним инженерам в достаточной мере и будет проверять, что они делают, тогда это Internal Open Source

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

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

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

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

·martinfowler.com·
How platform teams get stuff done
How React 18 Improves Application Performance
How React 18 Improves Application Performance
Статья про оптимизации перформанса, которые несет с собой React 18. В статье разбирают проблемы, которые может принести рендер React компонентов, и как их решает React 18 Первая большая фича - это Concurrent Render. React научился разделять рендер на важный и неважный, рендерить в фоне несколько ветвей react-дерева, останавливать рендер (например для обработки пользовательского ввода). React, таким образом, отошел от схемы работы "я рендерю, а весь мир подождет". При рендере "тяжелых" компонентов могло быть заметно проседание перформанса (в статье есть даже интерактивная демка). Теперь же эта проблема решена из коробки. Вторая большая фича - Transitions API. Она позволяет явно описать, какие изменения компонента "неважные", что позволяет React-у оптимизировать рендер Следующая большая фича - серверные компоненты. Про них уже много написано, в целом это позволяет а) не загружать часть кода на клиент б) серверные компоненты тратят ресурсы сервера, а не клиента Далее - Suspense. Хотя Suspense появился еще в 16 реакте, в 18 реакте он стал лучше т.к. нативно-интегрирован с фичами, описанными ранее Также в React появилась фунцкия `cache`, которая позволяет замемоизировать функция в рамках одного рендера. Т.е. если функция, обернутая в `cache`, была вызвана дважды в рамках одного потока рендера, то функция выполнится единожды. Но если функция вызывается в разных рендер-потоках, то будет вызвана несколько раз. Этот же механизм (как я понял) используется в серверных компонентах при загрузке данных через `fetch`. Решение за гранью добра и зла, на мой взгляд.
·vercel.com·
How React 18 Improves Application Performance
Testing the dark scenarios of your Node.js application
Testing the dark scenarios of your Node.js application
Обычно nodejs разработчики пишут авто-тесты на функционал: обрабатывают позитивные и негативные сценарии работы логики. Однако разработчики часто забывают про простые тесты, которые проверяют работу приложения вне конкретной функциональности В статье описываются, какие простые и короткие тесты стоит писать на любое node.js приложение. Хотя в целом это касается не только node.js, но эта статья посвящена именно node.js и есть несколько специфичных кейсов Какие тесты следует писать: - The zombie process test: проверка, что приложение закрывает текущий процесс, если случилось что-то непредвиденное. Если приложение не убивает свой процесс в случае, когда оно не смогло инициализироваться, то может сложится ложное впечатление, что приложение работает (процесс то запущен), когда оно не смогло стартовать - The observability test: проверка, на то что ошибки корректно уходят в логгер - The 'unexpected visitor' test - проверка на обработку непойманных исключений (`uncaughtException`) - The 'hidden effect' test - мы часто проверяем, что в случае успеха мы делаем какой-то сайдэффект (например, записываем данные в БД), но мы часто упускаем проверку, что в случае неуспеха мы НЕ выполняем этот сайдэффект - The 'overdoing' test - проверка, что функционал не делает лишний сайдэффект. Очень близко к предыдущему кейсу, но немного про другое: проверка, что в случае успеха, делаются только нужные сайдэффекты, а ненужные - не делаются - The 'slow collaborator' test - обработка таймаутов - The 'poisoned message' test - проверка на обработку "сломанной" структуры данных. Часто мы предполагаем, что у нас есть контракт и все ему следуют, но что если это не так? - Test the package as a consumer - мы пишем юнит-тесты на свои npm-пакеты, но это не гарантирует нам, что у пользователя все будет работать корректно. Например, мы можем криво сконфигурировать сборку. Поэтому следует проверять работу пакета с точки зрения пользователя - делая импорт пакета или вызывая его cli - The 'broken contract' test - еще 1 тест на сломанный контракт. Когда я описывал "poisoned message" я сразу поднял уровень абстракции до сломанного контракта. Эти 2 пункта про сломанный контракт, но немного различны в нюансах (там - про сообщения из шины событий, здесь - про доверие OpenAPI спеке)
·practica.dev·
Testing the dark scenarios of your Node.js application
putout: 🐊 Pluggable and configurable JavaScript Linter and code transformer
putout: 🐊 Pluggable and configurable JavaScript Linter and code transformer
Putout - новый линтер и модификатор кода. Это такой аналог Eslint, со своим видением того, как должен работать линтер. Из особенностей, которые сразу бросаются в глаза: очень сильно размыта грань между линтером и код-модом - есть правила, которые удаляют ненужные код, а есть правила, которые прям проводят рефакторинг (заменяют commonjs на esm). Также для написания своих плагинов предлагается использовать putoutscript - js-совместимый язык для плагинов Инструмент при этом очень модульный, в нем выделяются: движки, плагины, процессоры, операторы, форматтеры. Их очень много и все они поставляютя как разные пакеты. В общем, проект очень хорошо структурирован и декомпозирован. Также отдельный респект за документацию: Readme проекта очень хорош
·github.com·
putout: 🐊 Pluggable and configurable JavaScript Linter and code transformer
A case study on scroll-driven animations performance - Chrome Developers
A case study on scroll-driven animations performance - Chrome Developers
Команда Google Chrome представила новое API для анимаций на основе скрола. Один из самых популярных юзкейсов для таких анимаций - шакала прогресса чтения статьи в шапке сайта. Обычно это делается с помощью JS и у этого подхода есть очевидные минусы: JS нужно исполнять в главном потоке, что может привести к проблемам с производительностью. Команда Google Chrome добавила API, которое позволяет реализовать тоже самое на CSS. ``` @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } #progress { animation: grow-progress auto linear forwards; animation-timeline: scroll(block root); } ``` Тут конечно же встает вопрос "а что если мне нужна кастомная логика?". Команда Google Chrome это предусмотрела и дает API на JS ``` const progressbar = document.querySelector('#progress'); progressbar.style.transformOrigin = '0% 50%'; progressbar.animate( { transform: ['scaleX(0)', 'scaleX(1)'], }, { fill: 'forwards', timeline: new ScrollTimeline({ source: document.documentElement, }), } ); ``` Не уверен правда, что это API настолько же гибкое, как и возможности подписки на `scroll`. Но вообще добавление такого API в CSS позволяет декларативно и просто описывать разные интересные приколдесы.
·developer.chrome.com·
A case study on scroll-driven animations performance - Chrome Developers
Prettier 3.0: Hello, ECMAScript Modules! · Prettier
Prettier 3.0: Hello, ECMAScript Modules! · Prettier
Вышел prettier 3.0 Что нового: - Во первых, теперь висящая запятая по умолчанию будет ставится везде. Но можно сконфигурировать это поведение. - Сделаны дополнительные правила форматирования кода. Всякие странные edge кейсы типа 10 `??` к ряду и просто устранение разного форматирования в похожих кейсах. - часть API prettier стало асинхронным. Получается нужно, чтобы плагины к IDE и другим тулам научились работать с асинхронным API
·prettier.io·
Prettier 3.0: Hello, ECMAScript Modules! · Prettier
Component Party
Component Party
Сайт показывает через сниппеты кода, как основные сценарии реализованы в различных фреймворках. Особо ничего полезного, но выглядит интересно
·component-party.dev·
Component Party
Driver.js
Driver.js
Driver.js - библиотека для создания ознакомительных онбордингов для пользователей сайта. Позволяет с помощью небольшого конфига создать анимированный тур по сайту с подсветкой элементов и показом объясняющего материала к этим элементам
·driverjs.com·
Driver.js
Decoupling UI and Logic in React: A Clean Code Approach with Headless Components
Decoupling UI and Logic in React: A Clean Code Approach with Headless Components
Статья описывает архитектурный паттерн headless component. Headless Component - это когда мы реализуем логику компонента отдельно от верстки. Это позволяет разделять логику от вёрстки (SRP) и переиспользовать логику или вёрстку независимо друг от друга. В статье это разобрано на очень странном примере (есть 2 компонента: переключатель и раскрываемый контент, и их общая логика (буквально управление bool'ом) выносится в отдельный хук). Но, с другой стороны, приведены примеры библиотек, следующих концепции headless component и хорошо описаны плюсы и минусы подхода. Плюсы: - Позволяет переиспользовать логику отдельно от вёрстки (верно и обратное) - Разделение ответственности. Которое ведет к большей гибкости - Тестируемость логики и вёрстки Минусы: - Есть оверхед в начале т.к. надо заняться явным разделением логики и вёрстки (а это не всегда так просто как кажется на первый взгляд) - Разработчикам необходимо научиться применять паттерн - Приведет к усложнению в коде, если начать использовать везде (и где надо и где не надо) - Требуется уделять больше внимания производительности т.к. появляются новые места для плохого перформанса.
·itnext.io·
Decoupling UI and Logic in React: A Clean Code Approach with Headless Components
Курс по Git от JavaScript ru
Курс по Git от JavaScript ru
Очень хороший плейлист на ютубе, в котором содержится видеокурс по git. В коротких видео (от 2 до 16 минут) рассматриваются основные концепции git
·youtube.com·
Курс по Git от JavaScript ru
In Defence of DOM­Content­Loaded – CSS Wizardry
In Defence of DOM­Content­Loaded – CSS Wizardry
Когда-то событие DOMContentLoaded перестали считать важной метрикой т.к. она чисто техническая и для пользователя она не интересна. Пользователю интересно чтобы контент быстро отрисовался и приложение стало интерактивным. Эта статья рассказывает, что событие DOMContentLoaded все еще может быть очень полезным для анализа производительности сайта. Тот факт, что метрика - техническая, не значит что она не полезна. У нас есть TTFB, которая также техническая метрика, но тем не менее очень ценная для анализа производительности сайта. Автор разбирает, как работает DOMContentLoaded и как это можно использовать. Событие возникает, когда все синхронные и deferred скрипты завершили свое выполнение. При этом в Navigation Timing API у нас есть 2 события - `domContentLoadedEventStart`, аналогичное DOMContentLoaded и `domContentLoadedEventEnd` - время когда обработчик `DOMContentLoaded` завершил работу. Также мы знаем, что есть событие `domInteractive`, которое, по сути, возникает когда браузер закончил чтение HTML страницы. Из этих данных мы можем выяснить следующие цифры: * `domContentLoadedEventStart - domInteractive` - время, необходимое на загрузку и исполнение deferred скриптов * `domContentLoadedEventEnd - domContentLoadedEventStart` - время необходимое на запуск обработчие DOMContentLoad Т.к. `DOMContentLoaded` предшествует последующим событиям (запуск приложения, отрисовка), то очень важно следить за этой и связанными метриками и оптимизировать их. Например, уменьшить размер HTML, количество блокирующих JS-файлов, инлайн маленьких JS-файлов (чтобы убрать пенальти на время сетевого запроса). Любое улучшение метрики улучшает все последующие метрики (практически все), поэтому имеет смысл уделять внимание `DOMContentLoaded`, хотя многие современные гайды по производительности не уделяют внимания этому событию
·csswizardry.com·
In Defence of DOM­Content­Loaded – CSS Wizardry
An Introduction to Parser Combinators
An Introduction to Parser Combinators
Пост про комбинирование парсеров. Автор на примере простых парсеров рассказывает, как, используя композицию, из простых парсеров получать сложные комбинированные парсерсы. Парсеры в статье упрощены и ищут в тексте определенные слова. Но сама статья достаточно хорошо объясняет, что если у вас простые чистые функции, делающие 1 свою работу хорошо, то с помощью базовым примитивов для композиции вы можете составлять более сложный функционал. В целом объяснение материала похоже на объяснение композиции чистых функций в рамках ФП
·blog.varunramesh.net·
An Introduction to Parser Combinators
Popular DevTools Tips — Smashing Magazine
Popular DevTools Tips — Smashing Magazine
Статья расскзаывает про 15 полезных трюков при работе в DevTools. Некоторые "трюки" очень странные, другие же весьма полезные. 15. DevToolsUI можно зумить 14. DevTools позволяют удалять лишние элементы из DOM 13. Можно посмотреть шрифты, используемые элементом или страницей 12. Измерение расстояний на странице 11. Обнаружение неиспользуемого кода 10. Ускорить воспроизведение видео. Если плеер на странице не дает управлять скоростью воспроизведение - не беда! Это можно сделать через консоль 9. Смена языка DevTools (тут вспоминаются въетнамские флешбеки от devtools в MS Edge которые ну очень сильно хотят быть удобными и навязчиво предлагают русскую локаль) 8. Отключение обработчиков событий на элементах 7. Просмотр логов консоли на ios в не-сафари браузерах. В Chrome и Edge оказывается можно открыть специальную ссылку в отдельном табе и в этом табе будут складываться логи с других табов. Это может быть полезно для дебага через консоль прямо на устройстве, если нет возможно использовать другие способы дебага. Это, по крайней мере, лучше чем дебаг через алерты. 6. Скопировать стили элемента 5. Скачать все картинки со страницы (через JS скрипт) 4. Визуализировать страницу в 3D. Это можно использовать для анализа вложенности DOM, z-index или слоёв 3. Отключение debugger стейтментов, если вы не хотите на них останавливаться 2. Редактирование и переотправка сетевых запросов. 1. Эмулирование устройств
·smashingmagazine.com·
Popular DevTools Tips — Smashing Magazine
The massive bug at the heart of the npm ecosystem
The massive bug at the heart of the npm ecosystem
Один из менеджеров, работавших в npm, написал статью про большую проблему в безопасности npm экосистемы. Оказывается, в npm манифест пакета и контент пакета могут отличаться. При загрузке пакета в npm необходимо загрузить 2 вещи: манифест и tarball (архив) с контентом пакета. Манифест, это, по сути, примерно та же самая мета-информация о пакете, которая содержится в package.json. В tarball также хранится package.json пакета. Проблема в том, что в npm нет никакой валидации, что манифест пакета синхронизирован с package.json в tarball. На практике это несет следующие проблемы: 1. Можно убрать все скрипты и зависимости из манифеста, но при загрузке tarball окажется что скрипты и зависимости есть. В этом случае зависимости могут быть установлены, а скрипты (postinstall например) - запущены. Чем опасен запуск скриптов объяснять не нужно. С зависимостями же может быть не так очевидно: - Можно установить "вредную" зависимость, не указывая ее в манифесте - Можно заставить пакетный менеджер повысить или понизить версию какого-нибудь пакета. Допустим, в проекте стоит зависимость A^1.0.0, мы ставим пакет у которого в tarball в зависимостях также указан пакет A, но определенной версии, подходящей под ^1.0.0, но с какой-нибудь уязвимостью. Тогда пакетный менеджер может принять решение задедублицировать пакет A. Таким образом, зависимостью в tarball можно изменить версию пакета во всех проекте. 2. Если поиграться с полем version в tarball то можно заставить менеджер пакетов повысить или понизить версию пакета. Как следствие, из-за этой проблемы открыто много разных уязвимостей. А также некоторые популярные пакеты также подвержены этим проблемам (различие зависимостей и скриптов в манифесте и при установке)
·blog.vlt.sh·
The massive bug at the heart of the npm ecosystem
Simple Statistics
Simple Statistics
JS-библиотека реализующая методы мат. статистики. Умеет считать как простые вещи (медиану, персентили, квантили) так и работать с дисперсией, коефициантами кореляций и всем таким. Если у вас есть задача получать какие-то статистические выводы на основе данных - это либа для вас. Лично я её применю в ближайший месяц для подсчета процессных метрик.
·simple-statistics.github.io·
Simple Statistics
Chalk.ist - Create beautiful images of your source code
Chalk.ist - Create beautiful images of your source code
Еще 1 сервис для преобразования кода в картинку. Например это может быть полезно для презентаций или демок в Readme. Выглядит прикольно.
·chalk.ist·
Chalk.ist - Create beautiful images of your source code
ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения
ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения
Очень крутая статья про написание кастомных правил Eslint. Она хороша как туториал, погружающий в проблематику и где каждый шаг написания кастомного правила хорошо расписан. Я, с удивлением для себя, обнаружил что в astexplorer можно не просто посмотреть AST кода, но и сразу писать и проверять работу eslint-правила. Рекомендую к прочтению и сохранению всем, кто хочет писать свои кастомные eslint-правила
·habr.com·
ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения
What is a CDN? An Unbiased Guide to Content Delivery Networks
What is a CDN? An Unbiased Guide to Content Delivery Networks
Хорошая статья, объясняющая, что такое CDN и зачем он нужен. CDN - это сеть глобально-распределенных серверов, которые хостят ваш контент и быстро отдают его посетителям. Зачем это нужно. Представьте, что у вас есть производство и 1 большой склад для всей продукции, которую покупают по всему миру. Когда клиент из другой части света покупает что-то, ему приходится очень долго ждать. Поэтому крупные компании имеют локальные склады. Примерно тоже самое верно и для интернет-трафика. Для того, чтобы пользователь из Индии смог посмотреть сайт из Новосибирска, интернет трафик пройдет большой путь. Этот путь можно сократить, если уметь раздавать тот же самый трафик ближе к пользователю. Этим как раз и занимается CDN. CDN решает проблему быстрой доставки контента до пользователя, что дает следующие преимущества: 1. Нагрузка распределяется по серверам, вместо загрузки 1го сервера 2. CDN умеют оптимизировать трафик (корректно кешировать и сжимать его) 3. CDN умеет бороться с DDoS При внедрении CDN следует следить за следующими аспектами: - Ресурсы должны грузиться. Бывает, что при неверной конфигурации CDN часть ресурсов не может загрузиться - Метрики производительности (TTFB, LCP) должны улучшиться - Не должно быть ошибок в консоли (CORS, неверные заголовки)
·calibreapp.com·
What is a CDN? An Unbiased Guide to Content Delivery Networks
Announcing Svelte 4
Announcing Svelte 4
Вышел Svelte 4. Со времени прошлого релиза прошло более 4х лет. Уменьшился размер пакета (сайт для изучения svelte в результате "похудел" на 12%), улучшился DX, обновили доку и требуемую версию NodeJS. Но при этом весь код, написанный для svelte3, совместим со svelte4, а для облегчения миграции есть автоматика.
·svelte.dev·
Announcing Svelte 4
Introduction to Next.js Server Actions
Introduction to Next.js Server Actions
Вводная статья про server actions в next.js. Статья рассказывает, что это такое, как это использовать и какие ограничения есть. Серверные экшны - это функции, которые будут выполняться на сервере, но при этом доступны как обычные функции из клиентского кода. Т.е. от пользователя не нужно заниматься оборачиванием кода в API: поднятием веб-сервера, созданием контроллера и тд. Это происходит под капотом (это либо что-то близкое к React Server Components либо это оно и есть, но для функций). Зачем это вообще может понадобиться: - Уменьшить вынесение логики в браузер = уменьшение размера поставляемого JS - Реализация сервер-специфичной логики (запросы в базу данных) - Безопасность. Например, шифрование, скрытие алгоритмов и тд Для того, чтобы объявить экшн серверным, необходимо использовать декларацию `use server` либо в самом экшне, либо в файле ``` async function myActionFunction() { 'use server'; // do something } ``` Либо ``` 'use server' export async function myActionFunction() { // do something } export async function anotherActionFunction() { // do something } ``` Теперь эти экшны можно импортировать прямо в компоненты и использовать как обычные функции, только они будут исполнятся на сервере. Также из интересных фичей - серверные экшны могут работать с отключенным JS в браузере при использовании в формах
·makerkit.dev·
Introduction to Next.js Server Actions
Giving more tools to software engineers: the reorganization of the factory
Giving more tools to software engineers: the reorganization of the factory
Статья про развития индустрии разработки ПО. Автор работает в индустрии более 20 лет и своими глазами видел развитие технологий. Из своего опыта он делает вывод, что разработки идет по непрерывному циклу появляются новые, более эффективные инструменты = разработка ускоряется или упрощается = потребность в разработке возрастает = зарплаты разработчиков растут = в индустрию приходят новые люди = появляются новые инструменты... Раньше для раздачи стримингового контента надо было создавать свою P2P систему на C++. Теперь же эту задачу хорошо решают CDN. Это справедливо и для других вещей, которые нам сейчас кажутся обыденностью, но раньше были недоступны (быстрые юнит-тесты, CD, быстрая интеграция с системами оплат) Что происходит с экономикой, когда появляется инструмент, позволяющий решить задачу в 10 раз дешевле? Доступность производимого разработкой продукта растет = все больше компаний хочет себе свой продукт = растет спрос на разработчиков = у разработчиков растут зарплаты и в индустрию приходят новые разработчики Эти новые разработчики имеют совершенно иные навыки т.к. требования для входа в индустрию меняются вместе с развитием программной инженерии. Если раньше надо было знать Computer Science, понить как работает процессор, ОС, память, знать САР теорему, то теперь эти знания совершенно не обязательны. Это открывает путь в индустрию людям с совершенно другим бекграундом, что повышает разнообразие и ведет к появлению новых инструментов. Какое предсказание можно сделать: - Сейчас хорошее время чтобы стать разработчиком - Рынок инструментов для разработчиков будет расширяться - Компаниям следует поспевать за трендом, чтобы быть в экономике: использовать новые инструменты и современные подходы (децентрализация, высокая скорость интерации и тд) - Разработчикам следует использовать инструменты, делающие их эффективнее - Количество инженеров в компании с топ-разработчиками растет быстрее (разработчики придумывают инструменты = эффективность разработки увеличивается = бизнес масштабирует эффективность через найм)
·erikbern.com·
Giving more tools to software engineers: the reorganization of the factory
An introduction to debugging in Node.js
An introduction to debugging in Node.js
Статья, подробно рассказывающая, как дебажить node.js с помощью различных инструментов. Начиная от console.log и заканчивая подключением к дебагерру через Chrome DevTools и VSCode и работе в дебагере
·blog.openreplay.com·
An introduction to debugging in Node.js
Hydration is a tree, Resumability is a map
Hydration is a tree, Resumability is a map
Статья объясняет разницу между гидрацией (Hydration) и оживлением (не уверен на счет корректного перевода, но оригинал - Resumability). В кратце описываются основные варианты гидрации веб приложения и чем же это отличается от resumability Автор разбирает гидрацию на 3 вида. 1. Полная гидрация. Это классическая схема, когда при серверном рендеринге генерируется HTML, а затем приложение в браузере приклеивается ко всем отрендеренным DOM-нодам, начиная с корня приложения 2. Частичная гидрация (Partial hydration) появилась как следствие того факта, что полная гидрация может быть очень тяжелой в плане производительности. Частичная гидрация предполагает, что гидрировать нужно только то, что необходимо пользователю. Т.е. пока пользователь не взаимодействует с компонентом, незачем его инициализировать. На этой концепции построена Island Architecture 3. Гидрация в React Server Component. Введение серверных компонентов на React позволяет явно выделять те компоненты, которые требуют гидрации на клиенте и те, которые могут быть отрисованы 1 раз на сервере. Resumability же предполагает, что нам не нужно ничего гидрировать и загружать пользователю, пока он не начнет взаимодействовать с кодом. В моей трактовке это очень близко к частичной гидрации, но разница вот в чем: при частичной гидрации предполагается что мы загружаем код компонента, когда пользователь имеет возможность с ним провзаимодействовать, чтобы как раз сделать компонент интерактивным. При Resumability же, мы навешиваем обработчики событий сразу, а только при взаимодействии загружаем компонент. И это позволяет не грузить лишний код в браузер и это недостижимо для текущих фреймворков, которые используют гидрацию.
·builder.io·
Hydration is a tree, Resumability is a map
Announcing XState v5 beta
Announcing XState v5 beta
Анонс бетки XState 5 XState пытается упростить кривую обучению. А именно, упрощает терминологию (уменьшая её), уменьшает количество API, описывает кучу примеров использования, предоставляет интерактивную документацюи и всячески стремиться к тому, чтобы применять XState было проще Что нового ожидается Вместо кучи разных сущностей для реализации логику теперь будут акторы. Акторы - единая сущность для логики в xstate. Акторы можно создать из промисов, функций, обсерваблов и тд. Также можно создавать акторы из чего угодно, написав соответствующие хелперы. Раньше акторы могли быть сохранены и загружены, но это не работало для внутренних акторов (актор А, вызывает акток Б). Теперь же сохраняется и загружаются все связанные акторы. Т.к. акторы могут запускать друг друга, то они естественным образом создают иерархию. Иерархия акторов - это система. В рамках одной системы акторы могут общаться друг с другом через специальное API. Упрощена передача данных в акторы. Также из интересных фич: добавили возможность применение partial wildcards для подписки на события. Раньше надо было выбирать - либо явно описывать все события. либо подписываться на все разом. Теперь можно подписаться по шаблону, например `pointer.*` Сейчас идет активная работа над хорошей интеграцией с TypeScript
·stately.ai·
Announcing XState v5 beta
Running Promises in Parallel: A Visual Guide
Running Promises in Parallel: A Visual Guide
Визуализированный гайд по работе с промисами. Гайд, с помощью анимаций, разбирает, когда и как лучше работать с несколькими промисами. Работу с группой промисов мы можем разделить на 4 категории двумя вопросами: 1. Хотим ли мы дожидаться исполнения всех промисов? 2. Необходимо ли нам чтобы все промисы выполнились успешно? В зависимости от ответа на эти вопросы необходимо выбрать нужный метод для работы с группой промисов. Если мы хотим дожидаться исполнения всех промисов и все промисы должны быть успешны - необходимо использовать `Promise.all`. Если мы хотим дожидаться исполнения всех промисов, но нам не обязательно, чтобы все промиссы были выполнены успешно - используем `Promise.allSettled` Если мы хотим дождаться первого успешного промиса - используем `Promise.any`, если мы хотим дождаться первого завершившегося промиса - `Promise.race`. Правила достаточно просты. В статье они красиво визуализированы (хотя у меня все равно возникли вопросы). Статью можно рекомендовать как обучающую для тех, кому необходимо познакомиться с работой промисов.
·julesblom.com·
Running Promises in Parallel: A Visual Guide
10 Ideas From the Best Book on Engineering Management
10 Ideas From the Best Book on Engineering Management
10 идей из книги An Elegant Puzzle: Systems of Eng Management 1. Размер команды влияет на роль менеджера. "Сбалансированный" менеджер управляет 6-8 людьми, техлид - 4 и менее. Коуч - более чем 8ми 2. Команда должна одновременно уметь и создавать новое и поддерживать старое 3. Команда проходит через 4 этапа: 1) разгребание бэклога; 2) замедление и выделение времени на технический долг; 3) выплата технического долга; 4) создание нового 4. Ценность несут только завершенные проекты 5. Диаграмма продуктивности разработки позволяет находить узкие места и оптимизировать процессы (это надо смотреть в самой статье, в рамках поста в ТГ это сложно описать) 6. Стань Product Manager, если у команды нет своего PM 7. Описывай стратегии для решения конкретных проблем, а затем своди их в единое видение будущего (Vision). Здесь предлагается простой рецепт: создай стратегию на основе 5 документов с решением реальных проблем. Это позволит убедиться, что стратегия не слишком абстрактная. Затем, на основе 5 стратегий, создай видение 8. Моделируй, документируй, делись. Для того чтобы принести изменения в компанию или процессы, сначала надо а) попробовать изменения на малом машстабе; б) Если изменения полезные - хорошо задокументировать их - что, как и почему; в) внедрять изменения в процессы 9. Разделяйте участие и продуктивность. Участие в куче встреч не делает вас продуктивным. Учитесь находить реально важные активности и говорить "Нет" участию во встречах, которые мешают делають эти активности. 10. Внутренние проблемы могут вскрыть проблемы во взаимодействии
·betterprogramming.pub·
10 Ideas From the Best Book on Engineering Management
Dependency Composition
Dependency Composition
Очень хорошая статья в блоге Мартина Фаулера одновременно про проектирование через TDD и выделение зависимостей в коде без фреймворков. Код написан на typescript (все чаще в блоге Мартина Фаулера фигурирует код на javascript или typescript) Автор пытается решить следующую историю: пользователь хочет получить список лучших ресторанов, по мнению других пользователей. Автор последовательно, без фреймворков и следуя TDD, по немногу заводит сущности и сразу проектирует, как они должны друг с другом взаимодействовать. Сначала описывает верхнеуровневые детали, затем по-немногу погружается в домен и описывает зависимости, необходимые бизнес-логике для работы. Также автор следует бест-практисам, разделяя инфраструктурный код и бизнес-логику приложения. Код, который ищет лучшие рестораны, не знает ни о HTTP, ни о базах данных. Очень интересна реализация DI - автор просто берет и примяеняет Partial Application в создании хендлера запроса, в который кидаются зависимости (например, функция получения списка ресторанов) и которая возвращает обработчик запроса. Статья очень хороша по следующим причинам: - Очень хорошо объясняется, как применять прицнипы чистой архитектуры при проектировании сервиса - Очень хорошо объясняется, как использовать TDD при проектировании сервиса и его зависимостей - Автор не задается вопросом, а какой способ делать DI (pure, IoC container, etc) или какая библиотека для DI лучше - он его просто делает. В Javascript есть возможность применять Partial Application - этого УЖЕ достаточно для реализации DI - Объясняются концепции хорошего кода Рекомендую к прочтению
·martinfowler.com·
Dependency Composition