Архитектура современных FRONTEND приложений. 5 видов. Преимущества и недостатки

Рет қаралды 269,842

Күн бұрын

В этом ролике мы рассмотрим 5 видов архитектуры frontend приложений. Поговорим о преимуществах и недостатках, о том, когда применять тот или иной вид архитектуры frontend приложений.
Курс "Продвинутый Frontend. в Production на React" - ulbitv.ru/frontend
Ролик с анонсом курса - • Улучшенный курс Продви...
Плейлист с роликами по архитектуре - • Архитектура ПО
Таймкоды:
00:00 ➝ Введение
01:00 ➝ Продвинутый Frontend. в Production на React
02:30 ➝ Виды архитектуры
03:00 ➝ Классическая архитектура
09:00 ➝ Итоги. Когда использовать? преимущества и недостатки классической архитектуры
10:30 ➝ Модульная простая архитектура
20:45 ➝ Преимущества и недостатки простой модульной архитектуры
22:50 ➝ Сравнение модульной арх-ры и классической
23:50 ➝ Atomic design методология
27:00 ➝ Feature sliced design (модульная на стероидах). Связанность и зацепление. Инкапсуляция, полиморфизм и наследование. Публичный интерфейс. Бизнес логика.
51:30 ➝ Преимущества и недостатки FSD
56:00 ➝ Микрофронты и монорепозиторий. Распределенная архитектура
01:01:30 ➝ Микросервисы. Когда использовать?
01:03:00 ➝ Итоги. Время ставить лайк и писать комментарий для поддержки канала. Спасибо :)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Пікірлер: 534

@dontcode Жыл бұрын

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

@stmihan_ Жыл бұрын

Очень важный и крутой ролик. ОГРОМНОЕ тебе спасибо за развитие frontend разработки в русскоязычном пространстве

@sergeymaksimov3441 Жыл бұрын

О, как же я долго ждал такое видео! Спасибо тебе большое!!! Огонь! Долго присматриваюсь к FSD но понять ее было не просто. Сейчас стало более понятно и в теории, и на практике!

@kristinavolk2660 Жыл бұрын

Однонаправленная (и только вверх) и явная благодарность тебе, Тимур! Ролик не остался незмеченным и невкатанным в голову из-за прочно понятной логической структуры контента. Чисто субъективно хочу выделить, что моим мозгам особенно приятно, когда ты грамотно раскидываешь такие архитектурные скелеты не только в схемы, но и в папки и файлы в проекте. И годными примерами ещё подкрепляешь, что и порождает наслойку знания. И как незаменимый бонус, способ мышления также переходит в новые рельсы, которые одерживавют верх над старыми привычками. Спасибо, что почти каждый ролик ты пропитываешь такой идеей, что как нет волшебной таблетки, так нет и чудо - архитектуры. ) Только не надо надеяться, что вот-вот и мы уж точно наверняка все поймём, всю универсальность. Ничего неправда) так как по мере расширения нашего знания, расширяется наше и незнание. Площадь соприкосновения с ним становится больше. Но в этом и есть азарт) Необходимо думать и быть начеку, и если может сразу не всегда получается, то не забывать опираться на ООП китов 😉) (единственное, но опять же вкусовщина, я бы сделала шрифт потоньше для читабельности лёгкой или у меня уже просто глаза плывут, но такой контент не досмотреть до конца на одном дыхании просто невозможно 🤍)

@no_way_to_exist 10 ай бұрын

Первое впечатление от FSD - катострофическая сложность, которая непременно приведет к свалке, ведь подобный абстрактный ряд правил все будут интерпретировать по-своему. Только в отличие от [No Architecture] свалка будет не плоской, одноуровневой, а ультравложенной и иерархической - т.е. мегасвалкой.

@dontcode Жыл бұрын

Очень ждал это видео, с самого момента твоего анонса роликов по архитектуре. Ты делаешь вещи, определенно. После просмотра отпишу про материал Спасибо.

@m.lukyanovich Жыл бұрын

