Всем привет. Написал очередную статью. На этот раз про архитектуру и фреймворки. Ранее мне часто попадался новый фреймворк Service Weaver от Google для Golang, так как инженеры Google активно участвует в конференциях и рассказывает про этот фреймворк.

Первая мысль: "Очередной фреймворк, ничего интересного". Но на деле этот фреймворк реализует интересную модель, когда во время деплоя можно выбрать, как именно проект будет задеплоен - как множество микросервисов? Как модульный монолит? Или как множество модульных монолитов?

И это определенно необычный подход, который позволяет решить ряд проблем микросервисов. В статье подробнее разбираю, как работает эта "магия" внутри, на основе каких компонентов построен Service Weaver и как это можно реализовать в Node.js.

Статья доступна на английском: https://amarchenko.dev/blog/2023-10-19-service-weaver/

Fluid Simulation 流体シミュレーション

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

https://kyndinfo.notion.site/Fluid-Simulation-f0516d9d12e245a08ae5c7545ac822dd

#development #animations #math #webgl

Дайджест за 2023-10-16 - 2023-10-20

Did the React team forget the React Forget compiler?
Команда React работает над своим компилятором React Forget. Внезапно на reddit'е задались вопросом "не забыла (forget) ли команда React о React Forget?". И в комментарии пришел разработчик из команды React и рассказал немного подробностей про разработку компилятора.

Разработчик объясняет сложность создания своего компилятора на достаточно простом примере компилирования использования переменных в компоненте в код с useMemo.

Building an onboarding plan for engineering managers
Наличие плана для онбординга инженеров - стандарт индустрии. Такой план значительно повышает скорость интеграции нового человека в команду и повышает его эффективность. Однако, почему то в компаниях редко есть план онбординга для менеджеров. Для этого есть веские причины: менеджеров меньше, у них у всех разный бекграунд, из-за чего онбординг каждого нового менеджера может отличаться от предыдущих. Но в целом, наличие общего плана было бы полезным

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

Diving into Engineering Metrics
Обзор на разные метрики для оценки продуктивности команды разработки.

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

Speeding up the JavaScript ecosystem - The barrel file debacle
Новая статья про ускорение JS экосистемы. На этот раз автор не разбирает какой-то конкретный кейс, а в целом рассказывает об одном паттерне, который замедляет исполнение кода.

Паттерн сегодняшней статьи - это index-файлы с ре-экспортами. В сообществе есть консенсус большинства, что у библиотек или модулей должен быть index.js, который содержит все публичное API, и дальше лезть никому не нужно. А если вы используете не все из этого API, то tree-shaking вырежет все лишнее.

Fluid Simulation 流体シミュレーション
Крутая статья про создание анимации переливающихся жидкостей. В статье показывается крутая демка, а затем разбирается, как с помощью алгоритмов с щепоткой математики и JS сделать такую же анимацию.

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

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

Unlocking the Power of Storybook

Хорошая статья про применение storybook на проекте. Частое заблуждение - что storybook - это инструмент чисто для дизайн-систем. Однако, любое приложение может извлечь пользу от использования storybook

В статье рассматривается, какое API есть у storybook и как использовать его с пользой.

Статья начинается с предоставления глобальных зависимостей. Допустим, ваши компоненты зависят от Context'ов или каких-то глобальных переменных. В этом случае у вас 2 пути. Первый - это отделить чистый компонент от связи со всем глобальным. Но тогда мы теряем возможность проверять корректность связи компонент и контекста. Второй путь - это запровайдить контекст через storybook. Для этого есть Decorators API. Можно весь контекст сложить в декоратор и подключить его глобально для всех историй. Кроме того, этот декоратор можно сделать настраиваемым для каждой истории, используя фичу передачи параметров в историю.

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

В storybook есть встроенное API для тестирования - через play поле в истории можно взаимодействовать с компонентами (через testing-library) и также делать проверки. Storybook умеет запускать play функции как тесты на jest+playwright

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

Также автор делится простыми лайфхаками для улучшения качества тестов в storybook

https://formidable.com/blog/2023/unlocking-the-power-of-storybook/

#development #javascript #storybook

How we optimized package imports in Next.js – Vercel

