Abr@X@bra.ru
Что использовать MobX или Redux?
Что использовать MobX или Redux?

Что использовать MobX или Redux?

02.06.2017
1414

Стоит ли использовать MobX если ли в проект работает уже на Redux? Если да, то когда? В каких проектах, для каких проектов MobX подойдет лучше?

Но сначала небольшие вводные. Про Redux слышали все, библиотека для управления состоянием в JS приложениях.

Сам по себе Redux не привязан к React, он может быть использован в паре с любым фреймворком. Или работать вообще без него, полностью автономно.

Но больше популярность и применения он имеет именно в паре с React. Про MobX возможно вы слышали только название. О нем я расскажу вкратце, что это тоже библиотека для управления состоянием. MobX также может использоваться с любым фреймворком, но раскручен он именно в React экосистеме. При этом MobX и Redux, противоположны практически во всем. И тем интересней их сравнивать.

Redux, требует неизменяемой, имутабильной структуры данных. MobX, напротив за мутабильность. Redux, популяризирует пропорциональные подходы. MobX, пропагандирует использование классов, которые ближе к традиционному ООП. Redux дает полный контроль над потоком данных. Из за чего приходиться писать много кода. MobX напротив, это много магии, реализованной внутри самой библиотеке. Которая позволяет писать в итоге меньше кода.  

И вот, что я думаю в вопросе выбора между, MobX и Redux. Если вы в процессе изучения React и его экосистемы, если вы только планируете начать свой путь во front-end и ищете работу над проектом на React, изучайте Redux, практикуйте Redux, он повсюду, он везде.

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

Я не обладаю точной статистикой, но по ощущениям процент использование Redux и MobX – это 95% против 5%. Или даже 99% против 1% в пользу Redux. Но при этом мы должны понимать, что React сам по себе, очень популярен. Очень много проектов, огромная экосистема. По этому даже 1% или 5%, являются довольно большим числом в абсолютном соотношении. И выбор в пользу MobX, вряд ли можно назвать маргинальным.  

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

Обратите внимание, я делаю акцент не на технические детали. А на бизнес реалии. Redux сегодня, это как азбука для React разработчика. А Mobx, опциональное знание для интересующихся. Лично я открыв для себя Mobx понял, что он делает разработку мох проектов, гораздо продуктивней и эфективней.

Иногда при сравнение Redux и MobX, оперируют к размеру проекта. Например, маленькие проекты удобнее на MobX, а большие на Redux. В прочем читал и полностью противоположное убеждения. Маленькие можно и на Redux, но при определенном размере лучше перейти на MobX.   

Я с данным мнением не согласен. На практике, мы имеем успешные проекты всех типов. Маленькие и большие. И на Redux и на MobX.

Если говорить о больших проектах, то часто звучит такой аргумент – с MobX новым разработчикам сложнее разобраться в большой кодовой базе, а в Redux якобы напротив, ваш проект структурирован. Благодаря четкому разделению на actions, reducer, selectors. Не согласен.

Если мы говорим о больших проектах, то разделения на actions, reducer и selectors, которые на диктует Redux, никак не облегчает структуру и понимания большой кодовой базы. В интернете миллион статей на тему, как структурировать Redux приложения. И рецепты у всех разные. Actions, reducer и selectors – это лишь, три типа макарон из которых можно наварить еще тот спагетти код. Как и в MobX, собственно.

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

MobX, часто критикуют за излишнюю магию. Но согласитесь, дополнительные абстракции, это как раз то, что позволяет нам создавать сложные системы. Мы же не пишем web сайты в машинном коде. Вопрос лишь в правильном балансе. Слишком много абстракции и магии, действительно могут помешать, но много это сколько?

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

В итоге, MobX приложения и грамотно написано Redux приложения, работают одинаково быстро.

Если посмотреть на дополнительную экосистему дополнительных библиотек. Для Redux она развита на порядок лучше. Но для MobX, я бы сказал она развита достаточно хорошо. Чтобы удобно и эффективно разрабатывать реальные приложения.

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

Зачастую мы боимся выбрать не самую популярную библиотеку, так как столкнемся с проблемами и вопросами, на которые не найдем ответов. Боимся, что будем страдать от слабой документации и т.д.

Все эти страхи можно переадресовать и к MobX, вопрос лишь к величине приемлемого риска. Я варюсь в экосистеме MobX уже более года и считаю, что величина этого риска заметно уменьшилась. Я чувствую, что стою на твердой земле. В конце концов MobX – это библиотека управления состоянием номер два по популярности после Redux. Не бойтесь MobX, пробуйте с ним работать!

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

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

Первая ссылка, это достаточно старое видео (4 мин.) в котором сравнивают Redux и Mobx.

В свое время, когда я его посмотрел первый раз. Я тогда еще ничего не знал про MobX. И честно говоря оно меня тогда не убедило попробовать MobX.

Вторая ссылка на видео (25 мин), с конференции React 2017. Выбраны очень четкие пункты для сравнения, но нет глубины. Собственно по этому длительность всего 25 мин.

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

Также советую посмотреть курс от автора самой библиотеке – Michel Weststrate. Там будет много наглядных примеров.

Пишите на Reac и Mobx!

Ссылончики:

1 - Understanding MobX vs Redux (4min)

https://www.youtube.com/watch?v=83v8cdvGfeA

2 - Preethi Kasireddy - MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 (25m)

https://www.youtube.com/watch?v=76FRrbY18Bs

3 - Comparing Redux and MobX with two CTO's and React experts (1h17m)

https://www.youtube.com/watch?v=ZGVwMkrL2n0

4 - Manage Complex State in React Apps with MobX

https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx




MobX, Redux
Читайте также:
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
React vs Angular: подробное сравнение

React vs Angular: подробное сравнение

Должен ли я выбрать Angular или React? Сегодняшний полярный ландшафт JavaScript-фреймворков заставил многих разработчико...
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать