Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити за 99 рублей: boosty.to/how-to-learn-it Какие тренажеры бывают: htmlacademy.ru/courses#fe-start Подписывайтесь: t.me/howToLearnIT ______________________________ 0:00 Что происходит с Redux? 01:38 Что за Recoil.js? 02:39 Атомы 04:08 Селекторы 5:46 Асинхронные запросы 7:07 Кто выше, сильнее, быстрее? 15:39 Эпилог ______________________________ RecoilJs: recoiljs.org/ Ролик про React18 и конкурентный режим: th-cam.com/video/2WjpGeTKqyE/w-d-xo.html Видео с ReactEurupe: th-cam.com/video/_ISAA_Jt9kI/w-d-xo.html Fireship про big O: th-cam.com/video/g2o22C3CRfU/w-d-xo.html #reactjs #react #recoiljs #javascript
Очень похоже, что появляется новый сильный конкурент, который имеет все шансы по популярности приблизиться к Redux и стать обычным решением для большинства проектов(чего не вышло у всех остальных новомодных тулзов). Тем более, что за спиной данного решения целый Facebook... Автор, ты только не забрасывай канал и не обращай внимания на небольшие просмотры. Гораздо важнее качество аудитории, чем ее масштаб(всякие Хауди Хо и Гоши Дудари тому подтверждение). У тебя получается очень качественный контент, который приятно и полезно смотреть не только джунам и интересующимся, но и ребятам поопытнее. Продолжай в том же духе и удачи тебе!
@@kamenskiyyyy у эффектора совершенно другая концепция. Это как React и Angular в мире стейтменеджеров, где условный Recoil - это React, либа для управления состоянием, а Effector - здоровенный Angular Фреймворк с уже написанной экосистемой из модулей Схожи они только тем, что оба используют функции
Спасибо за видео :) Брать комментарий Марка Эриксона за 2019 год кажется не уместным в 2022. React выпустил хук useSyncExternalStore, который решает проблему с concurrent модом. Более того Redux уже переписан на использование этого хука. Поэтому аргумент, что Redux не готов к чему то, это точно не справедливо. Более того React кор тим, знает как много разрабов по миру использует Redux и точно не допустит какой то несовместимости этой либы с новой версией React.
все перечисленные недостатки уже давно решены в rtk; плюс они завезли rtk query, так что редакс будет на подъеме в ближайшее время; у рекойла самая главная проблема что вне реакта он не применим, так что далеко не во всех проектах подойдет; и довольно давно не могут зарелизить даже 1.0 версию
Большинство перечисленных проблем редакса вначале видео, связаны с тем что в компонентах не должно быть бизнес логики, и судя по тому что сказано в видео дальше про рекоил, он этой проблемы никак не решает. В редаксе это решается сагами. По моему мнению единственный существенный минус у редакса в текущих реалиях это вызов всех редюсеров приложения на любой диспатч
Саги могут не всем понравиться, можно просто thunk’и. А если нужна работа именно с серверными данными, кэш, управление запросами, то лучше взять relay/apollo/rtk-query
Я использую Jotai, он похож на Recoil. Но нам он как то больше понравился. + Его можно использовать вместе с Zustand (аналог Redux). Что я и делаю. Не самое популярное решение, но выглядит не плохо
Привет, спасибо большое за твои видео! У меня к тебе просьба - расскажи как-нибудь про remix js. Ты просто суперски рассказываешь «что там под капотом»! :)
Recoil, со слов создателя, сделали чтобы решить некоторые проблемы на некоторых продуктах корпорации. Уж никак не official way. Просто команда решила, что можно recoil выложить в открытый доступ.
Очень напоминает NgRx в Angular. Концепция подписки на селекторы такая же. Только в ангуляре нет разделения на атомы и селекторы, все делается через селекторы, и их уровень сложности на твое усмотрение. Ну и соотвественно вся мощь rxjs тебе в помощь:)
Столкнулся с проблемой, что установить и прочитать состояние никак нельзя, кроме как через хук в компоненте. А такое иногда необходимо. Перешел не еффектор
А как же VALTIO? Перепробовав всё остановился на нём - очень функциональное и гибкое хранилище. Особенно радует возможность организовать его в том числе и на основе классов со всеми вытекающими плюсами.
6:12 может я чего-то не понимаю, но "раз селекторы чистые функции" и на экране код, где мы ходим в базу данных... Давно у нас запрос к БД стал чистой функцией?
Ну и следом сразу проблема. Вопрос к знатокам: если запрос к базе данных кешируется, то что произойдёт, когда у нас есть атом с id пользователя и селектор, в котором мы ходим в БД за информацией профиля. Теперь пользователь меняет имя, но у нас запрос по id закеширован...
@@profesor08 можно, но зачем запихивать в инструмент, который ожидает чтстую функцию (и на этом основании имеет право кешировать результат), не являющуюся чистой, а потом ему говорить, когда дропать кеш? Ну и, по классике, где-то забыть ему это указать, что всплывёт когда-то потом... Попахивает не лучшим кодом. Думаю там есть другие инструменты для этого.
@@ИмяФамилия-э4ф7в тебе в любом случае придется что-то и где-то кешировать и потом обновлять кеш. Ну и, по классике, где-то забыть обновить. Увы. Тут надо делать обновление таким образом, чтоб оно было связано с кешем и обновляло его. Если нет для этого встроенного апи, то делаются подобные вещи элементарно обернув вызов хука в свою функцию, которая будет делать все что надо.
Крутое видео, спасибо! Но я так и не понял как селектор рекоила понимает от каких атомов он зависит ведь аргументом передается только get функция. Как будет проходить кеширование?
@@ДмитрийАксенов-ы5л Да, но механизм всё равно неявный. Получается что функция селектора будет вызываться в любом случае (иначе как тогда понять к каким атомам был запрос?) и если там будет тяжелая логика то это тоже будет на производительности сказываться.
@@ievgenk.8991 get() внутри селектора подписывает его на следующее изменение прокинутого внутрь атома или селектора. Для динамических зависимостей тоже так: recoiljs.org/docs/api-reference/core/selector/#dynamic-dependencies
давно юзал эту штуку, одни положительные эмоции, как и от mobx. А от redux свалил давно и никогда не вернусь (с ним был производственный ад, особенно когда половина людей в команде не понимает как юзать саги). Да и вообще на vue перешёл с реакта.
Сказываеться, но это реально очень много логики должно быть. Настолько много, что рекоил просто не подойдет для такого большого приложения по причине отсуцтвия, назочем это упрощено - решений для борьбы с хаосом в логике. У каждого решения есть своя причина. Но вообще падение производительности решаемо, есть целая пачка либ которые решают эту проблему по разному.
@@nazarii.lazarchuk подскажи пожалуйста, а сколько нужно времени уделить pure/vanilla JavaScript чтобы начать учить фреймворки? Может написать пару проектов без них сначала, или как?
У реакта уже есть контекст, но почему-то многие не считают его за достойную альтернативу чему-либо. Понятия "стейт-менеджмент" и "бизнес-логика" сейчас уже являются устаревшими, ибо ВНЕЗАПНО оказалось, что наша бизнес-логика состоит на 95% из кэша! Итого - для кэша используем инструменты для кэша, оставшиеся 5% держим в контексте. И не надо мне тут про проблемы с производительностью контекста, для маленького стора селекторы не нужны.
Согласен. Не понимаю какая может быть бизнес-логика на фронтенде, которая должна глобально где-то лежать. Это как раньше всё в объект window сохраняли, что бы можно было говнокодить, так и сейчас эти стейтменеджеры (по сути имутабл глобальная переменная)
Выглядит любопытно. Редакс был прорывным в свое время, но по факту схема там конечно в соседний подъезд через Марс. Но вообще Реакт становится душнилой, как Ангуляр, чем дальше тем больше. Такое впечатление что в кор команду пришли все эти профессионалы Java и принесли всю эту чушь про "большие корпоративные системы", чтоб их так. За Vue будущее, он гораздо комфортнее по ощущениям, да и новых штук там насыпали в последнее время.
@@max_mgtow Ну друже, если ты не в курсе то это не значит что это чушь) Если бы с редакс было бы все ок, то никто не стал бы делать ни RTK ни Recoil, подумай об этом на досуге.
Я думаю суть в непонимании какую конкретно проблему решает Redux. Очень странные замечания в видео, я бы мог очень легко оспорить любое из них либо показать элементарное решение озвученных проблем. Это без проблем, напишите если надо Но допустим. Взамен редакса Рекоил? Это даже не смешно. 200 тысяч скачиваний за неделю, для сравнения у редакса 7 миллионов. Библиотека не популярна и на то есть причины. Активное скачивание библиотеки началось в апреле 2020. Если такая крутая либа, почему за два года, всего 200 тысяч в неделю дошел и идет на спад? А ведь идет на спад. нпм тренд показывает что помимо периодических скачков интереса, очевидно после подобных видео, в целом люди не переходят на нее и возвращаються к своим предыдущим либам. Само представление либы. Ну к примеру атом... а вам не кажется что это обычный аналог редьюсера? Нет ну серьезно... что поменялось для разработчика? Ничего. Я так понял отсуцтвуют экшен тейпы. Но они же там не просто так. Как менеджментить хаос на большом приложении? Рекоил скорее конкурент мобиксу, точно не редаксу. Они решают разные проблемы. Но против мобикса, у рекойла врядли есть шансы.
Видел много проектов, где redux использовался так, что любая другая библиотека, а также ее отсутствие дадут лучший результат. На мой взгляд, вина в таком случае не ридакса. Может быть, самую малость и дева, который это все понаписал. Надеюсь сравнение производительности не производилось между «самым кривым, большим и реальным» приложением на ридакс и «большим идеально оптимизированным тестовым» приложением на (подставить любимую либу/фреймворк). Это мне напоминает холивар на тему что круче бои без правил или тхэквондо. Кажется, что, конечно, бои без правил. А в реальности оказывается подготовка конкретного бойца решает (у нас - дева 😅)
Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити
за 99 рублей:
boosty.to/how-to-learn-it
Какие тренажеры бывают:
htmlacademy.ru/courses#fe-start
Подписывайтесь:
t.me/howToLearnIT
______________________________
0:00 Что происходит с Redux?
01:38 Что за Recoil.js?
02:39 Атомы
04:08 Селекторы
5:46 Асинхронные запросы
7:07 Кто выше, сильнее, быстрее?
15:39 Эпилог
______________________________
RecoilJs: recoiljs.org/
Ролик про React18 и конкурентный режим: th-cam.com/video/2WjpGeTKqyE/w-d-xo.html
Видео с ReactEurupe:
th-cam.com/video/_ISAA_Jt9kI/w-d-xo.html
Fireship про big O:
th-cam.com/video/g2o22C3CRfU/w-d-xo.html
#reactjs #react #recoiljs #javascript
При чем здесь стейт менеджеры вообще и аполо клиент?) Или ты не отличаешь СТЕйТ от КЭША ДАННЫХ С API?)))
Очень похоже, что появляется новый сильный конкурент, который имеет все шансы по популярности приблизиться к Redux и стать обычным решением для большинства проектов(чего не вышло у всех остальных новомодных тулзов). Тем более, что за спиной данного решения целый Facebook... Автор, ты только не забрасывай канал и не обращай внимания на небольшие просмотры. Гораздо важнее качество аудитории, чем ее масштаб(всякие Хауди Хо и Гоши Дудари тому подтверждение). У тебя получается очень качественный контент, который приятно и полезно смотреть не только джунам и интересующимся, но и ребятам поопытнее. Продолжай в том же духе и удачи тебе!
Effector: Я иду за вами
Согласен, уж очень схож синтаксис)
@@kamenskiyyyy у эффектора совершенно другая концепция. Это как React и Angular в мире стейтменеджеров, где условный Recoil - это React, либа для управления состоянием, а Effector - здоровенный Angular Фреймворк с уже написанной экосистемой из модулей
Схожи они только тем, что оба используют функции
Спасибо за видео :)
Брать комментарий Марка Эриксона за 2019 год кажется не уместным в 2022. React выпустил хук useSyncExternalStore, который решает проблему с concurrent модом. Более того Redux уже переписан на использование этого хука. Поэтому аргумент, что Redux не готов к чему то, это точно не справедливо. Более того React кор тим, знает как много разрабов по миру использует Redux и точно не допустит какой то несовместимости этой либы с новой версией React.
все перечисленные недостатки уже давно решены в rtk;
плюс они завезли rtk query, так что редакс будет на подъеме в ближайшее время;
у рекойла самая главная проблема что вне реакта он не применим, так что далеко не во всех проектах подойдет;
и довольно давно не могут зарелизить даже 1.0 версию
rtk тяжелый, многие компании отказываются от него из-за веса. Да и вечные мемоизированные селекторы...
@@alienspro 19kB?
@@cinques недавно избавился от него на проекте, почти 300kb освободилось в бандле
@@alienspro странно, я сейчас прям глянул сколько у нас честных, 32kb
1.5.0 версия правда
у фейсбук имхо были веские причины создать новый стейт-менеджер. Видимо редакс не такой идеальный и любят его далеко не за удобство и эффективность
Большинство перечисленных проблем редакса вначале видео, связаны с тем что в компонентах не должно быть бизнес логики, и судя по тому что сказано в видео дальше про рекоил, он этой проблемы никак не решает. В редаксе это решается сагами. По моему мнению единственный существенный минус у редакса в текущих реалиях это вызов всех редюсеров приложения на любой диспатч
Саги могут не всем понравиться, можно просто thunk’и. А если нужна работа именно с серверными данными, кэш, управление запросами, то лучше взять relay/apollo/rtk-query
@@cinques или react-query
Там автор в конце указал, что селекторам можно указать сетер, в котором и можно прописать бизнес логику. Как для меня, довольно амбициозная библиотека
то-есть вся бизнес логика должна быть в самом редаксе ?
@@ruslanpostoiuk4963 по-хорошему да. Принцип единой ответственности из solid. Компонент должен только отрисовывать данные
Я использую Jotai, он похож на Recoil. Но нам он как то больше понравился. + Его можно использовать вместе с Zustand (аналог Redux). Что я и делаю. Не самое популярное решение, но выглядит не плохо
Класс, установил на пет проект, теперь буду на нём писать
Здорова, обожаю тебя, так держать, спасибо за инфу
Любопытно, надо для своих проектов попробовать)
круто, спасибо за видео
Привет, спасибо большое за твои видео! У меня к тебе просьба - расскажи как-нибудь про remix js. Ты просто суперски рассказываешь «что там под капотом»! :)
А не изобрели ли они аналогичные механизмы, что и есть в mobx?) Кроме нового механизма в React 18
Реквестирую сравнение с effector
В целом, прикольная штука, посмотрим
Че такое мобх редакс, я знаю только эффектор 🤓👌
Ну да, для vuex тоже появился новый Paninia, вроде ничего так, можно попробовать будет, очень удобно работать с ним в composition api
Pinia?
Круто! Давай теперь про Zustand.
интересное видео, спасибо
ураааа, новый видос!
Эта штука не хило так похожа на эффектор, но как я понял, с меньшим количеством боилерплейта в виде ивентов и эффектов
Про SOLID будет видео?
Recoil, со слов создателя, сделали чтобы решить некоторые проблемы на некоторых продуктах корпорации. Уж никак не official way. Просто команда решила, что можно recoil выложить в открытый доступ.
Зачем это все, когда есть mobx?
золотой комментарий )), реактивнее и удобнее чем mobx и mobx-state-tree еще ничего не встречал), даже в svelte-kit, и там всегда подключаю mst
Очень напоминает NgRx в Angular. Концепция подписки на селекторы такая же. Только в ангуляре нет разделения на атомы и селекторы, все делается через селекторы, и их уровень сложности на твое усмотрение. Ну и соотвественно вся мощь rxjs тебе в помощь:)
Столкнулся с проблемой, что установить и прочитать состояние никак нельзя, кроме как через хук в компоненте. А такое иногда необходимо. Перешел не еффектор
Зачем если есть RTK к примеру? У нас на проектах вообще только react-query используется..
Так и должно быть в наше время, просто люди всё ещё не могут отойти от старого способа мышления "бизнес-логикой"
@@mayer9228 у нас есть пару контекстов по типу темы и тд и за все серверное состояние отвечает react-query, который замечательно кеширует все
Наверное Facebook строит экосистему для React, примерно как у Angular
ну как Zustand?
О прикольно, react по немногу становится angular'ом.
А как же VALTIO? Перепробовав всё остановился на нём - очень функциональное и гибкое хранилище. Особенно радует возможность организовать его в том числе и на основе классов со всеми вытекающими плюсами.
6:12 может я чего-то не понимаю, но "раз селекторы чистые функции" и на экране код, где мы ходим в базу данных... Давно у нас запрос к БД стал чистой функцией?
Ну и следом сразу проблема. Вопрос к знатокам: если запрос к базе данных кешируется, то что произойдёт, когда у нас есть атом с id пользователя и селектор, в котором мы ходим в БД за информацией профиля. Теперь пользователь меняет имя, но у нас запрос по id закеширован...
@@ИмяФамилия-э4ф7в полностью согласен
@@ИмяФамилия-э4ф7в очевидно надо помочь кешу протухнуть
@@profesor08 можно, но зачем запихивать в инструмент, который ожидает чтстую функцию (и на этом основании имеет право кешировать результат), не являющуюся чистой, а потом ему говорить, когда дропать кеш? Ну и, по классике, где-то забыть ему это указать, что всплывёт когда-то потом... Попахивает не лучшим кодом. Думаю там есть другие инструменты для этого.
@@ИмяФамилия-э4ф7в тебе в любом случае придется что-то и где-то кешировать и потом обновлять кеш. Ну и, по классике, где-то забыть обновить. Увы.
Тут надо делать обновление таким образом, чтоб оно было связано с кешем и обновляло его. Если нет для этого встроенного апи, то делаются подобные вещи элементарно обернув вызов хука в свою функцию, которая будет делать все что надо.
Recoil нужно было сравнивать с Effector
Прикольная идея с атомами. Кстати не только у них есть атомы, ещё есть такой state manager reatom. У нас на работе используется только он
На зустанд посмотреть тоже стоит, такие же атомарные состояния и такие же селекторы. Юзаем в проде и все довольны
Крутое видео, спасибо! Но я так и не понял как селектор рекоила понимает от каких атомов он зависит ведь аргументом передается только get функция. Как будет проходить кеширование?
Там в get потом передается id нужного atom.
@@ДмитрийАксенов-ы5л Да, но механизм всё равно неявный. Получается что функция селектора будет вызываться в любом случае (иначе как тогда понять к каким атомам был запрос?) и если там будет тяжелая логика то это тоже будет на производительности сказываться.
@@ievgenk.8991 get() внутри селектора подписывает его на следующее изменение прокинутого внутрь атома или селектора. Для динамических зависимостей тоже так: recoiljs.org/docs/api-reference/core/selector/#dynamic-dependencies
@@sealoftime Спасибо
Використовуємо на проекті Effector 🔥дивно що так мало за нього говорять(
после эфектора другие стейт менеджеры с провайдерами или обзерами кумарят) лень она такая)
давно юзал эту штуку, одни положительные эмоции, как и от mobx. А от redux свалил давно и никогда не вернусь (с ним был производственный ад, особенно когда половина людей в команде не понимает как юзать саги). Да и вообще на vue перешёл с реакта.
Запиши про тестирование
А можно показать на примере как размещение всего стейта приложения в Redux может негативно сказаться на производительности?
Сказываеться, но это реально очень много логики должно быть. Настолько много, что рекоил просто не подойдет для такого большого приложения по причине отсуцтвия, назочем это упрощено - решений для борьбы с хаосом в логике. У каждого решения есть своя причина.
Но вообще падение производительности решаемо, есть целая пачка либ которые решают эту проблему по разному.
Приветствую, Друг 🤝
Отличное видео 👍
Без Redux не представляю React
😂
тем временем в мире vue:
Pinia: «Vuex я иду за тобой...»
Redux ещё не учил, уже Recoil надо, но может это и к лучшему)))
Учись лучше писать на чистом JavaScript, эти все фреймворки-библиотеки не нужно учить, оно само ляжет когда пригодиться
@@nazarii.lazarchuk подскажи пожалуйста, а сколько нужно времени уделить pure/vanilla JavaScript чтобы начать учить фреймворки? Может написать пару проектов без них сначала, или как?
а что, если я скажу что можно с легкостью обходиться без Redux используя SWR)
Нормас
У реакта уже есть контекст, но почему-то многие не считают его за достойную альтернативу чему-либо. Понятия "стейт-менеджмент" и "бизнес-логика" сейчас уже являются устаревшими, ибо ВНЕЗАПНО оказалось, что наша бизнес-логика состоит на 95% из кэша! Итого - для кэша используем инструменты для кэша, оставшиеся 5% держим в контексте. И не надо мне тут про
проблемы с производительностью контекста, для маленького стора селекторы не нужны.
Согласен. Не понимаю какая может быть бизнес-логика на фронтенде, которая должна глобально где-то лежать.
Это как раньше всё в объект window сохраняли, что бы можно было говнокодить, так и сейчас эти стейтменеджеры (по сути имутабл глобальная переменная)
Выглядит любопытно. Редакс был прорывным в свое время, но по факту схема там конечно в соседний подъезд через Марс. Но вообще Реакт становится душнилой, как Ангуляр, чем дальше тем больше. Такое впечатление что в кор команду пришли все эти профессионалы Java и принесли всю эту чушь про "большие корпоративные системы", чтоб их так. За Vue будущее, он гораздо комфортнее по ощущениям, да и новых штук там насыпали в последнее время.
Некорректно использован термин связанности и зацепление, в точности до наоборот
Ну ок, облизал, поцеловал - а минусы где?
больше либ богу либ
Redux Toolkit решает эти проблемы
Зачем идеальному редакс это вообще было нужно?)
В крупных компаниях редакс уже отходит к проотцам, много проектов на MOBX делают
Тоже уходим от Redux на Mobx, мы одни из топовых страховых агрегаторов
Rtk тот еще монстр жрущий память
@@alienspro в сторону чего уходите?
Впервые такую чушь слышу 🤔
@@max_mgtow Ну друже, если ты не в курсе то это не значит что это чушь) Если бы с редакс было бы все ок, то никто не стал бы делать ни RTK ни Recoil, подумай об этом на досуге.
Все что сделано в Фейсбук- кака
И react?
Я думаю суть в непонимании какую конкретно проблему решает Redux.
Очень странные замечания в видео, я бы мог очень легко оспорить любое из них либо показать элементарное решение озвученных проблем. Это без проблем, напишите если надо
Но допустим. Взамен редакса Рекоил? Это даже не смешно. 200 тысяч скачиваний за неделю, для сравнения у редакса 7 миллионов. Библиотека не популярна и на то есть причины. Активное скачивание библиотеки началось в апреле 2020. Если такая крутая либа, почему за два года, всего 200 тысяч в неделю дошел и идет на спад? А ведь идет на спад. нпм тренд показывает что помимо периодических скачков интереса, очевидно после подобных видео, в целом люди не переходят на нее и возвращаються к своим предыдущим либам.
Само представление либы. Ну к примеру атом... а вам не кажется что это обычный аналог редьюсера? Нет ну серьезно... что поменялось для разработчика? Ничего.
Я так понял отсуцтвуют экшен тейпы. Но они же там не просто так. Как менеджментить хаос на большом приложении? Рекоил скорее конкурент мобиксу, точно не редаксу. Они решают разные проблемы. Но против мобикса, у рекойла врядли есть шансы.
Mobx better than redax. But recoil I do not know.
Зачем это всё, если есть контекст апи?
Видел много проектов, где redux использовался так, что любая другая библиотека, а также ее отсутствие дадут лучший результат. На мой взгляд, вина в таком случае не ридакса. Может быть, самую малость и дева, который это все понаписал. Надеюсь сравнение производительности не производилось между «самым кривым, большим и реальным» приложением на ридакс и «большим идеально оптимизированным тестовым» приложением на (подставить любимую либу/фреймворк). Это мне напоминает холивар на тему что круче бои без правил или тхэквондо. Кажется, что, конечно, бои без правил. А в реальности оказывается подготовка конкретного бойца решает (у нас - дева 😅)
Конечно понимаю что без видеоряда никуда, но порой он такой кринжовый))