Статья от Vercel про вред от паттерна barrel file. В статье vercel рассказывают, как они оптимизировали импорты в next.js чтобы избежать обработки таких файлов и как ускорили сборку и старт приложения на 30-40%

barrel-file - это когда, например, в корне библиотеки лежит index.js, который ре-экспортит кучу сущностей из других вложенных файлов. Проблема в том, что не смотря на то, что в коде используется всего лишь 1 ре-экспортируемая сущность, бандлерам и некоторым тулам, например jest, приходится сначала обработать все файлы. Что снижает скорость работы инструмента

Каноничный пример

export { default as module1 } from './module1';
export { default as module2 } from './module2';
export { default as module3 } from './module3';

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

Команда next.js ввела новую опцию в конфиг: optimizePackageImports, которая заставляет фреймворк просканировать barrel-file и в рамках сборки поменять импорты на более точечные. Это изменение позволило ускорить сборку на 15-70%. Например, импорт @material-ui/icons ускорился с 10 секунд до 2.9 секунды.

Также в статье указана ссылка на eslint-плагин, который умеет оптимизировать импорты barrel-файлов

https://vercel.com/blog/how-we-optimized-package-imports-in-next-js

#development #javascript #performance #barrelFile

Rspress, the Rspack-based static site generator

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

Судя по страницу, Rspress собирается в разы быстрее docusaurus

https://github.com/orgs/web-infra-dev/discussions/5

#development #documentation #release #rspack #rspress

How to grow as an Engineering Manager

Статья про то, почему сложно расти будучи менеджером и какие паттерны можно применить, чтобы найти точки роста

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

Чтобы обойти это правило, необходимо самому создавать возможности. Для того чтобы их создавать, автор выделяет 6 паттернов:

Вдохновляющий лидер - такой лидер способен вдохновить и мотивировать команду, скоуп её ответственности будет расти, вместе с ростом лидера.

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

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

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

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

https://medium.com/srivatsan-sridharan/how-to-grow-as-an-engineering-manager-687cad0bcac7

#managment #growth

Retries – An interactive study of common retry methods

Очень крутая и интерактивная статья, наглядно объясняющая как работают разные retry стратегии.

В рамках статьи объяснения про то, зачем нужны retry и почему наивная реализация "повторить запрос через секунду" может не только не помочь, но и сделать хуже. Всё это сопровождаются интерактивными примерами: в них визуально моделируется отправка запросов клиентами на сервера, а вы, как читатель, можете контролировать rate ошибок сервера, количество серверов и прочие параметры.

Некоторые примеры можно использовать как эталон для обучения. Мне очень сильно понравился кейс, где при переключении рейта ошибок на 100% сервера складываются, но при включении обратно в 0% они не поднимаются - клиенты отправляют слишком много запросов за раз, вновь поднятые инстансы не успевают их обработать. Но там можно добавлять новые сервера и автор ставит вопрос "как думаете, сколько нужно дополнительных серверов, чтоб система снова начала работать?", что прямо таки мотивирует сначала подумать, а потом и испытать свою догадку

https://encore.dev/blog/retries

#development #performance #retry #recommended

Дайджест за 2023-10-23 - 2023-10-27

Unlocking the Power of Storybook
Хорошая статья про применение storybook на проекте. Частое заблуждение - что storybook - это инструмент чисто для дизайн-систем. Однако, любое приложение может извлечь пользу от использования storybook

В статье рассматривается, какое API есть у storybook и как использовать его с пользой.

How we optimized package imports in Next.js – Vercel
Статья от Vercel про вред от паттерна barrel file. В статье vercel рассказывают, как они оптимизировали импорты в next.js чтобы избежать обработки таких файлов и как ускорили сборку и старт приложения на 30-40%

barrel-file - это когда, например, в корне библиотеки лежит index.js, который ре-экспортит кучу сущностей из других вложенных файлов. Проблема в том, что не смотря на то, что в коде используется всего лишь 1 ре-экспортируемая сущность, бандлерам и некоторым тулам, например jest, приходится сначала обработать все файлы. Что снижает скорость работы инструмента

Rspress, the Rspack-based static site generator
Вышла 1 версия rspress - генератора статичных сайтов для документации с использованием rspack. Обещают что поддерживают основные фичи, необходимые для документации - скорость сборки. MDX, поиск, мультиязычность, система плагинов