Очень хороший контент. Автор вообще всегда доступно и без воды доносит саму суть. Относительно этой темы. Сам я уже не первый год работаю и несколько неправильно набирался опыта - все архитектурные решения, реализации многих вещей делал, не ознакамливаясь с существующими практиками и готовыми решениями. И лично я отталкивался от такого можно сказать "математического" подхода: то, что повторяется - "за скобки". В итоге пришёл примерно к тому, в чём заключается FSD. Конечно же, каждый раз с учётом индивидуальных особенностей отдельного проекта. На практике в результате это, как минимум, может в разы увеличить скорость разработки проекта, что на длительной дистанции даёт огромный выхлоп. А так в целом озвученные подходы - это разными словами и в разной степени сложности об одном и том же) Если у вас всё хорошо с логикой да и вообще вы по жизни педант и перфекционист, достаточно будет один раз услышать всё это, "чтобы быть в курсе", а к идеальной архитектуре придёте и сами. Миксуя существующие подходы и добавляя что-то от себя.

@natalyamurashko125 Жыл бұрын

Выход нового ролика это целый праздник! 😍 спасибо, Тимур!

@dabiggestfloppa3441 Жыл бұрын

Спасибо за такое бесплатное распространение столь важной инфы! Очень полезно!

@user-ln6dt1wp6y Жыл бұрын

Спасибо за материал! Взял курс, очень жду начала)

@tastebublik Жыл бұрын

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

@eeeMan2 Жыл бұрын

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

@KGB1st 3 ай бұрын

челоресур ротируется, все превращается в кашу в любом случае

@27sosite73 3 ай бұрын

@@KGB1st da =(

@KGB1st 3 ай бұрын

@@27sosite73 хотя я читал статью, и там такая проблема решается тем, что на каждый микросервис конкретные люди от начала его создания и до самого вывода мс из эксплуатации. технически, это позволить хотя бы как-то не разводить бардак и это действительно дельный совет, но дорогой, типа держать команду целую либо если на одну какую-то команду возложить несколько мс. Но есть риск в степени К если команда свалит или распадется, тогда труба всем этим мс, ибо новые спецы каждый же по своему смотрит, со своей колокольни. короче все это пиз.. как 😋весело

@aau8 2 ай бұрын

все сложное начинается с чего-то простого. По крайней мере так должно быть. Если разработчик не в состоянии декомпозировать задачи, то ему ни один паттерн, не поможет

@user-of8lf7yj8o Жыл бұрын

У него курс выходит, а он полезный видос на час выпускает. Что с лицом хейтеры? Ещё раз увижу, сразу в бан улетите 😈

@UlbiTV Жыл бұрын

@h1x0ver78 Жыл бұрын

@MrGameTVCity Жыл бұрын

В чем смысл хейтить такой контент? Ну допустим автор где то ошибся, но как минимум 90% инфы то правильная, а ошибку по ходу изучения других курсов (или прочесть комментарий с примечанием) можно и самому потом найти и исправить. Благо, есть много курсов на русском/английском.

@Hariec88 3 ай бұрын

Не перни

@NefedoffYuriy 3 күн бұрын

Какое же шикарное видео, Алби, ты просто красава!

@user-bf8gi6ct8v Жыл бұрын

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

@user-vn3if3wt9p 8 ай бұрын

Критикуешь - предлагай

@MrLuckfinder 3 ай бұрын

Ещё бы узнать где почитать

@thetraveler7779 Жыл бұрын

Очень познавательные ролики, без воды, предметно и по факту.

@kapwas 10 ай бұрын

Автор этим видео вырывается на топ уровень авторов годного материала, полезность зашкаливает.

@wat4mon Жыл бұрын

Спасибо за такой качественный контент, который оч трудно найти на просторах интернета

@artyomsultanov5204 Жыл бұрын

Комментарий в поддержку канала! Тимур, ты супер!

@shehe7408 Жыл бұрын

Спасибо за отличный материал

@user-we2rb4es8b Жыл бұрын

Спасибо за проделанную работу, получилось отличное видео. Всем приятного просмотра

@pochan1585 Жыл бұрын

Господи, как это прекрасно. Спасибо большое!

@mokkamokka4097 3 ай бұрын

Огромнейшее спасибо за все что ты делаешь!

@creemer 10 ай бұрын

Благодарю! Отличная обзорная экскурсия!

@kosee4008 Жыл бұрын

только подумал, а тут уже всё есть. Благодарю!

@zakarhappy5496 Жыл бұрын

Тимурчик, родной, контент в кайф. Выпускай ролики почаще, очень полезный контент, и огромный в клад в обучение. Сасибо!

@user-hd7mi3tj5r Жыл бұрын

Огромнон спасибо тебе такую грандиозную работу!

@spadar1602 11 ай бұрын

Ну вот в упор не понимаю разницы между entities и features, смотрю примеры в доках и кто куда горазд.

@user-ku3bx8we1c Жыл бұрын

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

@user-qg8mw4jx7s Жыл бұрын

Один из лучших материалов на канале, must have для каждого фронт разработчика!!

@Ewok1991 5 ай бұрын

Самое лучшее, что я видел. Красава, оч все хорошо разложил по полочкам)

