Принцип единой ответственности. SOLID для React

Первый принцип SOLID - самый простой в понимании, но самый часто нарушаемый. Разбираемся с принципом единой ответственности и смотрим, что он значит в контексте React-приложения.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@user-pl6xx3xk9t]

Очень приятно слушать. Идеальный голос для преподования. Подача контента - отличная. Спасибо за работу)

[@user-ub2rg3eg8z]

Отличный материал и подача. Ваше место в тим-лидах и менторах. Только человек который обладает такой эмпатией успешно справиться с этой ролью. Браво.

[@SergiyAntonyuk_PhD]

Так Михаил ДОЛГОЕ ВРЕМЯ преподавал :-)

[@user-ub2rg3eg8z]

@@SergiyAntonyuk_PhD заметно

[@sergey_zatsepin]

Эмпатия при межличностном общении проявляется, а не через экран

[@TheProfessionalGambler]

А как так эмпатию определять?

[@YuryKorotovskikh]

@@TheProfessionalGambler если у человека самого развита эмпатия - то он лучше и быстрее может понять, кто перед ним, иногда даже только по голосу и манере говорить, хотя, конечно, так легче ошибиться

[@vladk1975]

Единственный человек от которого я смог понять один из принципов

[@rodionme]

Спасибо за видео. Интересная тема! Мне кажется, основная сложность в применении этого метода - уловить грань между тем, когда компонент остается понятным и читабельным и тем, когда его уже пора дробить на более мелкие кусочки логики. Понимать «единственную ответственность» в случае с реактом можно по-разному. Например, в реальном проекте изначальный код, скорее всего, остался бы в таком же виде, потому что он вполне понятен и прост. Можно сказать, что этот компонент решает единственную задачу - отрисовывает полученный список задач. Точно так же можно сказать про абстрактный компонент страницы - он отрисовывает одну страницу. Т.е. решает одну задачу, несмотря на то, что логики на странице может быть очень много. Я думаю, целью в случае с реакт-компонентом должна быть простота логики и относительная краткость, которую можно мерять в условных экранах или строчках кода. Например, принять за правило, что «компонент должен помещаться в 200 строк». При этом чрезмерное дробление логики может привести к тому, что с таким кодом будет просто неудобно работать. Но все это сложно формализировать, конечно. Чувство этой «грани» приходит с практикой.

[@user-bp7jb5of5d]

Михаил, спасибо за ваш труд и ваши образовательные видео. У вас отличная подача и отменное качество материала. С нетерпением жду видео о дальнейших принципах SOLID.

[@user-pr6pn9mu9t]

Михаил, спасибо большое за ваши видео!

[@mars_family]

Спасибо большое, очень жду продолжения 🙏🙏🙏

[@user-pi1vr6rf1k]

Очень приятный тембр и интонация голоса. Про смысловую составляющую я вообще молчу) Видео смотреть одно удовольствие! Спасибо за труды

[@ilyaprotsenko1023]

Отличная тема! Спасибо большое за материал!

[@sergsergey4251]

Спасибо, отличное видео!

[@rudakov_ilya]

Михаил, спасибо, что делаете такой крутой и полезный контент!

[@Skif769]

Классную тему подняли Михаил, ждём новых видео, большое спасибо, что помогаете сообществу.

[@user-mu2lr9zc7d]

Спасибо за видео, и простой и наглядный пример!

[@AleksandrNeo]

Большое спасибо, то что нужно!!!

[@AleksandrNeo]

Отдельное спасибо за пример и анимацию, понимание гораздо быстрее приходит) Пойду применять на практике)

[@user-uf8nw6uc9z]

Очень хорошая подача материала. Жду следующее видео по данной теме SOLID

[@fuad2069]

Ооо крутяк!! Спасибо вам огромное

[@anonlog]

Михаил, спасибо за такое крутое объяснение, с примерами и наглядностью! Очень замечательное видео, ждем продолжение. Теперь хочется сделать большой рефакторинг кода в своих приложениях))😀