Судя по страницу, Rspress собирается в разы быстрее docusaurus

How to grow as an Engineering Manager
Статья про то, почему сложно расти будучи менеджером и какие паттерны можно применить, чтобы найти точки роста

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

⭐Retries – An interactive study of common retry methods
Очень крутая и интерактивная статья, наглядно объясняющая как работают разные retry стратегии.

В рамках статьи объяснения про то, зачем нужны retry и почему наивная реализация "повторить запрос через секунду" может сделать хуже. Объяснения сопровождаются интерактивными примерами: в них визуально моделируется отправка запросов клиентами на сервера, а вы, как читатель, можете контролировать rate ошибок сервера, количество серверов и прочие параметры.

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

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

imgly/background-removal-js: Remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.

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

Может быть полезно в ваших проектах

https://github.com/imgly/background-removal-js

#development #javascript

Release: Yarn 4.0 🪄⚗️

Вышел Yarn 4.0 с новыми фичами

Прежде всего, на мой взгляд, интересно, что Yarn реализовали на своей стороне решение проблемы безопасности npm: в блоге уже была статья про то, что в npm можно залить пакет и метаданные пакета с разным содержимым, что является валидным вектором атаки на приложения через пакеты. Yarn теперь умеет самостоятельно это проверять, что, конечно, замедляет установку и рекомендуется использовать только в CI

Следующая интересная фича: теперь в yarn можно описывать ограничения или правила для пакетов на javascript. Раньше такая возможность тоже была, но только на людей, умеющих писать код на языке prolog. Ну т.е. можно декларативно описать, например, что все пакеты в моно-репо должны использовать друг друга как peerDependency, или что React должен быть 18 версии, или что пакеты должны явно указывать что работают с nodejs определенной версии. Это все описывается на JS и можно описывать свои проверки.

Из других изменений:

1. Yarn стал быстрее в 4 раза (по замерам команды Yarn)
2. Улучшили UI
3. Интегрировали официальные плагины в основной бинарник. Раньше плагины (например typescript), надо было устанавливать отдельно. Теперь же они вшиты сразу в Yarn

https://yarnpkg.com/blog/release/4.0

#development #release #javascript #yarn

Web Components Will Outlive Your JavaScript Framework

Неплохая статья про то, почему web компоненты переживут все современные фреймворки. Если коротко, то автор ведёт свой блог довольно давно (около 15 лет) и за это время он понял, что привязываться к конкретным инструментам в вопросе ведения блога - это путь в никуда, т.е. если технология сейчас кажется перспективной, то через 5 лет она, скорее всего, окажется аутсайдером, а через 10 про неё уже и не вспомнят

Поэтому автор хранит свои заметки в чистом markdown. И при переезде на новые технологии (сейчас он использует Astro) особых проблем не возникает т.к. markdown абстрагирован от инструментов. Но у markdown есть одна крутая фишка - в нем можно писать html и большинство инструментов его отрисуют. Это дает возможность вставлять в markdown всякое, для чего он не предназначен (графики, интерактивные примеры). А если что-то и вставлять - то web-компоненты, потому что они будут работать и сейчас и через 10 лет.

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

https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/

#development #javascript #webcomponents

Architects, Anti-Patterns, and Organizational Fuckery

Достаточно эмоциональная статья (чего стоит одно только название), которая подсвечивает проблему роли архитектора в разработке в индустрии.

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

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

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

Как следствие, есть смысл взращивать этот навык во всех разработчиках, а не замыкать на одном человеке.

Как этого достичь:

1. Необходимо обеспечить менторинг и обучение этому навыку. Если вы выделяете роль архитектора, то у него в обязанностях обязательно должно быть обучение инженеров архитектуре
2. Архитектурные группы из инженеров позволяют быть уверенными, что архитектурные решения принимают те же люди, что пишут код; и одновременно с этим, архитектурный навык этих инженеров будет расти
3. Нельзя рассматривать должность архитектора как вершину развития. Если заниматься только архитектурой годами, то инженер растеряет все свои навыки разработки. Поэтому необходимо обеспечить организационный процесс, в котором инженер может стать архитектором, а потом снова инженером и это бы не считалось даунгрейдом. В целом, это полезно и для других ролей (например, менеджеры разработки <=> разработчики)
4. Дать возможность каждому побыть архитектором. Например, возможность быть лидом недолгоживущей фичегруппы позволяет применить и прокачать навыки архитектуры разным членам команды разработки.

