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

  Переглядів 261,426

Ulbi TV

Ulbi TV

День тому

В этом ролике мы рассмотрим 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

КОМЕНТАРІ: 530
@dontcode
@dontcode Рік тому
Посмотрел до середины, ролик просто пушка, как ты и сказал это самый полный ролик и понятный по архитектуре из всех что я находил. Думаю народ не даст соврать, что на ютубе в основном конференции всякие с кучей воды, а тут все коротко, по существу, еще и с графикой. Ты задаешь планку качества, от меня тебе благодарность
@natalyamurashko125
@natalyamurashko125 Рік тому
Выход нового ролика это целый праздник! 😍 спасибо, Тимур!
@stmihan_
@stmihan_ Рік тому
Очень важный и крутой ролик. ОГРОМНОЕ тебе спасибо за развитие frontend разработки в русскоязычном пространстве
@sergeymaksimov3441
@sergeymaksimov3441 Рік тому
О, как же я долго ждал такое видео! Спасибо тебе большое!!! Огонь! Долго присматриваюсь к FSD но понять ее было не просто. Сейчас стало более понятно и в теории, и на практике!
@user-ln6dt1wp6y
@user-ln6dt1wp6y Рік тому
Спасибо за материал! Взял курс, очень жду начала)
@dontcode
@dontcode Рік тому
Очень ждал это видео, с самого момента твоего анонса роликов по архитектуре. Ты делаешь вещи, определенно. После просмотра отпишу про материал Спасибо.
@kristinavolk2660
@kristinavolk2660 Рік тому
Однонаправленная (и только вверх) и явная благодарность тебе, Тимур! Ролик не остался незмеченным и невкатанным в голову из-за прочно понятной логической структуры контента. Чисто субъективно хочу выделить, что моим мозгам особенно приятно, когда ты грамотно раскидываешь такие архитектурные скелеты не только в схемы, но и в папки и файлы в проекте. И годными примерами ещё подкрепляешь, что и порождает наслойку знания. И как незаменимый бонус, способ мышления также переходит в новые рельсы, которые одерживавют верх над старыми привычками. Спасибо, что почти каждый ролик ты пропитываешь такой идеей, что как нет волшебной таблетки, так нет и чудо - архитектуры. ) Только не надо надеяться, что вот-вот и мы уж точно наверняка все поймём, всю универсальность. Ничего неправда) так как по мере расширения нашего знания, расширяется наше и незнание. Площадь соприкосновения с ним становится больше. Но в этом и есть азарт) Необходимо думать и быть начеку, и если может сразу не всегда получается, то не забывать опираться на ООП китов 😉) (единственное, но опять же вкусовщина, я бы сделала шрифт потоньше для читабельности лёгкой или у меня уже просто глаза плывут, но такой контент не досмотреть до конца на одном дыхании просто невозможно 🤍)
@dabiggestfloppa3441
@dabiggestfloppa3441 Рік тому
Спасибо за такое бесплатное распространение столь важной инфы! Очень полезно!
@dmitriigolubev7385
@dmitriigolubev7385 Рік тому
Спасибо Тимур! Удивляюсь как у тебя получается столько всего успевать. Не могу дождаться старта курса)
@yashlek
@yashlek Рік тому
Я прям ждал видео от тебя по этой теме. Спасибо ОГРОМНОЕ!
@zalkarmamatkasym6743
@zalkarmamatkasym6743 9 місяців тому
Кратко, ясно и без воды, супер!
@user-bi7yx2bm2u
@user-bi7yx2bm2u Рік тому
Спасибо за разбор. Очень не хватало такой информации на просторах интернета. такие знания обычно приходят только из работы на реальных проектах. а тут всё доступно сразу
@m.lukyanovich
@m.lukyanovich Рік тому
Очень хороший контент. Автор вообще всегда доступно и без воды доносит саму суть. Относительно этой темы. Сам я уже не первый год работаю и несколько неправильно набирался опыта - все архитектурные решения, реализации многих вещей делал, не ознакамливаясь с существующими практиками и готовыми решениями. И лично я отталкивался от такого можно сказать "математического" подхода: то, что повторяется - "за скобки". В итоге пришёл примерно к тому, в чём заключается FSD. Конечно же, каждый раз с учётом индивидуальных особенностей отдельного проекта. На практике в результате это, как минимум, может в разы увеличить скорость разработки проекта, что на длительной дистанции даёт огромный выхлоп. А так в целом озвученные подходы - это разными словами и в разной степени сложности об одном и том же) Если у вас всё хорошо с логикой да и вообще вы по жизни педант и перфекционист, достаточно будет один раз услышать всё это, "чтобы быть в курсе", а к идеальной архитектуре придёте и сами. Миксуя существующие подходы и добавляя что-то от себя.
@wat4mon
@wat4mon Рік тому
Спасибо за такой качественный контент, который оч трудно найти на просторах интернета
@D0flam1ngo
@D0flam1ngo Рік тому
Я хочу сказать тебе огромное спасибо, за всю твою тяжелую работу!! Мне нравятся твои уроки !!
@tastebublik
@tastebublik Рік тому
Как же вовремя, только с твоих видосов по разборам проектов, где ты поправлял чужой код. Как раз возникло желание углубиться в архитектурный аспект
@ruslanundefined2242
@ruslanundefined2242 Рік тому
Как всегда топ контент братан! Делай так по чаще! Спасибо за выпуск!
@AleksandrMaltsev-jm8ph
@AleksandrMaltsev-jm8ph 7 місяців тому
Очень круто! Спасибо что вносишь культуру архитектурной мысли в массы !
@evgeniy_pashko
@evgeniy_pashko Рік тому
Спасибо за видео! Очень ценный материал. Сейчас нахожусь в процессе создания архитектурного подхода, а тут ролик про FSD
@ekaterinamartin7803
@ekaterinamartin7803 Рік тому
Спасибо огромное, Тимур, как всегда 100 из 100. Благодаря твоим роликам разрозненная картина стала складываться в стройную структуру
@no_way_to_exist
@no_way_to_exist 8 місяців тому
Первое впечатление от FSD - катострофическая сложность, которая непременно приведет к свалке, ведь подобный абстрактный ряд правил все будут интерпретировать по-своему. Только в отличие от [No Architecture] свалка будет не плоской, одноуровневой, а ультравложенной и иерархической - т.е. мегасвалкой.
@galichandreyschool
@galichandreyschool Рік тому
Супер видео! Как раз FSD юзаю... И так приятно о нём послушать из уст профессионала! Благодарю за полезный контент! Успехов на нелёгком пути профессионального преподавателя!
@kirillkhvorikov9470
@kirillkhvorikov9470 Рік тому
Спасибо тебе, огромное, за творю работу. Это, пожалуй лучшие учебные материалы которые я видел. 👍
@user-of8lf7yj8o
@user-of8lf7yj8o Рік тому
У него курс выходит, а он полезный видос на час выпускает. Что с лицом хейтеры? Ещё раз увижу, сразу в бан улетите 😈
@UlbiTV
@UlbiTV Рік тому
:D
@h1x0ver78
@h1x0ver78 Рік тому
:)
@MrGameTVCity
@MrGameTVCity Рік тому
В чем смысл хейтить такой контент? Ну допустим автор где то ошибся, но как минимум 90% инфы то правильная, а ошибку по ходу изучения других курсов (или прочесть комментарий с примечанием) можно и самому потом найти и исправить. Благо, есть много курсов на русском/английском.
@Hariec88
@Hariec88 2 місяці тому
Не перни
@dimadima4222
@dimadima4222 Рік тому
Скорее всего тебе уже говорили, но многие твои видео действительно очень информативные и полезные, а изложение материала - последовательное и максимально понятное. Такие видео выгодно отличаются, даже если их сравнивать с некоторыми онлайн-курсами
@creemer
@creemer 8 місяців тому
Благодарю! Отличная обзорная экскурсия!
@dew-traveler
@dew-traveler 7 місяців тому
Отличный материал! Спасибо большое, очень доступно
@nodependency
@nodependency Рік тому
Супер понятно и полезно. Спасибо тебе огромное, надеюсь больше людей втянется в изучение архитектур, станут ответственнее, тогда работать с крупными проектами будет куда проще и интересней
@helengriva3016
@helengriva3016 Рік тому
Огромное спасибо за такой подробный ликбез! Невероятно полезно и интересно!👍
@daniyarzhanakhmetov7741
@daniyarzhanakhmetov7741 4 місяці тому
У тебя дар раскладывать информацию по полочкам! Я именно после этого видоса понял FSD достаточно хорошо. Именно после этого ролика все встало на свои места! Спасибо большое за твою работу!
@emirrrrr123
@emirrrrr123 Рік тому
опять же - шикарно 👍👍👍
@eeeMan2
@eeeMan2 11 місяців тому
это всё на бумаге красиво звучит, как только начинается сложный проект то такие архитектуры сложно реализовать
@KGB1st
@KGB1st 2 місяці тому
челоресур ротируется, все превращается в кашу в любом случае
@27sosite73
@27sosite73 2 місяці тому
@@KGB1st da =(
@KGB1st
@KGB1st 2 місяці тому
@@27sosite73 хотя я читал статью, и там такая проблема решается тем, что на каждый микросервис конкретные люди от начала его создания и до самого вывода мс из эксплуатации. технически, это позволить хотя бы как-то не разводить бардак и это действительно дельный совет, но дорогой, типа держать команду целую либо если на одну какую-то команду возложить несколько мс. Но есть риск в степени К если команда свалит или распадется, тогда труба всем этим мс, ибо новые спецы каждый же по своему смотрит, со своей колокольни. короче все это пиз.. как 😋весело
@aau8
@aau8 29 днів тому
все сложное начинается с чего-то простого. По крайней мере так должно быть. Если разработчик не в состоянии декомпозировать задачи, то ему ни один паттерн, не поможет
@user-zi9tm5cb9s
@user-zi9tm5cb9s Рік тому
Я пока учусь, но уже встретился с учебным проектом с классической безархитектурой и этим бардаком. Автор прям перечислил все мои боли. Как же я щас кайфанул, когда узнал про модульную и другие архитектуры! Вообще дьявольски хороший ролик, просто мастхэв.
@valeriyk7565
@valeriyk7565 4 місяці тому
Как всегда контент на высшем уровне, спасибо! 🤝
@bardin28
@bardin28 Рік тому
В основном никогда не пишу коментарии под видео, но это просто невероятно полезное для определённого уровня разработчиков. Благодарю!
@user-iy7nj4is4n
@user-iy7nj4is4n 2 місяці тому
это лучший канал по программированию , посмотрел много уроков на разных этаппах своей жизни . Программировал на с++ видео очень помогали сейчас пишу на react нужда этого канала не пропала .Спасибо большое за отличные уроки
@zakarhappy5496
@zakarhappy5496 Рік тому
Тимурчик, родной, контент в кайф. Выпускай ролики почаще, очень полезный контент, и огромный в клад в обучение. Сасибо!
@user-ue7lj2to9q
@user-ue7lj2to9q Рік тому
Спасибо за труд!
@user-ku3bx8we1c
@user-ku3bx8we1c Рік тому
Крутейший материал, спасибо огромное! Было бы невероятно круто в дополнение прикладывать ссылки на хорошие примеры проектов или реализовать некий тестовый проект на предложенных архитектурах. Можно потратить очень много лет, чтобы дойти до этого всего. Просто завидую тем, кто сейчас может это все получить в готовом виде, да еще и таким простым языком. )
@adelinaromanova8353
@adelinaromanova8353 Рік тому
Тима, спасибо, смотрим!
@philian73
@philian73 Рік тому
Боже, UlbiTV, Feature sliced design - это лучшее, что я видел. Пока что я новичок, в реакте относительно недавно, но стремлюсь к идеалу, и FSD для меня просто прекрасен. Спасибо тебе!
@pochan1585
@pochan1585 Рік тому
Господи, как это прекрасно. Спасибо большое!
@mokkamokka4097
@mokkamokka4097 2 місяці тому
Огромнейшее спасибо за все что ты делаешь!
@kapwas
@kapwas 9 місяців тому
Автор этим видео вырывается на топ уровень авторов годного материала, полезность зашкаливает.
@Tanatos654
@Tanatos654 Рік тому
Посмотрел с большим интересом, большое спасибо за проделанную работу! Очень хочется попробовать FSD и микросервисную архитектуру
@artyomsultanov5204
@artyomsultanov5204 Рік тому
Комментарий в поддержку канала! Тимур, ты супер!
@thetraveler7779
@thetraveler7779 Рік тому
Очень познавательные ролики, без воды, предметно и по факту.
@arlenm1472
@arlenm1472 Рік тому
Спасибо огромное! Почувствовал себя супергением к концу ролика, иду пробовать fsd)
@shehe7408
@shehe7408 Рік тому
Спасибо за отличный материал
@Ewok1991
@Ewok1991 3 місяці тому
Самое лучшее, что я видел. Красава, оч все хорошо разложил по полочкам)
@kosee4008
@kosee4008 Рік тому
только подумал, а тут уже всё есть. Благодарю!
@user-kc1hw2mn2p
@user-kc1hw2mn2p Рік тому
Это очень полезное видео. Благодарю тебя!!!! Ты сделал мою разработку еще проще 👍👍👍
@user-hd7mi3tj5r
@user-hd7mi3tj5r Рік тому
Огромнон спасибо тебе такую грандиозную работу!
@TheLastSeason
@TheLastSeason 9 місяців тому
Спасибо! Отличный материал. Залпом просмотрел)
@samserios9367
@samserios9367 Рік тому
Кайф! Было полезно! Спасибо тебе за труд!
@diyaudioby4836
@diyaudioby4836 Рік тому
спасибо, отличный материал и подача, каждый раз для меня что-то новое =)
@alexeyfladarov5200
@alexeyfladarov5200 9 місяців тому
Твои видосы это просто лучшее что можно найти на русском ютубе, мега полезно
@yuryarakelove5322
@yuryarakelove5322 Рік тому
Спасибо за замечательный ролик и твой труд, записался на второй поток, надеюсь будет крайне полезно!
@vikodam
@vikodam Рік тому
Ulbi TV просто красава, так держать Тимур - спасибо за обучающее видео
@mavldr
@mavldr 2 місяці тому
Очень подробно и доступно, спасибо тебе большое 🎉
@MrBenemon
@MrBenemon 4 місяці тому
Спасибо, очень качественно, очень доступно. Теперь ролик про солид надо посмотреть.
@user-oe8wz4eu3l
@user-oe8wz4eu3l Рік тому
Спасибо тебе мужик) такого на ру сегменте ютуба очень не хватает ))❤
@mew6085
@mew6085 Рік тому
Очень крутой разбор, смотрел 3 раза ролик, понимаю что ещё столько всего не знаю. Посмотрел на свои проекты, реально каша) Спасибо огромное!
@MrGreen-zs7on
@MrGreen-zs7on Рік тому
Супер! Огромное спасибо )
@user-qg8mw4jx7s
@user-qg8mw4jx7s Рік тому
Один из лучших материалов на канале, must have для каждого фронт разработчика!!
@anastasiia_idle
@anastasiia_idle Рік тому
Тимур, спасибо!! очень нравятся твои ролики
@user-bw3dw8km7k
@user-bw3dw8km7k 4 місяці тому
Просто лучший, лучше видео по архитектуре фронта еще не видел
@barbatage5078
@barbatage5078 Рік тому
Час годноты! Приступаю…
@zluka7951
@zluka7951 Рік тому
Спасибо большое за то, что ты делаешь.
@user-we2rb4es8b
@user-we2rb4es8b Рік тому
Спасибо за проделанную работу, получилось отличное видео. Всем приятного просмотра
@arseniyyyyyyy
@arseniyyyyyyy Рік тому
Ролик пушка, спасибо!
@TRIZ-Bogatyregold
@TRIZ-Bogatyregold Рік тому
Спасибо автору! Отличный ролик! Максимально четко и по делу!
@al77ex1
@al77ex1 Рік тому
Огромное спасибо за архиролик! Архитектура стоит над технологиями и фреймворками. Перевожу свой рабочий проэкт на FSD.
@cmac2cmac
@cmac2cmac Рік тому
Спасибо за проделанную работу!
@valeramischenko9391
@valeramischenko9391 Рік тому
как всегда максимально информативно! До этого я думал что соблюдаю определенную "классическую" архитектуру - оказалось свалка 🤣🤣. Вообще делаешь супер-мега крутой контент и работу! 🤘
@Upset0990
@Upset0990 Рік тому
Боже, ты настолько крут, спасибо тебе! Я благодаря твоим видосам про реакт и vue начал писать на этих фреймворках, а теперь начну писать на них правильно! Чую на курс к тебе пора. Может будет запись курса что бы можно было купить только видосы?
@dasha_owl
@dasha_owl Рік тому
Спасибо, было очень интересно, многое стало понятно)
@user-di2fo2rd7h
@user-di2fo2rd7h Рік тому
Спасибо! Наконец-то получилось разобраться с FSD. Хоть кто-то объяснил без воды, на реальном примере. Мне сеньор скинул официальную документацию и это видео в качестве материалов для изучения) Видео прояснило все гораздо больше, нежели документация. Пошла переделывать проект🥲🙂
@eugene-dmitrievich
@eugene-dmitrievich 3 місяці тому
Очень полезное видео. Узнал для себя много нового. Попробую в следующем своем React приложении попробовать архитектуру Feature Sliced Design. Спасибо большое за видео 👍👍👍
@sfuid
@sfuid 3 місяці тому
Спасибо за видео!
@rainlexxx
@rainlexxx 7 місяців тому
Спасибо за такое видео.
@ipa_stor
@ipa_stor Рік тому
Думаю, очень важно внимательно посмотреть тем, кто собирается или начинает свой первый проект(-ы), а то частенько бывает так, что стартуешь проект и не понимаешь с чего начать. Это может выбить из колеи, а архитектура убирает вопрос на корню. В любом случае, приятного просмотра всем
@dmitrykuskov6715
@dmitrykuskov6715 Рік тому
В документации React советуют не тратить больше 5 минут на выбор структуры проекта. Практичнее пересматривать ее по мере развития проекта. Но когда в начале уже есть готовая архитектура, то это конечно плюс
@user-oe8wz4eu3l
@user-oe8wz4eu3l Рік тому
@@notrodans да? А когда у тебя команда из 5 джунов, которым нужно сделать большое приложение? Всем ждать пока синъерами станут?
@BigMother228
@BigMother228 Рік тому
@@user-oe8wz4eu3l Уволить 5 джунов, взять 1 синьера, очевидно же))
@no_way_to_exist
@no_way_to_exist 8 місяців тому
​@@user-oe8wz4eu3l пилить "свалку компонентов" и позволить им учиться на своих же ошибках. Джуны в FSD все равно не смогут, равно как и написать большое приложение. Когда подберут определенное количество опыта, тогда и пересмотрите архитектуру в соответствии с уже изученными бизнесовыми требованиями.
@user-cb3sc8wk8i
@user-cb3sc8wk8i Рік тому
Отличный ролик, спасибо!
@user-yj8tf7xb6g
@user-yj8tf7xb6g 6 місяців тому
Бесподобное объяснение 👏 Feature sliced design
@forellko8600
@forellko8600 Рік тому
Спасибо за работу!
@user-by9wx1om9v
@user-by9wx1om9v 5 місяців тому
Видос - топовый. Спасибо большое!
@ocean1487
@ocean1487 Рік тому
На Jave не тыкаюсь, хорошо поставлена речь, подача инфы супер. Очень приятно слушать , смотреть. Дальше твори чудеса 👍👍🤝
@username7148
@username7148 Рік тому
Спасибо! Отличный материал
@boburmustafo8868
@boburmustafo8868 Рік тому
Большое Спасибо очень полезный урок
@vtsel-lp4jv
@vtsel-lp4jv Рік тому
Архитектура современных FRONTEND приложений. Спасибо!
@Abdul-hy4cy
@Abdul-hy4cy 10 місяців тому
Ты так объясняешь классно, спасибо большое Тимур ! Пришел сюда после доки
@pavelplonke7609
@pavelplonke7609 10 місяців тому
Лучший! Спасибо!
@Soap9613
@Soap9613 Рік тому
не хватает музыка для атмосферности))) да, видео не для музыки, но фоновая музыка создаёт атмосферу и темп))
@nickolayarbuzov6149
@nickolayarbuzov6149 Рік тому
Топовая и важная тема ! Спасибо за новые видео по этой теме
@dr.livesey5157
@dr.livesey5157 Рік тому
Спасибо! Ты лучший!
@user-vd2bi2gx5m
@user-vd2bi2gx5m Рік тому
Видео топ, как обычно!!!
@aleksandrmatyka3118
@aleksandrmatyka3118 Рік тому
Этот материал уникален для ютуба, спасибо Тимур, было бы интересно когда нибудь увидеть видео по монорепо, можно было бы также turborepo затронуть
@user-bf8gi6ct8v
@user-bf8gi6ct8v Рік тому
Feature sliced design это лишь один из вариантов реализации clean arhitecture дядюшки Боба. В целом считаю, что данные ролик подойдет только для понимания что архитектура приложения есть, и что хорошо бы про это почитать, но никак не для практического применения. Очень сильная завязка на структуре проекта, как по папочкам все разложить, а это совсем не тоже самое что архитектура.
@user-vn3if3wt9p
@user-vn3if3wt9p 7 місяців тому
Критикуешь - предлагай
@MrLuckfinder
@MrLuckfinder 2 місяці тому
Ещё бы узнать где почитать
@TheKniser
@TheKniser Рік тому
Очень круто! Очень подробно!
@user-hk4ib3oo4y
@user-hk4ib3oo4y 10 місяців тому
Огонь! Спасибо!
Что будет с кроссовком?
00:35
Аришнев
Переглядів 2,5 млн
CI CD наглядные примеры
22:08
Ulbi TV
Переглядів 262 тис.
Главная проблема iPad Pro M4 OLED!
13:04
THE ROCO
Переглядів 35 тис.
Хомяк может разблокировать АЙФОН
0:14
Собиратель новостей
Переглядів 427 тис.
Компьютерная мышь за 50 рублей
0:28
dizzi
Переглядів 2,2 млн
iPhone - телефон для нищебродов?!
0:53
ÉЖИ АКСЁНОВ
Переглядів 3,8 млн
поворотний механізм для антени
0:17
Lazeruk
Переглядів 13 тис.