[@nepcz]

У Михаила всегда очень полезный контент, для моего уровня

[@rubylnic]

спасибо! отличное видео, не хватало такого ясного объяснения принципов именно на примере реакта

[@vadimkiryanov4933]

Очень классное и полезное видео. Сравнительно недавно все хотел начать изучить эти принципы, но не особо мог найти подходящий материал для изучения. С нетерпением жду нового видео по следующим принципам.

[@AGM140580]

Отличный контент! Большое спасибо!

[@alexperemey6046]

Главное, не доводить использование этих принципов до абсурда. Как говорил Джек Воробей - "Кодекс - это рекомендации, а не жесткие правила"

[@gegrbydfcz]

Капитан Джек Воробей!

[@promoabys]

Да, Михаил, спасибо. И отдельное за практический пример, потому что действительно в теории звучит всё просто, а на практике это всё превращается тяжело поддерживаемый код и длинные портянки

[@Sashaa]

Спасбо большое за видео особенно с примерами про реакт

[@user-888azim-97]

буквально вчера читала на хабре с этими иллюстрациями, роботами. тоже понравились картинки)

[@kirillpavlovskii8342]

спасибо вам, отличное видео!

[@nepcz]

Когда возникает у меня вопрос, всегда держу в памяти, что это есть у Михаила на канале и пользуюсь этим как закладкой в книге.

[@_GreenSnake_]

Спаибо за Ваш труд

[@JackShepards]

Спасибо. Было интересно

[@IgorBerezhnoy-md3ir]

Очень круто!!!!

[@korvinkori_]

Эх как же годно, спасибо большое

[@chikichik4164]

Класс, спасибо!

[@egorpobylets6597]

Спасибо! Отлчиное видео по SOLID по SRP

[@armancherkharov9410]

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

[@javobkerak5859]

Спасибо попробую действовать

[@sergey_zatsepin]

Оооо сеньёрские штучки пошли в дело! Хорош!

[@tigranharutyunyan7674]

Спасибо за работу. На практике, например контейнер или контролер компоненты, где собирается большая форма с многими кастомными компонентами запросто может набрать пару сотен линий кода.

[@vladimirmuratov2220]

Огромное спасибо!!! Для такого дурака как я - это самое доходчивое объяснение 😄

[@Moishe_Rubinstein]

Мишаня вы супер. Давайте темы помощнее.

[@Lotpite]

реально простой пример 🙂

[@user-nr4ry1uc4l]

Спасибо

[@raufhashimov241]

Спасибо огромное, а будет и другие принципы SOLID?

[@unknown.6914]

Идем дальше )

[@velikorossnationalist4259]

Спасибо за лекцию! Кстати огромный класс/компонент/функция и т.д. называется - God Object. Это антипаттерн.

[@Icanfly-]

God он не из за огромности назван был, а за то что делает все подряд, нарушая принцип единой ответственности

[@lba1092]

просто имбааааа

[@vsevolodaleynikov8844]

Спасибо, интересная информация. Но и без SOLID (S), точнее этого термина, со временем и так приходит истина что компоненты нужно дробить и чтобы каждый компонент отвечал за что-то одно иначе будет полная каша. Например, как вы уже продемонстрировали в ролике, никаких запросов fetch/axios не должно быть в компоненте, их все нужно выносить в отдельные папки и файлы. Можно еще привести пример: на многих страницах приложения используется таблицы, тут уже напрашивается, что нужно сделать отдельную компоненту и передавать в нее данные. И тем самым с этой компонентой будет просто работать и модифицировать в будущем (стилизовать, добавить фильтрацию, сортировку и т.п.)

[@aleksandr2245]