https://charity.wtf/2023/03/09/architects-anti-patterns-and-organizational-fuckery/

#development #architecture

Perflink

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

Приятный интерфейс и возможность делиться ссылкой на конкретный бенчмарк без авторизации.

https://perf.link/

#development #javascript #performance #benchmark

Дайджест за 2023-10-30 - 2023-11-03

imgly/background-removal-js: Remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.
Либа, которая прямо в браузере убирает задний фон с картинок. Попробовал на своей фотке - результат весьма годный. Судя по скачиваемым ресурсам - решение реализовано на каком-то другом языке и скомпилировано в WASM.

Может быть полезно в ваших проектах

Release: Yarn 4.0 🪄⚗️
Вышел Yarn 4.0 с новыми фичами

Прежде всего, на мой взгляд, интересно, что Yarn реализовали на своей стороне решение проблемы безопасности npm: в блоге уже была статья про то, что в npm можно залить пакет и метаданные пакета с разным содержимым, что является валидным вектором атаки на приложения через пакеты. Yarn теперь умеет самостоятельно это проверять, что, конечно, замедляет установку и рекомендуется использовать только в CI

Web Components Will Outlive Your JavaScript Framework
Неплохая статья про то, почему web компоненты переживут все современные фреймворки. Если коротко, то автор ведёт свой блог довольно давно (около 15 лет) и за это время он понял, что привязываться к конкретным инструментам в вопросе ведения блога - это путь в никуда, т.е. если технология сейчас кажется перспективной, то через 5 лет она, скорее всего, окажется аутсайдером, а через 10 про неё уже и не вспомнят

Поэтому автор хранит свои заметки в чистом markdown. И при переезде на новые технологии (сейчас он использует Astro) особых проблем не возникает т.к. markdown абстрагирован от инструментов. Но у markdown есть одна крутая фишка - в нем можно писать html и большинство инструментов его отрисуют. Это дает возможность вставлять в markdown всякое, для чего он не предназначен (графики, интерактивные примеры). А если что-то и вставлять - то web-компоненты, потому что они будут работать и сейчас и через 10 лет.

Architects, Anti-Patterns, and Organizational Fuckery
Достаточно эмоциональная статья (чего стоит одно только название), которая подсвечивает проблему роли архитектора в разработке в индустрии.

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

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

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

CSS Selectors: A Visual Guide

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

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

https://fffuel.co/css-selectors/

#development #css #recommended #tutorial

Headless Component: a pattern for composing React UIs


В блоге Мартина Фаулера появилась статья про паттерн Headless Component. Это когда мы разделяем UI-логику компонента от его верстки. Это дает нам возможность переиспользовать одну и ту же логику для разной вёрстки.

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




https://martinfowler.com/articles/headless-component.html

#development #martinFowler #react #patterns #headlessComponent #recommended

Speeding up the JavaScript ecosystem - Tailwind CSS

Очередная статья про ускорение экосистемы JS. В этот раз под анализом оказался tailwind CSS, который в целом работает быстро, но и там нашлось что улучшить.

Автор нашел 1 интересную проблему: недостаточно точный regexp для поиска использования tailwind-классов. В рассматриваемом проекте, из 26466 срабатываний regexp, 19630 были ложно-положительными - они не являлись tailwind-классами, но regexp их заматчил. Оптимизация regexp ускорила фазу поиск tailwind-классов в 4 раза.

Далее автор пошел переписывать алгоритм превращения класса в css. Он написал достаточно примитивный и большой switch-case, который, тем не менее, достаточно эффективен с точки зрения скорости работы кода. Суть этого кода в том, чтобы как можно раньше отбросить найденный на предыдущем этапе класс, который не является tailwind-классом. А если является - быстро его применить. Надеюсь, что я правильно понял эту секцию, т.к. если честно, то возможно часть смысла от меня ускользнула

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

#development #javascript #performance

Контур 23 ноября организует Frontend-митап в Новосибирске! Приходите послушать интересные доклады и пообщаться с сообществом. Я там буду рассказывать немножко про мониторинг веб-приложений

https://eventskbkontur.timepad.ru/event/2647893/

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