Спасибо Илья за видео. Веб-компоненты так веб-компоненты. И про это тоже почитаем. После React думаю выучу-ка я Vue . Теперь понимаю, что я не только React не знаю, но и Javascript. Глубоко и проникновенно, спасибо
Круто, когда видео четко структурировано. Вначале видео есть вопрос. Посередине - объяснение проблемы. В конце - чёткий и лаконично сформулированный ответ
Большое спасибо. p.s. а можно подкинуть немного дровишек? не корысти ради, но только из-за блуждания в потёмках своего pet project-a on vue. можно добавить каки-то типовые задачи: построение компонентов при authentication например. я долго радовалась готовым решениям django templates (питновский framework), но теперь пытаюсь перейти на рельсы самостоятельности. я не умoлаю важности вашего подхода и очень ценю его.
Чтобы сильно глубоко не пробрасывать пропсы или не выкидывать эмиты - старался делать более плоскую структуру, временами пренебрегая разделением компонента на более мелкие компоненты...
И зря. По мере роста проекта часто встаёт вопрос переиспользования компонентов. И если на начальном этапе этим пренебрегать, то в итоге можно наделать много ненужных клонов. Я когда-то приучил себя даже каждый инпут, каждый селектор или чекбокс делать компонентом, и эмиттить событие. Не представляю теперь как я раньше без этого справлялся и тратил уйму времени :)
Откровенно говоря, не могу понять, почему "проблемы в архитектуре/очень сложная (хрупкая) система", если надо пробрасывать всплытие и/или пропсы много раз... Чтоб не пробрасывать много раз, придется соблюдать вложенность компонентов на 1, 2 уровня, и, в этом случае, компоненты станут слишком огромные/жирные (по моему опыту), соответственно пострадает "понятность/читабельность" кода и т.д. Либо я чего-то не догоняю, как обычно Прошу всех более опытных и умных меня поправить и направить в правильное русло, плиз П.С. Хотелось бы как-то, хотя бы для себя, определить правила, которые необходимо соблюдать для построения "нормальной" архитектуры; и знать какие-то решения, когда появляется необходимость пробрасывать пропсы/эмитсы много раз, чтоб это не противоречило "нормальной" архитектуре
Как я это понимаю, каждый компонент должен "жить" сам по себе. Он принимает props, а обратно возвращает emits; Тогда ты на 100% уверен что он может быть переиспользован в другом месте апки и не будет визывать побочных ефектов. НО когда у такого компонента появляется взаемосвязь с VUEX, provide/inject, какие-нибуть логические связи с тем местом где он находиться, то такой компонент уже не считаеться логической одиницой построения апки, а теперь он как бы навязывает смотреть на целую картину, на другие компоненты и их зависимости. А это уже и називают плохой архитектурой. Дело ведь не в читабельности кода, а в простоте и гибкости при разработке. Что бы твой код и архетиктура могли с легкостю модифицироваться под новые бизнес требования, изменения дизайна и логики и переиспользоваться для ускорения разработки. ИМХО, автор показал утопию, но без примеров это вряд ли кто поймет (тем более Trainee/Junior разраробчики)
Прежде чем даже в гугле вводить rescript, введите с начало это на hh.ru для интереса. Использовать глобальное состояние нужно по минимум хотя бы потому что это убивает пере используемость. Про prop drilling или многоуровневый подъем события, код будет выглядеть гораздо чище и выглядеть "правильнее" если просто на каждый шаг понижать и повышать соответственно, уровень абстракции.
Именно поэтому и не использовать. И именно поэтому его убрали из доки по вью - подобный подход позволяет игнорировать структуру компонентов и создаёт неявные зависимости
Я столкнулся с проблемой перебрасывания эмитов когда делал микрофронтенды, и нужно было научить их слушать и общаться друг с другом. В этом случае выручил именно eventBus, так как вложенность компонентов слишком большая. Странно, что убрали из доков, ведь в некоторых случаях это очень удобно.
@@Krasav4ikk проблема, которую вы решаете с микрофронтендами - это не зона ответственности фреймворка. Реализаций эмиттеров много, есть mitt, есть nanoevents, зачем строить еще одну реализацию на инстансе Vue? Это еще одна из причин, по которой этого нет в доке.
Не могу согласиться с тем, что props менее хрупкий метод, чем vuex, и, тем более, что он более интуитивно понятен. При нормальной архитектуре стор делится на понятные блоки, и, кроме того, обновление через геттер стора может давать более предсказуемый порядок обновлений компонентов. Что касается всплытия событий, есть вещь, о которой почему-то мало кто знает, и это миксины. Подключая миксин в глубоком компоненте можно получить самый лаконичный и удобный доступ к глобальным методам приложения, а также к самому стору, собственно. Рефактор подобной простыни пропсов и всплытий мне позволил однажды отрефакторить приложение на минус 10к строк, никакой хрупкости и неочевидности не появилось, скорее, наоборот.
Миксины зло, которое в принципе не должно использоваться. Что же касается сторы, о той неявной хрупкости которая появляется из-за вьюкса мы обязательно поговорим в разделе вьюкса. Это нормально считать что вьюкс решает большинство проблем, в гитлабе тоже раньше так думали
@@pancakeslayer9084 своей неявностью. Если что, это позиция которую разделяю я, Наталья Теплухина которая соавтор курса, и гитлаб (учитывая что у нас обычно нету согласия - это показательно) gitlab.com/gitlab-org/frontend/rfcs/-/issues/32
@@JavaScriptNinja magic this.something контрится нормальными названиями методов и значений, а unused props решается написанием модульных миксинов. Например, у меня есть отдельный миксин для компонентов, отдельный для доступа к стору. Всё это позволяет следовать DRY (10к строк, Карл). В моём случае это проект с почти сотней однотипных страниц и форм, на каждой из которых триггерятся одни и те же методы и используются одни и те же пропсы, без миксинов это было бы совершенно нечитаемо
Я работал на проекте, где не было ни одного миксина. Компоненты по 9000 строк, большая часть которых это пропсы и методы, которые повторяются из компонента в компонент, это невыносимо
Спасибо за Ваш труд
Спасибо Илья за видео. Веб-компоненты так веб-компоненты. И про это тоже почитаем. После React думаю выучу-ка я Vue . Теперь понимаю, что я не только React не знаю, но и Javascript. Глубоко и проникновенно, спасибо
Спасибо большое, за знания, которыми делитесь!
спасибо огромное вам и наташе за курс!!! разбор нюансов это именно то что и делает хорошего специалиста. искренне спасибо еще раз
Круто, когда видео четко структурировано. Вначале видео есть вопрос. Посередине - объяснение проблемы. В конце - чёткий и лаконично сформулированный ответ
Спасибо, Илья, как обычно на уровне!
Круто, многое прояснилось. Спасибо за видео.
Это элементарно, Ватсон)
Спасибо!
Спасибо
О, а я сам себе ответил, когда нам давали 5 секунд, что всплытие увеличивает связанность компонентов. Можно сказат, что верно)
Большое спасибо.
p.s. а можно подкинуть немного дровишек? не корысти ради, но только из-за блуждания в потёмках своего pet project-a on vue.
можно добавить каки-то типовые задачи: построение компонентов при authentication например. я долго радовалась готовым решениям django templates (питновский framework), но теперь пытаюсь перейти на рельсы самостоятельности. я не умoлаю важности вашего подхода и очень ценю его.
когда следующее видео?)
В playlist бы к остальным положить его =)
Чтобы сильно глубоко не пробрасывать пропсы или не выкидывать эмиты - старался делать более плоскую структуру, временами пренебрегая разделением компонента на более мелкие компоненты...
И зря. По мере роста проекта часто встаёт вопрос переиспользования компонентов. И если на начальном этапе этим пренебрегать, то в итоге можно наделать много ненужных клонов. Я когда-то приучил себя даже каждый инпут, каждый селектор или чекбокс делать компонентом, и эмиттить событие. Не представляю теперь как я раньше без этого справлялся и тратил уйму времени :)
@@Krasav4ikk на проекте vue используется точечно, поэтому с переиспользованием дела не очень, но я учту это в будущем)
А как всплытие событий щас работает во vue 3?
да интересно потому что они вроде бы все таки всплывают , но я хз могу ошибаться ты разобрался ? поделись если да
@@alexmarch ой, я уже не помню даже что в видосе было)
Во vue3 все события всплывают кроме тех что ты указываешь в emits
Откровенно говоря, не могу понять, почему "проблемы в архитектуре/очень сложная (хрупкая) система", если надо пробрасывать всплытие и/или пропсы много раз...
Чтоб не пробрасывать много раз, придется соблюдать вложенность компонентов на 1, 2 уровня, и, в этом случае, компоненты станут слишком огромные/жирные (по моему опыту), соответственно пострадает "понятность/читабельность" кода и т.д.
Либо я чего-то не догоняю, как обычно
Прошу всех более опытных и умных меня поправить и направить в правильное русло, плиз
П.С. Хотелось бы как-то, хотя бы для себя, определить правила, которые необходимо соблюдать для построения "нормальной" архитектуры; и знать какие-то решения, когда появляется необходимость пробрасывать пропсы/эмитсы много раз, чтоб это не противоречило "нормальной" архитектуре
Как я это понимаю, каждый компонент должен "жить" сам по себе. Он принимает props, а обратно возвращает emits;
Тогда ты на 100% уверен что он может быть переиспользован в другом месте апки и не будет визывать побочных ефектов.
НО когда у такого компонента появляется взаемосвязь с VUEX, provide/inject, какие-нибуть логические связи с тем местом где он находиться, то такой компонент уже не считаеться логической одиницой построения апки, а теперь он как бы навязывает смотреть на целую картину, на другие компоненты и их зависимости. А это уже и називают плохой архитектурой.
Дело ведь не в читабельности кода, а в простоте и гибкости при разработке. Что бы твой код и архетиктура могли с легкостю модифицироваться под новые бизнес требования, изменения дизайна и логики и переиспользоваться для ускорения разработки.
ИМХО, автор показал утопию, но без примеров это вряд ли кто поймет (тем более Trainee/Junior разраробчики)
Прежде чем даже в гугле вводить rescript, введите с начало это на hh.ru для интереса.
Использовать глобальное состояние нужно по минимум хотя бы потому что это убивает пере используемость. Про prop drilling или многоуровневый подъем события, код будет выглядеть гораздо чище и выглядеть "правильнее" если просто на каждый шаг понижать и повышать соответственно, уровень абстракции.
А почему не использовать EventBus? Можно же слушать и эмиттить откуда угодно.
Именно поэтому и не использовать. И именно поэтому его убрали из доки по вью - подобный подход позволяет игнорировать структуру компонентов и создаёт неявные зависимости
Я столкнулся с проблемой перебрасывания эмитов когда делал микрофронтенды, и нужно было научить их слушать и общаться друг с другом. В этом случае выручил именно eventBus, так как вложенность компонентов слишком большая. Странно, что убрали из доков, ведь в некоторых случаях это очень удобно.
@@JavaScriptNinja Я так понимаю EventBus аналогичен eventHub, который по этой же причине также исключен из vue3?
@@Krasav4ikk проблема, которую вы решаете с микрофронтендами - это не зона ответственности фреймворка. Реализаций эмиттеров много, есть mitt, есть nanoevents, зачем строить еще одну реализацию на инстансе Vue? Это еще одна из причин, по которой этого нет в доке.
спустя месяц смотришь на код и охреневаешь откуда, что эмитится и как это рефакторить
Не могу согласиться с тем, что props менее хрупкий метод, чем vuex, и, тем более, что он более интуитивно понятен. При нормальной архитектуре стор делится на понятные блоки, и, кроме того, обновление через геттер стора может давать более предсказуемый порядок обновлений компонентов.
Что касается всплытия событий, есть вещь, о которой почему-то мало кто знает, и это миксины. Подключая миксин в глубоком компоненте можно получить самый лаконичный и удобный доступ к глобальным методам приложения, а также к самому стору, собственно.
Рефактор подобной простыни пропсов и всплытий мне позволил однажды отрефакторить приложение на минус 10к строк, никакой хрупкости и неочевидности не появилось, скорее, наоборот.
Миксины зло, которое в принципе не должно использоваться. Что же касается сторы, о той неявной хрупкости которая появляется из-за вьюкса мы обязательно поговорим в разделе вьюкса.
Это нормально считать что вьюкс решает большинство проблем, в гитлабе тоже раньше так думали
@@JavaScriptNinja чем же они зло, если это самый логичный способ писать модульно в рамках вью?
@@pancakeslayer9084 своей неявностью. Если что, это позиция которую разделяю я, Наталья Теплухина которая соавтор курса, и гитлаб (учитывая что у нас обычно нету согласия - это показательно) gitlab.com/gitlab-org/frontend/rfcs/-/issues/32
@@JavaScriptNinja magic this.something контрится нормальными названиями методов и значений, а unused props решается написанием модульных миксинов. Например, у меня есть отдельный миксин для компонентов, отдельный для доступа к стору. Всё это позволяет следовать DRY (10к строк, Карл). В моём случае это проект с почти сотней однотипных страниц и форм, на каждой из которых триггерятся одни и те же методы и используются одни и те же пропсы, без миксинов это было бы совершенно нечитаемо
Я работал на проекте, где не было ни одного миксина. Компоненты по 9000 строк, большая часть которых это пропсы и методы, которые повторяются из компонента в компонент, это невыносимо