@user-kc1hw2mn2p Жыл бұрын

Это очень полезное видео. Благодарю тебя!!!! Ты сделал мою разработку еще проще 👍👍👍

@user-di2fo2rd7h Жыл бұрын

Спасибо! Наконец-то получилось разобраться с FSD. Хоть кто-то объяснил без воды, на реальном примере. Мне сеньор скинул официальную документацию и это видео в качестве материалов для изучения) Видео прояснило все гораздо больше, нежели документация. Пошла переделывать проект🥲🙂

@arlenm1472 Жыл бұрын

Спасибо огромное! Почувствовал себя супергением к концу ролика, иду пробовать fsd)

@Tanatos654 Жыл бұрын

Посмотрел с большим интересом, большое спасибо за проделанную работу! Очень хочется попробовать FSD и микросервисную архитектуру

@alexeyfladarov5200 10 ай бұрын

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

@user-bw3dw8km7k 5 ай бұрын

Просто лучший, лучше видео по архитектуре фронта еще не видел

@MrGreen-zs7on Жыл бұрын

Супер! Огромное спасибо )

@ipa_stor Жыл бұрын

Думаю, очень важно внимательно посмотреть тем, кто собирается или начинает свой первый проект(-ы), а то частенько бывает так, что стартуешь проект и не понимаешь с чего начать. Это может выбить из колеи, а архитектура убирает вопрос на корню. В любом случае, приятного просмотра всем

@dmtrkskv Жыл бұрын

В документации React советуют не тратить больше 5 минут на выбор структуры проекта. Практичнее пересматривать ее по мере развития проекта. Но когда в начале уже есть готовая архитектура, то это конечно плюс

@user-oe8wz4eu3l Жыл бұрын

@@notrodans да? А когда у тебя команда из 5 джунов, которым нужно сделать большое приложение? Всем ждать пока синъерами станут?

@BigMother228 Жыл бұрын

@@user-oe8wz4eu3l Уволить 5 джунов, взять 1 синьера, очевидно же))

@no_way_to_exist 10 ай бұрын

@@user-oe8wz4eu3l пилить "свалку компонентов" и позволить им учиться на своих же ошибках. Джуны в FSD все равно не смогут, равно как и написать большое приложение. Когда подберут определенное количество опыта, тогда и пересмотрите архитектуру в соответствии с уже изученными бизнесовыми требованиями.

@valeramischenko9391 Жыл бұрын

как всегда максимально информативно! До этого я думал что соблюдаю определенную "классическую" архитектуру - оказалось свалка 🤣🤣. Вообще делаешь супер-мега крутой контент и работу! 🤘

@al77ex1 Жыл бұрын

Огромное спасибо за архиролик! Архитектура стоит над технологиями и фреймворками. Перевожу свой рабочий проэкт на FSD.

@vikodam Жыл бұрын

Ulbi TV просто красава, так держать Тимур - спасибо за обучающее видео

@samserios9367 Жыл бұрын

Кайф! Было полезно! Спасибо тебе за труд!

@boburmustafo8868 Жыл бұрын

Большое Спасибо очень полезный урок

@TheLastSeason 11 ай бұрын

Спасибо! Отличный материал. Залпом просмотрел)

