@@ayub_begimkulov Хотелось бы сначала базовые понятия, как работают под капотом, как правильно работать с асихронностью, потом уже что продвинутее, по типу custom observables, lazy observables (если конечно будет инетерс у зрителей к этому). Думаю вообще в ютубе будешь одним из немногих, кто это тему поднимет. Понимаю, что у MobX нет популярности как у редакс, но может найдется отклик у тебя на канале, кому это нужно в работе.
@@ayub_begimkulov Еще хотелось бы узнать подробно про mobx-state-tree и mobx-keystone. Например опыта с mobx особо нет, однако когда начинаешь читать документацию и статьи, то натыкаешься на эти библиотеки и до конца не понятно, что они такого дают на практиче, чего нет у ванильного mobx
@@ayub_begimkulov оптимизация обзерверов с mobx. как пишут в документации, что их "мировозрение" отличается от того же redux, почему нужно разбивать все на более мелкие компонент и тд
Классно, что обрисовал разницу в подходах. В остальном тоже всё интересно. Оценка по практике тоже всегда полезна и на мой взгляд крайне корректная ,) Супер, спасибо!!!
34:35 Кэш менеджмент - это rtk query и react query? Они считаются стейт менеджерами на минималках для простых проектов? Используются вместе со стейт менеджерами?
Redux Toolkit и MobX - для локальных состояний (тема, пользователь), RTK Query и React Query - для состояний на сервере (содержимое таблиц базы данных).
@@biLLie_wiLLie клиентское состояние лучше не хранить на сервере, но почти всегда есть база данных, котороя и является серверным состоянием (stateful server). Балансировщики нагрузки, сервера приложений - это сервера без состояния (stateless server).
@@paemox У тебя формулировки какие-то очень странные. Mobx/Редакс (toolkit + query) - это для глобального состояния, в котором хранятся какие-нибудь (серверные) данные
Mobx - для данных типа текущего юзера/темы/управления сложным ui. Context Api + swr/react-query - для всего остального. Каждую страницу, где нужны данные, оборачиваешь в контекст и прокидываешь необходимые данные
Спасибо огромное, расскажи пожалуйста про кеш менеджмент в частности про rtk query, интересует кейс когда получаешь массив объектов с бд , как его поля изменять и опять записать в бд ( пока только думаю закидывать в массив стейта, от туда мапить в компоненте фильтруя по айдишнику и метать опять в стейт чтоб потом закинуть на сервак, получается дичь, уроки в основном по примитивным тудушкам одностроковым везде а как объекты менять не показывают )
Привет! А если redux toolkit использовали бы, то он бы не стал ререндерить весь лист при изменении одного айтема?( То есть тут они с mobx похожи, да? )
@@ayub_begimkulov, странно.. А почему так. Тулкит ведь точечно тогл делает для отдельного элемента, то есть мутирует и проксями ловит. Нет же иммутабельности, из-за которой весь лист пересоздается. Или он под капотом иммутабельность эту делает подобно бойлерплейтному дефолтному редаксу?
@@romandeveloper7720 тулкит использует библиотеку Immer. В редьюсере всё выглядит как мутабельное изменение объекта, но это ты меняешь черновик. Далее с помощью Immer по изменению черновика будет создан новый объект, с которым поступят по стандартным правилам Редукса - т.е. заменят старый объект на новый, причем так же и на всех уровнях выше. Тулкит нужен для некоторого удобства кодинга, но природа Редукса остается прежней.
Слушай, а подскажи пожалуйста, при мини-реализации mobx во время первого запуска autorun записываются все все проперти (для которых сработал get) и зависимости в deps map. Но что если есть некоторые зависимости внутри if'ов и при первом запуске autorun геттер на них не сработает. Будут ли тогда те свойства реактивны?
я наоборот думаю что новичку мобикс легче понять хочу узнать твоё мнение насчёт того какую вещь лучше использовать для загрузки данных с бека на redux(thunk vs createThunk vs RTK-query)
Если не хочешь pain in the ass, то бери mobx для глобальных данных типа текущего юзера или для управления сложным ui, а для остального - контекст + swr/react-query
мужики, вы недостаточно точно поняли вопрос. я сам на всех своих проектах имел стек mobx + react-query(с кайфом). но у меня на работе redux, я хочу узнать что круче для управления кешем и это внедрить(внедрение не бесплатно, поэтому надо сначала очень хорошо понять что лучше)
@@роматарасов-о8л можешь оставить редакс для того, для чего он сейчас применяется и использовать конекст + react-query/swr для кеша. На своем проекте я использую swr
прикольно, что подход разный, но у меня быо представление, что mobx как-то связан с rx js. и как бы прикольно, observable , но по сути , какая разница, когда тебе не приходится особо с этим работать? оно все под капотом делает, и визуально работает так же, как редакс. в принципе не очень понимаю зачем Mobx использовать, если у него размер больше, чем даже у тулкита, а у тулкита громадные возможности, встроенные плагины типа query и thunk и можно очень много чего с ним сделать. а с mobx тебе придется самим все писать?) причем useSelector работает похожим образом, он подписывается на обновления и если значение меняется стейта, только тогда он делает forceRender компонента, который использует useSelector
а можно использовать в крупных проектах rtk query для запросов ? или лучше руками через axios все делать ? а так урок офигенный , как всегда ты лучший )
Блин, а у меня возник вопрос с туду листом и mobx, обязательно ли там создавать context.js? Я делала проект, где просто создавала store и просто в обернутом в observer компоненте дёргала нужный класс.. И теперь мне кажется, что я делала неправильно(
Нет, можно и без контекста обойтись. Однако если использовать контекст, то будет проще тестировать, так как можно будет в контекст передавать фейковый стор с нужными данными.
Айюб, очень хотелось бы увидеть небольшой разбор реального проекта на базе React, чтобы понимать, как там все взаимодействует и примерный уровень вхождения для джунов. А то вроде думаешь, что идешь по нужному пути, но все равно есть сомнения в правильности или достаточности знаний
👍, но для меня redux простой был только на todo. Saga, middleware, таймеры всякие, вечные перерендеры. Я вешался просто вначале. 🤬🤯🥵 Везде пишут, что redux тупой, простой, но додумался только Абрамов, не Facebook даже с flusk!!!. Wtf ???
Есть такое. Но в любом случае, понять как работает Redux легко, а MobX для многих "магия". Ну и в целом с Redux все знакомятся еще во время изучения реакт. А так я согласен, что Mobx намного легче.
@@ayub_begimkulov Redux не обязателен для React, там даже другая комманда разработчиков. Разве что отсталые курсы пихают его по привычке. React Query более актуален - в веб приложениях состояние хранитса в основном на сервере.
@@paemox Я вроде про обязательность redux вместе с react и не говорил) А у react-query же цель вообще другая. Это кеш менеджмент, а не глобальное хранилище стейта. Понятное дело, что есть много приложений, где можно redux полностью на react-query поменять, но это уже другой разговор же.
А почему ты считаешь, что они мощнее? Можешь раскрыть мысль? Чем редакс - вполне возможно. Это по сути его аналоги с небольшими изменениями/улучшениями. А MobX вообще же о другом. Мутабельность, прокси под капотом и соответсвенно меньше не нужных рендеров и вычислений. Как по мне, это немного разные вещи. И у MobX особо сейчас не вижу конкурентов.
Не писал фронт 4 года, появилась нужда в своем сайте, зашел сюда чтобы определиться с выбором стейт менеджера и у меня задница к креслу прилипла от такого колличества синтаксического сахара
@@paemox да я просто так написал когда увидел, что у него за неделю миллион установок как и мобх. А так да пробовал и то и то, мне тоже кажется мобх проще, плюс если сложная бизнес логика можно в ооп писать.
Спасибо за труд! Было бы неплохо, если б презентация была в темной теме, глазам больно. Хотя тут кому как наверное, но редактор кода же в темной теме, неплохо было бы придерживаться одной темы
Спасибо за фидбэк! Попробую в темной снять, посмотрим, как получится. Но так вообще у меня и барузер в белой, так что тут одинаково все равно везде не будет.
После перехода на rtk, я полюбил редакс ещё сильнее, там уже нет никакого бойлерплейта (возможно моего опыта мало, что бы судить объективно), большое кол-во необходимых фитч есть под капотом. Всё никак не доберусь до zustand, хотя ещё помню, что бы jotai, но как всегда отмазки - время, работа и тд (
Вижу под видео очень много подобны комментов. Но тут нужно учитывать, что подходы работы со стейтом у zustand/redux другие по сравнению с mobx. zustand - это по сути улучшенный redux. Если глянешь в исходники (github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L100) там такой же стор считай создается, как и в redux. А MobX на прокси основан, то есть каждый компонент понимает, на какой именно части стейта он завязан. Соответственно лишней работы вообще не будет. Ну и в целом работа со стор немного другая с точки зрения DX. Пока у MobX я прям не вижу конкурентов, однако хотелось бы.
Привет. Не уделил внимания в видео этому моменту. Реакция - это функция (callback переданный в autoRun). Она будет вызываться тогда, когда поменяются реактивные значения, используемые внутри нее. Вот наглядный пример: ```ts const state = observable({ a: 5, b: 'test' }); // функция-колбэк будет реакцией autoRun(() => { console.log(state.b); }); ```
Можно больше про МобХ, уж очень мало про него информации на Ютуб. Спасибо за материал!
Привет. Спасибо за фидбэк! А что конкретно хочешь увидеть по MobX?
@@ayub_begimkulov REACT+MST+REACT QUERY+TYPESCRIPT. Вот хотелось бы что нибудь на таком стеке.
@@ayub_begimkulov Хотелось бы сначала базовые понятия, как работают под капотом, как правильно работать с асихронностью, потом уже что продвинутее, по типу custom observables, lazy observables (если конечно будет инетерс у зрителей к этому). Думаю вообще в ютубе будешь одним из немногих, кто это тему поднимет. Понимаю, что у MobX нет популярности как у редакс, но может найдется отклик у тебя на канале, кому это нужно в работе.
@@ayub_begimkulov Еще хотелось бы узнать подробно про mobx-state-tree и mobx-keystone. Например опыта с mobx особо нет, однако когда начинаешь читать документацию и статьи, то натыкаешься на эти библиотеки и до конца не понятно, что они такого дают на практиче, чего нет у ванильного mobx
@@ayub_begimkulov оптимизация обзерверов с mobx. как пишут в документации, что их "мировозрение" отличается от того же redux, почему нужно разбивать все на более мелкие компонент и тд
Спасибо большое за эти примеры с кодом! Помогло быстро понять суть редакса и отличий.
Хорошо все разложил, молодчина, спасибо тебе за качественный материал, структурированность и хорошую подачу 👍 Ну и звук отличный 👏
Спасибо за видео. Если будет интересно - сделай пожалуйста примеры архитектурных решений MobX и их сравнение
Классно, что обрисовал разницу в подходах. В остальном тоже всё интересно. Оценка по практике тоже всегда полезна и на мой взгляд крайне корректная ,)
Супер, спасибо!!!
Рад помочь!
Супер контент! Не заслуженно мало просмотров и сабов
Спасибо за фидбэк!
Думаю надо подачу улучшать - а остальное дело времени.
Впал в транс, когда смотрел ролик. Очнулся в конце. 😄 Отличное изложение! Спасибо большое!
Рад, что понравилось.
Спасибо за видео, отличный контент
Не за что!
Топовый видос, спасибо за труд! 👍
Спасибо за фидбэк!
Спасибо! очень помогло
34:35 Кэш менеджмент - это rtk query и react query? Они считаются стейт менеджерами на минималках для простых проектов? Используются вместе со стейт менеджерами?
Redux Toolkit и MobX - для локальных состояний (тема, пользователь), RTK Query и React Query - для состояний на сервере (содержимое таблиц базы данных).
@@paemox можно хранить стейт на сервере?
@@biLLie_wiLLie клиентское состояние лучше не хранить на сервере, но почти всегда есть база данных, котороя и является серверным состоянием (stateful server). Балансировщики нагрузки, сервера приложений - это сервера без состояния (stateless server).
@@paemox У тебя формулировки какие-то очень странные. Mobx/Редакс (toolkit + query) - это для глобального состояния, в котором хранятся какие-нибудь (серверные) данные
Mobx - для данных типа текущего юзера/темы/управления сложным ui. Context Api + swr/react-query - для всего остального. Каждую страницу, где нужны данные, оборачиваешь в контекст и прокидываешь необходимые данные
Айюб, большое спасибо!
Интересно было узнать, как MobX и Redux работают под капотом.
Хак с оптимизацией тудушек крутой👍
Спасибо за фидбэк!
Спасибо большое!
Рад помочь!
Спасибо большое!❤️
Рад помочь!
Привет. Есть в планах видео про recoilJS?
Спасибо огромное, расскажи пожалуйста про кеш менеджмент в частности про rtk query, интересует кейс когда получаешь массив объектов с бд , как его поля изменять и опять записать в бд ( пока только думаю закидывать в массив стейта, от туда мапить в компоненте фильтруя по айдишнику и метать опять в стейт чтоб потом закинуть на сервак, получается дичь, уроки в основном по примитивным тудушкам одностроковым везде а как объекты менять не показывают )
Привет!
А если redux toolkit использовали бы, то он бы не стал ререндерить весь лист при изменении одного айтема?( То есть тут они с mobx похожи, да? )
В видео мы не использовали чистый редакс. Все примеры было на тулките. Так что тут он сильно не поможет.
@@ayub_begimkulov, странно.. А почему так. Тулкит ведь точечно тогл делает для отдельного элемента, то есть мутирует и проксями ловит. Нет же иммутабельности, из-за которой весь лист пересоздается. Или он под капотом иммутабельность эту делает подобно бойлерплейтному дефолтному редаксу?
@@romandeveloper7720 тулкит использует библиотеку Immer. В редьюсере всё выглядит как мутабельное изменение объекта, но это ты меняешь черновик. Далее с помощью Immer по изменению черновика будет создан новый объект, с которым поступят по стандартным правилам Редукса - т.е. заменят старый объект на новый, причем так же и на всех уровнях выше. Тулкит нужен для некоторого удобства кодинга, но природа Редукса остается прежней.
mobx крутой)
В редаксе как вариант еще в useSelector можно было передать вторым параметром функцию, которая бы контролировала ререндер
Да, можно. Но в первом случае она бы не особо помогла, там в любом случае надо было бы весь лист перерендеривать.
Молодец
Слушай, а подскажи пожалуйста, при мини-реализации mobx во время первого запуска autorun записываются все все проперти (для которых сработал get) и зависимости в deps map. Но что если есть некоторые зависимости внутри if'ов и при первом запуске autorun геттер на них не сработает. Будут ли тогда те свойства реактивны?
Да, они станут реактивными, но только после того, как пройдет if внутри которого они лежат.
я наоборот думаю что новичку мобикс легче понять
хочу узнать твоё мнение насчёт того какую вещь лучше использовать для загрузки данных с бека на redux(thunk vs createThunk vs RTK-query)
RTK, MobX - для клиентских состояний, а для данных с бека лучше React Query.
Если не хочешь pain in the ass, то бери mobx для глобальных данных типа текущего юзера или для управления сложным ui, а для остального - контекст + swr/react-query
мужики, вы недостаточно точно поняли вопрос.
я сам на всех своих проектах имел стек mobx + react-query(с кайфом).
но у меня на работе redux, я хочу узнать что круче для управления кешем и это внедрить(внедрение не бесплатно, поэтому надо сначала очень хорошо понять что лучше)
@@роматарасов-о8л по-моему лучше MobX и React Query сейчас не найти.
@@роматарасов-о8л можешь оставить редакс для того, для чего он сейчас применяется и использовать конекст + react-query/swr для кеша. На своем проекте я использую swr
интересно
прикольно, что подход разный, но у меня быо представление, что mobx как-то связан с rx js. и как бы прикольно, observable , но по сути , какая разница, когда тебе не приходится особо с этим работать? оно все под капотом делает, и визуально работает так же, как редакс. в принципе не очень понимаю зачем Mobx использовать, если у него размер больше, чем даже у тулкита, а у тулкита громадные возможности, встроенные плагины типа query и thunk и можно очень много чего с ним сделать. а с mobx тебе придется самим все писать?) причем useSelector работает похожим образом, он подписывается на обновления и если значение меняется стейта, только тогда он делает forceRender компонента, который использует useSelector
а можно использовать в крупных проектах rtk query для запросов
? или лучше руками через axios все делать ? а так урок офигенный , как всегда ты лучший )
Лучше React Query для запросов, RTK Query не всегда можно применить и напоминает Backbone.
@@paemox Привет. А почему нельзя его всегда применить?
В RTQ нет infinite query
можно конечно. но если привязки к redux нет - то лучше брать react-query (как уже отписали ниже).
Блин, а у меня возник вопрос с туду листом и mobx, обязательно ли там создавать context.js? Я делала проект, где просто создавала store и просто в обернутом в observer компоненте дёргала нужный класс.. И теперь мне кажется, что я делала неправильно(
Нет, можно и без контекста обойтись. Однако если использовать контекст, то будет проще тестировать, так как можно будет в контекст передавать фейковый стор с нужными данными.
Привет, спасибо за полезный контент
Рад помочь!
Айюб, очень хотелось бы увидеть небольшой разбор реального проекта на базе React, чтобы понимать, как там все взаимодействует и примерный уровень вхождения для джунов. А то вроде думаешь, что идешь по нужному пути, но все равно есть сомнения в правильности или достаточности знаний
👍, но для меня redux простой был только на todo. Saga, middleware, таймеры всякие, вечные перерендеры. Я вешался просто вначале. 🤬🤯🥵
Везде пишут, что redux тупой, простой, но додумался только Абрамов, не Facebook даже с flusk!!!. Wtf ???
Тоже самое, освоил "сложный" MobX, а "простой" Redux так и не смог.
Есть такое. Но в любом случае, понять как работает Redux легко, а MobX для многих "магия". Ну и в целом с Redux все знакомятся еще во время изучения реакт.
А так я согласен, что Mobx намного легче.
@@ayub_begimkulov Redux не обязателен для React, там даже другая комманда разработчиков. Разве что отсталые курсы пихают его по привычке. React Query более актуален - в веб приложениях состояние хранитса в основном на сервере.
@@paemox Я вроде про обязательность redux вместе с react и не говорил)
А у react-query же цель вообще другая. Это кеш менеджмент, а не глобальное хранилище стейта.
Понятное дело, что есть много приложений, где можно redux полностью на react-query поменять, но это уже другой разговор же.
А где ссылки на код?
Добавил. Спасибо, что отписал.
ты лучший!)
Спасибо!
А как же Effector или Zustand ? Уже давно появились стейт менеджеры намного мощнее этих двух.
А почему ты считаешь, что они мощнее? Можешь раскрыть мысль?
Чем редакс - вполне возможно. Это по сути его аналоги с небольшими изменениями/улучшениями.
А MobX вообще же о другом. Мутабельность, прокси под капотом и соответсвенно меньше не нужных рендеров и вычислений.
Как по мне, это немного разные вещи. И у MobX особо сейчас не вижу конкурентов.
Не писал фронт 4 года, появилась нужда в своем сайте, зашел сюда чтобы определиться с выбором стейт менеджера и у меня задница к креслу прилипла от такого колличества синтаксического сахара
да напиши всю приложуху в одном файле на простой ваниле, сдай проект, получи деньги и забей. ну что как маленький
лайк однозначно
Спасибо!
Zustand
Zustand выглядит проще чем Redux Toolkit, но MobX еще проще. Непонятно зачем вообще нужен Zustand и какие у него преимущества.
@@paemox да я просто так написал когда увидел, что у него за неделю миллион установок как и мобх. А так да пробовал и то и то, мне тоже кажется мобх проще, плюс если сложная бизнес логика можно в ооп писать.
@@ev_geniy17 Непонятна популярность Zustand, MobX лучше его во всем, кроме размера библиотеки, но кому нужны диалапщики?
Zustand - это Redux Toolkit здорового человека.
Спасибо за труд! Было бы неплохо, если б презентация была в темной теме, глазам больно. Хотя тут кому как наверное, но редактор кода же в темной теме, неплохо было бы придерживаться одной темы
Спасибо за фидбэк! Попробую в темной снять, посмотрим, как получится.
Но так вообще у меня и барузер в белой, так что тут одинаково все равно везде не будет.
effector !
Effector скорее redux'у конкурент.
После перехода на rtk, я полюбил редакс ещё сильнее, там уже нет никакого бойлерплейта (возможно моего опыта мало, что бы судить объективно), большое кол-во необходимых фитч есть под капотом. Всё никак не доберусь до zustand, хотя ещё помню, что бы jotai, но как всегда отмазки - время, работа и тд (
Не бойлерплейта только в MobX, а во всех твоих библиотеках есть в некой мере, Redux, RTK - больше, другие - меньше.
zustand более лаконичнее смотрится конечно чем редакс или мобх, я думаю он скоро должен вытеснять их
Далеко не скоро, будет куча проектов, которые нужно будет поддерживать. Жикури и пхп до сих пор живут
MobX - лаконичнее Zustand, в нем ООП и мутабельность состояния из коробки. В Zustand всего лишь чуть меньше boilerplate чем в Redux.
Вижу под видео очень много подобны комментов. Но тут нужно учитывать, что подходы работы со стейтом у zustand/redux другие по сравнению с mobx.
zustand - это по сути улучшенный redux. Если глянешь в исходники (github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L100) там такой же стор считай создается, как и в redux.
А MobX на прокси основан, то есть каждый компонент понимает, на какой именно части стейта он завязан. Соответственно лишней работы вообще не будет. Ну и в целом работа со стор немного другая с точки зрения DX.
Пока у MobX я прям не вижу конкурентов, однако хотелось бы.
@@ayub_begimkulov У MobX конкурент - valtio.
@@ayub_begimkulov MobX - он такой один)
"все реактивные значения должны использоваться внутри реакции" ну да, наверно. Ты о чем вообще, че за реакция?
Привет. Не уделил внимания в видео этому моменту.
Реакция - это функция (callback переданный в autoRun). Она будет вызываться тогда, когда поменяются реактивные значения, используемые внутри нее.
Вот наглядный пример:
```ts
const state = observable({ a: 5, b: 'test' });
// функция-колбэк будет реакцией
autoRun(() => {
console.log(state.b);
});
```
Реакции - это функции-обработчики изминения состояния хранилища.
zustand лучше
Чём?
зачем так тараторить?
в новых видео речь должна лучше быть)