дядя Боб в своей книге Чистая Архитектура, как раз пишет об этом, что SRP - это не совсем про то, что наша функция/модуль/класс должна выполнять что-то одно, в его блоге есть целая статья на эту тему >> And this gets to the crux of the Single Responsibility Principle. This principle is about people. >> Gather together the things that change for the same reasons. Separate those things that change for different reasons. >> However, as you think about this principle, remember that the reasons for change are people. It is people who request changes.

[@mishanep]

Как вы понимаете данные данные цитаты? И как, по-вашему, мы можем применять их в Реакт-приложении, написанном в функциональном стиле?

[@aleksandr2245]

@@mishanep на мой взгляд не имеет принципиального значения какой стиль/парадигму мы используем, я думаю то, про что Вы рассказываете в своём видео относится больше к рефакторингу, когда мы большие компоненты дробим на более мелкие, что-то выносим, чтобы наша функция/функциональный компонент делал "что-то одно", решал одну задачу. Тут ещё интерсный вопрос, а что значит что-то одно? Как раз функциональные компоненты, по-моему мнению, здесь очень показательны , ведь они не "делают что-то одно" на самом деле, они зачастую инкапсулируют в себе логику, состояние, ещё и перезентационную составляющую, но в реакте это абсолюно нормальный подход. Мартин Р. вводит в SRP такой термин как module, и мне кажется, вот тут и заключается основная идея, в том, что наш модуль (нечто более глобальное) должен иметь одну причину на изменение и этой причиной является конечный потребитель. Если спроецировать это на реакт приложение, у нас может быть, условно, модуль/компонент Калькулятор, который в свою очередь может состоять из други модулей/компонент, к которым мы можем применить те принципы (подходы), про которые Вы рассказываете в видео, e.g. дробление на более мелкие компоненты, вынос логики в кастомные хуки, дробление презентационной части и т.д., а Калькулятор сам по себе должен измениться по требованию потребителя, который этим калькулятором пользуется, что-то вычисляет с его помощью, а если бы наш модуль Калькулятор проигрывал ещё и музыку, то тут мы бы нарушили SRP и у нашего модуля появилась бы ещё одна причина на изменение (от тех пользователей, которые слушают музыку). Я, конечно, могу ошибаться, я не эксперт и себя таковым не считаю, это сугубо моё личное мнение и интерпретация SRP

[@mishanep]

Спасибо за развернутый ответ. В моем понимании когда мы говорим про изменения функционала, то здесь больше история про open-closed принцип.

[@mdbm]

Расскажите пожалуйста как применяется данный принцип при разработке структуры редьюсеров. Плодить отдельный редьюсер для каждого отдельного глобально используемого состояния или же объединять их в группы? Например пользователь выбрал тему сайта, выбрал текущую категорию товаров, выбрал текущую валюту и выбрал текущую ширину экрана своего браузера. Стоит ли объединить все эти «текущие» в один редьюсер currents с ключами или же для каждого создать отдельный редьюсер и наплодить их с десяток и более ?

[@nouchance]

Super!

[@romanmed9035]

конечно все правильно. но если используются пару десятков инпутов для создания пачки фильтров с разными данными и функциями при изменении и выборе, то как это разделить?

[@barrabekuss4269]

Это один из главных принципов, который обязаны применять в проекте. Сейчас работаю над проектом с классовыми компонентами. Прилетает небольшая правка, думаешь часа на два, открываешь компонент….. а там компонент на 2-3 тысячи строк кода и твои два часа превращаются в два дня😬

[@sergey_zatsepin]

Почему не рефакторите?

[@barrabekuss4269]

@@sergey_zatsepin некогда. В ту ду по 20 тасок висят

[@alexperemey6046]

И да, я бы не отказался в рамках темы послушать о том, насколько разделяет первый принцип паттерн Синглтон, является ли он антипаттерном, и какую роль он играет во фронтенд разработке.

[@katada]

Топ!

[@shoxerpetrosyan8678]

Михаил, в основном массиные компоненты получаются,когда есть группа импутов.Понимаю,что громоздкость возможно сократить с помощью мап а данных импутов,но если это разные типы и функции онченджа