@dew-traveler 9 ай бұрын

Отличный материал! Спасибо большое, очень доступно

@cmac2cmac Жыл бұрын

Спасибо за проделанную работу!

@anastasiia_idle Жыл бұрын

Тимур, спасибо!! очень нравятся твои ролики

@mavldr 3 ай бұрын

Очень подробно и доступно, спасибо тебе большое 🎉

@diyaudioby4836 Жыл бұрын

спасибо, отличный материал и подача, каждый раз для меня что-то новое =)

@user-oe8wz4eu3l Жыл бұрын

Спасибо тебе мужик) такого на ру сегменте ютуба очень не хватает ))❤

@Abdul-hy4cy 11 ай бұрын

Ты так объясняешь классно, спасибо большое Тимур ! Пришел сюда после доки

@MrBenemon 5 ай бұрын

Спасибо, очень качественно, очень доступно. Теперь ролик про солид надо посмотреть.

@user-yj8tf7xb6g 7 ай бұрын

Бесподобное объяснение 👏 Feature sliced design

@zluka7951 Жыл бұрын

Спасибо большое за то, что ты делаешь.

@vtsel-lp4jv Жыл бұрын

Архитектура современных FRONTEND приложений. Спасибо!

@TRIZ-Bogatyregold Жыл бұрын

Спасибо автору! Отличный ролик! Максимально четко и по делу!

@barbatage5078 Жыл бұрын

Час годноты! Приступаю…

@mew6085 Жыл бұрын

Очень крутой разбор, смотрел 3 раза ролик, понимаю что ещё столько всего не знаю. Посмотрел на свои проекты, реально каша) Спасибо огромное!

@ocean1487 Жыл бұрын

На Jave не тыкаюсь, хорошо поставлена речь, подача инфы супер. Очень приятно слушать , смотреть. Дальше твори чудеса 👍👍🤝

@yuryarakelove5322 Жыл бұрын

Спасибо за замечательный ролик и твой труд, записался на второй поток, надеюсь будет крайне полезно!

@ArtyomSerchenya Жыл бұрын

Спасибо автору, смог по новому взглянуть на сферу в которую относительно недавно залетел. Здорово, что можно применить FSD в no-code разработке, может немного не в том виде как в классическом программировании, но всё же))

@user-hk4ib3oo4y Жыл бұрын

Огонь! Спасибо!

@TheKniser Жыл бұрын

Очень круто! Очень подробно!

@webunit Жыл бұрын

Обычно не пишу комменты, но тут не удержусь, очень годный контент! То на что Соер потратил годы Ulbi объяснил за 1 час! 😎 Спасибо! 👍

@dmitriigolubev7385 Жыл бұрын

Спасибо Тимур! Удивляюсь как у тебя получается столько всего успевать. Не могу дождаться старта курса)

@dmtrkskv Жыл бұрын

Ты очень сэкономил мне время! Спасибо за структурированную работу. Усвоил конечно не все, нужна практика) - Понравилась идея линтинга для запрета импорта кишков модуля. - Понравилась ремарка о том, с какими проблемами столкнемся, если не будем использовать монорепозиторий. - Понравилось наглядное сравнение Модульной и Atomic архитектур с проведением линий на 26:15. Думаю, сильно улучшило бы понимание такое же сравнение Модульной и Feature-sliced архитектур. - Увидел, как Feature-sliced решает проблему использования "модуль в модуле" за счет увеличения количества слоев. Но у меня остался вопрос, как в Feature-sliced решается 4-й недостаток Модульной архитектуры (21:53)? Было сказано, что глобальные сторы/хэлперы могут создавать неявные связи между собой, но как от этой проблемы избавиться в Feature-sliced, пока непонятно, там ведь тоже придется куда-то класть глобальный стор. Был бы очень кстати конкретный пример такой проблемы и ее решения.

@DENisHolden1 Жыл бұрын

Если стор один общий для всех, то никак от связности не избавиться. Так что 4 недостаток сохраняется

@romandeveloper7720 11 ай бұрын

@@DENisHolden1 о. У меня такой же вопрос) А если стор не общий, например, на Effector'е, тогда 4 недостаток пропадает и у модульной архитектуры, и у FSD?

@romandeveloper7720 11 ай бұрын

@@DENisHolden1 а какая связность в этих подходах от общего стора? Не совсем тут понимаю. Мы же создаем стор на самой верхушке этого однонаправленного потока, оборачиваем в этот провайдер все приложение, все редьюсеры вытаскиваем из модулей, с самого верхнего уровня это разрешается делать.

@arseniyyyyyyy Жыл бұрын

Ролик пушка, спасибо!

@dasha_owl Жыл бұрын

Спасибо, было очень интересно, многое стало понятно)

@Serh-rp6qj Жыл бұрын

Так не хватало понимания архитектуры на фронте. Спасибо за то, что ты делаешь!

@T9Bd9fz6E5 10 ай бұрын

смерть узким ублюдкам

@Soap9613 Жыл бұрын

не хватает музыка для атмосферности))) да, видео не для музыки, но фоновая музыка создаёт атмосферу и темп))

@user-cb3sc8wk8i Жыл бұрын

Отличный ролик, спасибо!

@Upset0990 Жыл бұрын

Боже, ты настолько крут, спасибо тебе! Я благодаря твоим видосам про реакт и vue начал писать на этих фреймворках, а теперь начну писать на них правильно! Чую на курс к тебе пора. Может будет запись курса что бы можно было купить только видосы?

@user-zi9tm5cb9s Жыл бұрын

Я пока учусь, но уже встретился с учебным проектом с классической безархитектурой и этим бардаком. Автор прям перечислил все мои боли. Как же я щас кайфанул, когда узнал про модульную и другие архитектуры! Вообще дьявольски хороший ролик, просто мастхэв.

@user-by9wx1om9v 7 ай бұрын

Видос - топовый. Спасибо большое!

@eugene-dmitrievich 4 ай бұрын

Очень полезное видео. Узнал для себя много нового. Попробую в следующем своем React приложении попробовать архитектуру Feature Sliced Design. Спасибо большое за видео 👍👍👍

@user-rt3lt4tu2p 17 күн бұрын

Спасибо, за понятно разобранную теорию=)

@dense5067 Жыл бұрын

Для меня как для новичка очень полезное видео спасибо огромное👍

@user-tn4nh5qd3p 5 ай бұрын

Очень полезное видео. Спасибо!

@kirillkhvorikov9470 Жыл бұрын

Спасибо тебе, огромное, за творю работу. Это, пожалуй лучшие учебные материалы которые я видел. 👍

@nodependency Жыл бұрын

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

@AndreyChursin Жыл бұрын

Идея для ролика! Современная архитектура приложения - как развервнуть локально приложение, например в docker, можно выбрать какой-нибудь стек.. для меня лично - очень интересно послушать, что думают/умеют другие команды!

@artemzhuravlenko9955 3 ай бұрын

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

@emirrrrr123 Жыл бұрын

опять же - шикарно 👍👍👍

@username7148 Жыл бұрын

Спасибо! Отличный материал

@jeanmarcgourier Жыл бұрын

Спасибо, очень познавательно.

@norwinlol Жыл бұрын

На проекте используем FSD чуть больше года, крутая концепция(иногда не очень ложится на тулкит из за необходимости шаринга между слоями) за видос лайк

@forellko8600 Жыл бұрын

Спасибо за работу!

@nickolayarbuzov6149 Жыл бұрын

Топовая и важная тема ! Спасибо за новые видео по этой теме

@user-vd2bi2gx5m Жыл бұрын

Видео топ, как обычно!!!

@qwe-rty- Жыл бұрын

Блин, вот все прям четенько, лайк, но ох уж этот reduser))

@loground 7 ай бұрын

В очередной раз спасибо :)

@Vesell11 Жыл бұрын

Turborepo от создателей nextjs в конце забыл упомянуть для монорепы. Отличное видео, много чего в одном месте собрал!

@user-sn4mn3ku9e Жыл бұрын

Видос ТОП!!!

@user-op5xd7bd5n Жыл бұрын

Очень здорово! спасибо!

@dimadima4222 Жыл бұрын

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