How to Master State Management in Modern React https://jsdev.space/react-state-management/ #react #zustand #mobx #valtio #redux
#mobx
Подходы к state management в React
У React-разработчика две беды: 1. Целевые данные изменились, а ререндера нет. 2. Целевые данные не изменились, а ререндер есть. Есть много вариантов подружить данные с интерфейсом, в рамках данной статьи я пройдусь по самым популярным из них. Выясним, как они устроены и для чего каждый из них подойдет лучше, обсудим конкретные реализации разных паттернов.
https://habr.com/ru/articles/984424/
#React #redux #zustand #mobx #valtio #jotai #state_management
Эволюция плеера RUTUBE: от монолита к гибким модулям
Принимая архитектурные решения, часто так или иначе приходится идти на компромисс: между качеством и скоростью разработки, сложностью реализации и удобством поддержки, быстротой решения бизнес-задачи и гибкостью. Со временем небольшие уступки накапливаются и проект покрывается легаси. Даже если исправно разгребать техдолг, то в любом случае на достаточно длинной дистанции решения и технологии устареют, и станет невозможно обойтись «генеральной уборкой» — потребуется смена архитектуры. В статье расскажу, как мы столкнулись с неизбежной необходимостью переделки веб-плеера RUTUBE — сервиса, который существует с 2006 года, пережил несколько смен команд и парадигм разработки и при этом достаточно большой и высоконагруженный, чтобы нельзя было «просто так взять и всё переписать».
Chatting more closely with my team, it looks like we'll at least go with the "Watch in effect" solution for right now, at least. We were previously leveraging #mobX which behaved in this way. Opens fun questions around #effects should react to changes inside of them or not, but we'll get into that as we get further into our #signals adoption across @reveai.bsky.social
Собрать звуковую спектрограмму на React и MobX
Привет! Я Таня, фронтенд-разработчик в KTS и студент магистратуры МГТУ им. Баумана. На одном из недавних проектов я работала над интересной фичей — визуальным представлением аудиоданных, a.k.a. звуковой спектрограммой. Казалось бы, штука нехитрая: кто не видел график, прыгающий в такт с музыкой на разных частотах? Он есть в любом секвенсоре, на любом диджейском пульте и даже в динамическом островке последних айфонов. Однако задача оказалась нетривиальной, поскольку для целей проекта мне нужно было разработать звуковую спектрограмму на React и MobX в особом дизайне. Подробных разборов этой темы и готовых решений я не нашла, поэтому в процессе пришлось самостоятельно разобраться с кучей тонкостей и нюансов. Результат можете посмотреть по ссылке . А в этой статье я расскажу, как сделать такую же звуковую спектрограмму, а также как изменять ее стиль и другие параметры.
https://habr.com/ru/companies/kts/articles/955044/
#визуализация_данных #Звуковая_спектрограмма #FFT #mobx #react
Удалить полпроекта: как мы переписывали MobX‑сторы на React Query в большом Next.js‑проекте
Привет. Я Дима Рагозин, фронтенд-разработчик в KTS . Эту статью я хочу начать с предыстории. Полтора года назад на проекте для одного крупного клиента мы получили задачу — ускорить главную страницу. К тому моменту в кодовой базе уже жили два отдельных фронтенд-приложения под две разные платформы — CSR-версия (Client Side Rendering) и SSR‑версия (Server Side Rendering), — а MobX‑сторы все время жизни проекта разрастались вместе с функциональностью. Каждый новый экран приносил еще один класс (а то и несколько), еще кучу связей, и в какой‑то момент мы стали замечать снижение воспринимаемой скорости приложения, избыточные HTTP‑запросы, сложности с поддерживаемостью и другие проблемы, которые становились критичнее по мере роста проекта. В статье я расскажу о том, как мы шаг за шагом перевели такие сторы на React Query, сократили код вокруг запросов на ≈50 % и практически избавились от повторных GET‑ов. Попутно поведаю о наших граблях и поделюсь советами по миграции.
https://habr.com/ru/companies/kts/articles/935086/
#mobx #React #React_Query #Nextjs #Frontend #Управление_состоянием #Оптимизация_производительности #ssr
Anyone using lit/signals in production or any other tc39 based signals approach?
I've been a long time user of mobx and found the pattern very powerful and well performing when correctly managed. I'm real tempted to replace this with signals now, but would to hear other folks experiences.
Mobx is very mature, but the payload is high. While signals are small but ergonomics are not there yet.
Внедрение зависимостей (DI) через библиотеку Tsyringe
Привет, Хабр! Меня зовут Роман Мельник, я фронтенд-разработчик во «ВКонтакте для Бизнеса». Наша команда создаёт инструменты, которые помогают владельцам сообществ управлять и развивать свои проекты. Сегодня я расскажу про Dependency Injection (DI) через библиотеку Tsyringe. Почему это важно? Крупные проекты сталкиваются со следующими проблемами: разрастающимся глобальным стором, сложностями тестирования, масштабирования и переиспользования кода. Внедрение зависимостей помогает решить эти вопросы, делая код гибким и управляемым. На практике это выглядит гораздо интереснее. Давайте разберёмся! Начнём с архитектурных принципов и паттернов.
Solid.js как альтернатива (P)React+MobX на практике
Как известно, у Solid довольно скудная экосистема, поэтому для сложных проектов я беру React+MobX. Однако недавно подвернулся небольшой mobile-only проект, в котором разве что маскированные инпуты и кастомные селекты, которых для Solid предостаточно. При этом требования к размеру выходных файлов и перфомансу были высокие. Очевидным решением посчитал взять Solid, заодно и сравнить его по всем параметрам (размер, перфоманс, возможности реактивности, удобство настройки) в реальном проекте. Никаких синтетических тестов с рендерингом больших таблиц и хранением в сторе нескольких мегабайт данных не будет, зато приведу замеры из реального приложения. Бонусом - репозиторий с универсальной архитектурой для Solid+Preact+React, где замена фреймворка (набора стейт-менеджер + рендеринг UI) производится одной строчкой кода.
Как MobX делает объекты реактивными с помощью Proxy
Привет! На связи снова Дмитрий — React-разработчик, который стремится разобраться, как всё устроено, и делится информацией с вами. В прошлой статье мы подробно разобрали, что такое Proxy и как он работает, поэтому повторяться не будем. Сегодня поговорим о том, как MobX использует Proxy, создавая свою "реактивную магию". Как MobX делает объекты реактивными? MobX превращает обычные объекты JavaScript в реактивные, что позволяет автоматически отслеживать изменения их свойств и обновлять зависимости. В основе этого механизма лежат два ключевых инструмента: makeAutoObservable и observable.
Топ-5 библиотек для управления состоянием React в 2025 году
Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки. Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.
Найди x: React + MobX + SSR + x = Счастье
С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение . Вы статье вы узнаете, как мы решили уравнение)
https://habr.com/ru/articles/880720/
#dependency_injection #inversion_of_control #di #ioc #react #mobx #ssr #server_side_rendering #state_management
Отладка и мониторинг в MobX: trace, introspection и spy
Привет, меня зовут Дмитрий, я Middle-React-разработчик с замашками сеньора, поднимающийся с самых низов без мам, пап и ипотек. В последнее время я частенько вижу ситуацию: при использовании MobX в больших проектах у людей появляются сложности с количеством перерисовок или наоборот не обновлением данных со стора. Также могут проявляться проблемы с производительностью в том числе и из-за этого. Я решил поделиться отладочными инструментами MobX, ведь это может кому пригодиться.
https://habr.com/ru/companies/gnivc/articles/855346/
#react #reactjs #mobx #javascript #web #frontend #frontend_разработка
> #React #Compiler is the result of a problem: the introduction of #hooks has led to far too much logic in #components.
It's clear to me that #Knockout had it right back in 2012; #MVVM is the correct pattern for #WebApps
https://www.mikejohnson.dev/posts/2024/06/mobx-react-compiler
#webDev #reactJs #javaScript #mobx #observables #viewModel #programming
I wrote about #React Compiler and compared with it with #Mobx.
Both help solve re-renders but only one helps with bigger problems
https://www.mikejohnson.dev/posts/2024/06/mobx-react-compiler
Основы программирования на примере исходного кода MobX
Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.
https://habr.com/ru/articles/813647/
#структуры_данных #алгоритмы #шаблоны_проектирования #solid #frontend #mobx #state_management #observer_pattern
Redux это бойлерплейт, а Mobx нет! Но есть нюанс
На прошлой неделе впервые поучаствовал в конференции по Frontend, где один из докладчиков, расказывал, как удачно его команда переехала с Redux на Mobx. Главным преимуществом он назвал отсутствие бойлерплейта и ускорение разработки в полтора раза. Я прочитал несколько статей и посмотрел другие доклады, где все как один говорят, что Mobx лучше, чем Redux. Возможно это и так, но почему в сравнение всегда идет Redux, а не Redux-Toolkit, я не понимаю. Попытаемся конструктивно посмотреть действительно ли Mobx настолько хорош как о нем говорят.
Redux vs Mobx кого же выбрать для React-приложения в 2024 году?
Привет, Хабр! Сегодня я хочу поделиться с вами своими размышлениями о том, какой стейт менеджер лучше использовать для разработки приложений на React в 2024 году. Как вы знаете, React — это одна из самых популярных и мощных библиотек для создания пользовательских интерфейсов, которая предоставляет множество возможностей и преимуществ для разработчиков. Однако, по мере роста и усложнения приложений на React, возникает необходимость в управлении состоянием и данными, которые используются в разных компонентах. Для этого существуют различные решения, называемые стейт менеджерами. Стейт менеджер — это инструмент, который позволяет централизованно хранить, обновлять и передавать данные между компонентами, а также реагировать на изменения состояния. В этой статье я рассмотрю два из самых популярных и зрелых стейт менеджеров для React: Redux и Mobx. Я сравню их основные принципы, преимущества и недостатки, а также покажу примеры их использования в коде. Также я попытаюсь ответить на вопрос, какой из них лучше подходит для разработки современных приложений на React в 2024 году.
https://habr.com/ru/articles/795901/
#mobx #mobxstatetree #redux #reduxsaga #react #reactjs #javascript #webразработка #webпрограммирование #technology
Об одном способе реализации архитектуры крупного Flutter-приложения
Привет! Меня зовут Олег Скирюк, я лидирую контент-разработку в одной из команд билайна. Сам я перешёл в мобильную разработку из веба три года назад, после чего собрал и обучил одну из первых Flutter-команд в компании. Вместе с этой командой мы постоянно экспериментируем и пробуем различные решения, чтобы совершенствовать наши приложения. В этом посте я хочу рассказать про архитектуру Flutter-приложений, о том, как мы в билайне это делаем, чего мы достигли и как это у нас работает. Поговорим о создании архитектуры, организации управления состояниями и зависимостями, о привычных и не очень методах и концепциях, затронем Mobx, GetX и Flutter modular, а также разберём всё это на живом примере — на нашем мобильном приложении для дилеров. Мы обсудим его особенности, технические сложности, и посмотрим, как реализовать такое крупное приложение. Затем — углубимся в вопрос управления состоянием, зависимостями, приложением.
https://habr.com/ru/companies/beeline_tech/articles/785730/
#flutter #разработка_мобильных_приложений #mobx #getx #UI #дизайнсистема #верстка
Как я сделал проект для себя и получил приз от Telegram
Всем привет! Telegram устроил конкурс на разработку мини-приложений, где моя работа заняла призовое место. В конкурсе была высокая конкуренция, так как выбор технологий и идеи для приложения был свободный. В связи с этим Telegram даже увеличил общую стоимость призовых. В этой статье разберём как проходила разработка, с какими сложностями столкнулся и чему научился.
https://habr.com/ru/articles/779508/
#конкурс_разработчиков #telegram #fullstack_development #mobx #postgresql #supabase #anki
Client Info
Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst