Варианты реактивного программирования в реальных проектах (не RxJS)
Переглядів 9,756
День томуСлыша фразу “реактивное программирование” в React, большинство думает об инструментах типа RxJS, но надо помнить, что реактивное программирование - это парадигма, а не инструмент. И сегодня мы рассмотрим как эта парадигма была применена в реальных проектах
Забрать бесплатные ресурсы и 4000 бонусов от Cloud․ru можно на сайте: sc.link/GOnZX
ТГ канал - t.me/it_sin9k
Поддержать Айти Синяка можно здесь:
UKposts: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:30 Машинка на халяву
01:54 Что такое реактивное программирование
03:50 Инструменты
05:55 Реактивная инициализация проекта
07:43 Изучаем пример в разрезе
09:30 JSX нюансы
10:20 Итоги подхода
11:31 Чистые инструкции
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
@ivanp7697 10 днів тому
У нас довольно старый и очень большой проект, у которого несколько раз менялся главный мейнтейнер. И каждый новый приносил свое видение «прекрасного», начинал это внедрять, а потом на полпути либо сам уходил из проекта, либо его уходили. В итоге у нас сейчас в проекте и саги, и rtk-query, и просто редакс, и довольно большой пласт логики просто в глобальном контексте лежит, а в стилях у нас и css модули, и styled components используются. Я этот подход называю: «пишу, как в кайф»😅
@it-sin9k 10 днів тому
ахахах) наболело) я не раз приходил такие проекты зачищать))
@user-kt1kx6th7z 7 днів тому
hello
@ivanp7697 7 днів тому
@@user-kt1kx6th7z world
@ailabinsev 4 дні тому
сочувствую...
@zeromvx4343 11 днів тому
По поводу MobX. Сейчас декораторы - deprecated и все юзают makeObservable и makeAutoObservable. Также никто не мешает писать чистые инструкции используя Mobx. Все зависит от того, как спроектировали систему.
@it-sin9k 10 днів тому
в том проекте люди злоупотреблялии именно reaction( .. ) когда ты можешь подписаться на что то и реагировать. И там был прям целый пинг понг событий) но в итоге мы тоже перешли в рамках mobx на чистые инструкции и все стало норм работать) поэтому я и говорю, что нужно обсуждать не инструменты, а подходы написания кода)
@badcoder1337 11 днів тому
Выкинули effector, затащили MobX, запретили в нем реакции регламентом и кайфуем от чистого кода
@andyjs666 8 днів тому
А можете в двух словах написать, что пошло не так с Эффектором?
@SckottJackson 11 днів тому
Используем на проектах effector. Если заранее продумывать схему потока данных и не перебарщивать со сложностью, то вполне удобно с этим работать
@BogdanPolonsky 11 днів тому
Приветик) Мне кажется тут сильно от масштаба проекта зависит, например если всё приложение это небольншой монолит, где можно заранее продумать все потоки данных, тогда в реактивном подходе хоть с тем же эффектором всё будет окей. Но если проект становится настолько большим, что приходится переходить на микрофронты, то каждый из них внутри может и пусть будет реактивным, но связи между ними не стоит делать реактивными, слишком велик шанс поменяв в одном месте разрушить что-то в другом. Опять же, всё утыкается в продумывание заранее. А потом переделывание всего потока данных если оказалось, что бизнес требования поменялись.
@SckottJackson 11 днів тому
@@BogdanPolonskyОо, привет, неожиданная встреча) Абсолютно согласен с тобой - микрофронты, как и любые другие юниты приложения, стоит делать менее связанными
@it-sin9k 11 днів тому
вот тут самое сложное) продумать схему потока данных, донести ее до всей команды в 20 человек. И при этом надо как то не переборщить со сложностью, а это зачастую самое сложное))
@user-sr5ts2jz7e 11 днів тому
Года 3-4 назад пытался с ним поработать вообще не понравилось
@BogdanPolonsky 11 днів тому
@@SckottJackson да, неожиданная встреча)) хотя мне кажется сейчас много кто синяка смотрит в комьюнити, так что можно знакомых встретить)
@user-un4xi6nb2u 11 днів тому
Спасибо за видео! Отслеживать через редакс саги совсем не сложно, достаточно подключить мидлварку для логирования (редакс сага работает по принципу конвейера мидлварок) и она показывает каждый задиспатченный экшн в деталях
@it-sin9k 11 днів тому
спасибо!) хорошая идея) звучит как будто дебажить микросервисы на бэке) сугубо по логам)
@golden_smiles 10 днів тому
@@it-sin9k Это вообще-то главное преимущество редакса, как раз. Всегда понятно какой акшен прилетел и что произошло по логам. Удивительно, если ктото этого не делает, если говорить о больших проектах.
@it-sin9k 10 днів тому
я обычно минимизирую использование редакса до минимума) что можно локально хранить, храню локально) а что надо глобально, то уже только тогда. В итоге и дебажить особо ничего не нужно, так как там простые вещи)
@user-uw9xp8en3v 10 днів тому
@@golden_smiles я думаю, это не преимущество, а вынужденная мера, так как стейт глобальный
@egorovsa 11 днів тому
Привет. Спасибо за видос, как всегда интересно. Но вот насчет редакс-саги я не совсем понял. Если мобыкс таки да, поскольку там сеттеры(хз как щас , раньше было) оверрайднули, то сага таки нет, ибо это просто реализация мидлы, как и танки итд, но на генераторах. Проще мне думается было бы просто сказать Редакс и Мобыкс ,
@it-sin9k 10 днів тому
мы обсуждаем инструменты) а реактивное программирование можно достичь на огромном количестве инструментов) по факту, если есть поток событий, на которые реагируют, то это уже большой шаг в стороны реактивщины)
@mrkva1367 9 днів тому
Привет, Айти Синяк и его команда. Вы лучшие
@it-sin9k 9 днів тому
Привет ;-) спасибо!
@alexanderskusnov5119 8 днів тому
Да нет, обычные рекламщики. минус
@someChicoRy 9 днів тому
🔥🔥🔥
@grol5555 10 днів тому
У нас на проекте в качестве стора реактивный effector, выкинули mobX. Ну нет проблем, которые описаны в видео. Как-то всё решается через event, effect и store. Если действительно «лютая» бизнес-логика, техлид заставляет рисовать диаграмму состояний, чтобы легко было понять. Где-то 2 недели потратил на обучение, а потом как-то всё стало просто логично и понятно. Просто логика у реактивного программирования иная. По моему опыту, реактивность нужна, когда уйма асинхронной бизнес-логики, которая то последовательная, то параллельная, то ждёт 3-х одновременных событий и ещё где-то в длинной цепочке появляется ошибка. MobX не тянет. Работал на проекте с Redux и Redux-Saga их понять в разы сложнее, чем реактивность.
@HEX_CAT 11 днів тому
Годный контент подъехал, благодарствуем❤
@hitmen061 8 днів тому
На проекте используем rtk query с тэг провайдерами и всё как-то само обновляется)
@filcondrat 11 днів тому
мне кажется подход signals как в solidjs частично решает перечисленные проблемы
@it-sin9k 10 днів тому
надо будет изучить)
@alexanderskusnov5119 8 днів тому
Обычное функциональное программирование (мне нравится Haskell), а также DSP-процессоры.
@NoName-zh7cc 10 днів тому
Саня, ты лучший
@it-sin9k 9 днів тому
спасибо!)
@user-ik7rp8qz5g 10 днів тому
Саги я лично не использовал из-за ущербного синтаксиса генераторов, но видел в интернетах такой комментарий: "Саги вам не нужны до тех пор, когда они действительно необходимы. Но тогда вам уже не саги нужны, а переписывать архитектуру приложения" А по теме - чем такой подход отличается от шины данных? Там ведь тоже одни компоненты в шину спамят, другие на нее подписываются, отлавливают нужные события и реагируют на них.
@it-sin9k 10 днів тому
так шина это тоже про реактивное программирование. Я не говорю, что реактивное программирование это плохо. Но это приводит в некоторых ситуациях к определенным результатам
@user-qn5mu3eq2w 10 днів тому
sin9k, идёшь на HolyJS?
@it-sin9k 10 днів тому
в онлайне буду смотреть)
@deantek 11 днів тому
я пытался попробовать RxJs, но мне нифига не дается, на работе с командой решили, что нам в принципе эта парадигма не нужна, просто юзаем стейт из rtk и не паримся, хотя наверно в банках такое надо
@it-sin9k 11 днів тому
не было проекта, где мне RxJs понадобился))
@deantek 11 днів тому
@@it-sin9k я пытался связать rxjs с react-native в рамках мультичейн криптокошелька, сам кошелек с разными блокчейнами создать удалось, но вот rxjs использовать было больно(
@CJIu3eHb 10 днів тому
Так rtk - тоже реактивное, как и все где есть Pub-Sub, как я понимаю. RxJS хорош там, куда его тащить спецом не надо ради пары случаев применения. Например, в том же ангуляре.
@deantek 10 днів тому
@@CJIu3eHb rtk банально проще
@aleksprimetv 10 днів тому
@@it-sin9kон лучше подходит где нужно какую то инфу с датчиков обрабатывать
@dalisoft 10 днів тому
Про рекламу, жалько что только от РФ можно зарегистрироваться. Хотел бы попробовать
@andreyrudin2286 10 днів тому
да там уже Computed т.е. то что должно быть Free tier уже не доступно (
@andreyrudin2286 10 днів тому
наврал, это в одной из форм не работал, реально создал ) 146 рублей/месяц на белый IP адрес ) работает.
@j1nger417 11 днів тому
Озбекистон ба пеш !!!
@azabroflovski 11 днів тому
+
@azabroflovski 11 днів тому
vue
@azabroflovski 11 днів тому
ИМХО дизайн реактивности Vue просто потрясающий, его декларативный подход делает код чистым и легко читаемым
@corvus278 10 днів тому
Реактивность хороша для ui слоя, что бы не заморачиваться актуализаций ui. Но если выносить её на другие уровни, то становится очень сложно простраивать флоу логики, из-за чего очень сложно дебажить и вносить новые изменения
@user-uw9xp8en3v 10 днів тому
@@corvus278 согласен, на других уровнях не нужно. Ну, конечно, если это не какие-то потоковые данные, тогда можно тот же RxJS воткнуть на тот слой, думаю
@NEAmico_mat 11 днів тому
First
@DavidTch 10 днів тому
Считаю очень плохо что реакт(гей) сообщество не приняло rxjs! Подозреваю потому что им показалось это слишком сложно! А rxjs очень хорош! Очень гибкий и удобный!
@vadimmasaltsev5292 10 днів тому
Ты чего такой обиженный)
@user-eb5yw9ui6o 10 днів тому
приведи примеры в каких кейсах именно? не работал с rxjs, но хотел бы узнать о его плюшках
@titsex 11 днів тому
Микрофончик шумит(
АйТи Синяк
Переглядів 9 тис.
Ulbi TV
Переглядів 474 тис.
Андрей Масалович
Переглядів 7 тис.
Sergey Nemchinskiy
Переглядів 20 тис.