Solid.js как альтернатива (P)React+MobX на практике

Как известно, у Solid довольно скудная экосистема, поэтому для сложных проектов я беру React+MobX. Однако недавно подвернулся небольшой mobile-only проект, в котором разве что маскированные инпуты и кастомные селекты, которых для Solid предостаточно. При этом требования к размеру выходных файлов и перфомансу были высокие. Очевидным решением посчитал взять Solid, заодно и сравнить его по всем параметрам (размер, перфоманс, возможности реактивности, удобство настройки) в реальном проекте. Никаких синтетических тестов с рендерингом больших таблиц и хранением в сторе нескольких мегабайт данных не будет, зато приведу замеры из реального приложения. Бонусом - репозиторий с универсальной архитектурой для Solid+Preact+React, где замена фреймворка (набора стейт-менеджер + рендеринг UI) производится одной строчкой кода.

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

#solidjs #mobx #react

Как MobX делает объекты реактивными с помощью Proxy

Привет! На связи снова Дмитрий — React-разработчик, который стремится разобраться, как всё устроено, и делится информацией с вами. В прошлой статье мы подробно разобрали, что такое Proxy и как он работает, поэтому повторяться не будем. Сегодня поговорим о том, как MobX использует Proxy, создавая свою "реактивную магию". Как MobX делает объекты реактивными? MobX превращает обычные объекты JavaScript в реактивные, что позволяет автоматически отслеживать изменения их свойств и обновлять зависимости. В основе этого механизма лежат два ключевых инструмента: makeAutoObservable и observable.

https://habr.com/ru/companies/gnivc/articles/893108/

#mobx #javascript #react #reactjs #proxy

Топ-5 библиотек для управления состоянием React в 2025 году

Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки. Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.

https://habr.com/ru/companies/ibs/articles/885868/

#react #библиотеки #redux #zustand #mobx #rtk_query #swr

Найди 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 настолько хорош как о нем говорят.

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

#mobx #redux #frontend

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

This must be some of the magic as to how adobe got #photoshop running in the browser with #lit and #mobx - https://github.com/adobe/lit-mobx

for anybody else who has trouble keeping track of #reactjs #hooks with dependencies and #mobx (or #mobxStateTree, in my case) #observable objects, i've got a sandbox that evolves as i run into things that confuse me

https://codesandbox.io/s/wizardly-estrela-8tyjys?file=/src/App.js

#frontend #js #javascript

This would be a really interesting development for the #web & #JS in general: https://eisenbergeffect.medium.com/the-future-of-native-html-templating-and-data-binding-5f3e52fda259

Templating is neat, data binding is very cool, but personally just getting #signals natively into JS would be *incredible*!

I use #Mobx absolutely everywhere, even in Node, and its an incredible model that hugely improves how you think about & manage state. Native widely available support would be an absolute dream.

A bunch of shiny new goodness in #dart: https://medium.com/dartlang/announcing-dart-3-53f065a10635

Over time dart became my go-to for quick UI. #flutter is a pleasure to work with, and they have #mobx for easy store management. The dependency story is less insane than nodejs, too.

Of course flutter sucks really bad when it comes to behaving like a good native app would (anywhere, really. Even flutter web target sucks). But it allows to move fast and that's why it's ideal for small hacks.

#Signals are just the reactivity model from #Solid, #MobX, #Ember, #Knockout, et al. It pushes a notification with an #observable-like mechanism that something has changed, there’s a dependency graph (implicit or explicit) that is notified. Then, it schedules a pull to calculate values. #ReactJS #Preact #javaScript #webDev #frontend

Anyone had any experiences running 5.x and 6.x versions of #mobx on the same page?

We're running into some issues with conflicting versions across a few different components. Already using the isolateGlobalState flag in all cases but still losing reactivity in the v6 version that is lazy loaded late.

@mweststrate

Hooks are a problem in React, they increase complexity and have odd behaviors and footguns, agreed!

mobx has been out there fixing this for years. Literally do none of these things, just use mobx, and go back to enjoying frontend dev again 🎉

#react #state #mobx

https://emnudge.dev/blog/react-hostage

Officially on break for *two whole weeks*. Most likely going to be working on tempusgameit over the break when I want to do some coding.

It's atrophied over the past two years and needs a bit of loving.

Having spent two years professionally in #mobx it is going to be interesting to transition back to #redux for a little bit.

https://trello.com/b/0qj8Jtr9/tempusgameit

https://tempusgameit.com