[@umarjuraev1624]

круто

[@profesor08]

Интересно как будут натягиваться следующие принципы solid на react. Там все непросто.

[@NeoCoding]

есть еще такое понятие оверинжениринг когда дробят настолько мелко компоненты учитывая что нет переиспользования дальнейшего что очень неудобно рыскать по закладкам собирая эти атомы в молекулы

[@catweb666]

Когда ты говоришь Здраствуйте, меня зовут Михайл Непомнящий, в этот момент я понимаю что что-то забыл. )))

[@WhenImAloneI]

Вдохновился видео и зарефакторил 300 строчек в 50;)

[@singlebw265]

Михаил подскажите пожалуйста название утилиты ограничивающая строчки компонентов

[@mishanep]

Prettier

[@enenotowitch628]

7:20

[@golang6212]

Во время видео про SOLID вышло. Как раз таки Деда Боба читаю :)

[@splcell]

Solid Snake

[@Ogrizkov]

Извиняюсь за занудство, но Бедняга Боб Мартин не устает повторять, что SRP - это про то, что компонент программы должен иметь только одну причину для изменения. Например продажи не могут требовать изменения метода (если им не нравится сумма затрат), который сделан для расчета налогов для бухгалтерии. Это не совсем то, о чем вы говорите. Вы говорите о более широком правиле, что компонент решает только одну задачу. Это не то что подразумевается в первом принципе SOLID. 🤗 Ссылаюсь на книгу Clean Architecture

[@mishanep]

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

[@sergey_zatsepin]

Ну ты выдал... Палюбе сам не понял, что написал

[@UserSo4reUsu75ry]

Только не единая, а единственная. Почему-то многие переводят это не правильно

[@zahar1381]

nice xdd

[@user-wl5jq2mx7d]

Автор видео сам наверное до конца не понял отчем это принцип, я рекомендую почитать книгу «чистая архитектура», где правильное определение принципа «единственной ответственности» и про что на самом деле этот принцип. То что компонент, функция и т.д. должны делать что-то одно это не про SRP.

[@mishanep]

Автор видео старается от себя ничего не придумывать, а делать выжимку на базе существующих материалов на английском языке. Вообще мною было замечено, что как только речь заходит про какие-то принципы в программировании, лучшие практики или (особенно) шаблоны проектирования, то сразу появляется группа экспертов по этим вопросам, считающая что "автор не прав". При этом эксперты могут высказывать противоположные мнения, либо вовсе избегать высказывания своего видения, указывая на матчасть. Безусловно, есть академический подход, когда мы помимо предполагаемой подачи начинаем сравнивать точки зрения, может быть спорить с ними, прилагать источники цитирования. Но в погоне за академичностью можно в итоге ничего не сделать или только запутать тех, кто начинает разбираться в вопросе. По факту я рассказываю о том, что читал сам и в каком ключе это обсуждалось мною с коллегами по проектам. По итогам цикла я скорее всего приложу источники, которыми пользовался при подготовке.

[@sergey_zatsepin]

Расскажите вкратце

[@user-wl5jq2mx7d]

@@sergey_zatsepin , что рассказывать, открываешь книгу «чистая архитектура» глава III параграф 1.

[@AlexandrPuzakov]

Автор не совсем понимает SRP. Тот же Роберт Мартин отдельно упоминает, что "функция должна делать что-то одно" это отдельный принцип, не относящийся к SRP

[@dmitry7417]

При использовании Material UI или Tailwind уложиться в компоненте в 100 строчек становится непросто.

[@xD-hu3gw]

😂300-500 это еще терпимо, а по 2-3к строк компоненты?)))

[@user-wl5jq2mx7d]

Ну вообще то принцип называется «принцип единственной ответственности» , а не единой.

[@aheroofourtime2415]

Продай мне ручку уже устарело, теперь продай мне: single responsobility. Хорошо продал)

[@telepuzzzik1]

Спасибо