Смотрим проекты подписчиков 8 проектов. Оптимизация, ререндеры, memo, useCallback, bundlephobia

Рет қаралды 151,683

Күн бұрын

В этом ролике мы посмотрим 8 проектов от подписчиков. Один из них разберем детально. Остальные вы сможете посмотреть по ссылке ниже. Код ревью подписчиков.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Все проекты тут (github) - t.me/ulbi_tv/91
Масштабируемые VPS от компании Мастерхост на топовом железе. Мастерхост - один из первых хостинг-провайдеров в России, работающий на рынке с 1999 года.
Процессор AMD EPYC, SSD NVMe-диски, бесплатное резервное копирование и удобная панель управления виртуальными серверами для построения надежной IT-инфраструктуры.
А специально для подписчиков канала Ulbi TV приятный бонус! Воспользуйтесь промокодом ULBITV для получения скидки 15% при заказе виртуального сервера или веб-хостинга.
masterhost.ru/vps/?...
Таймкоды:
00:00 ➝ Введение
03:30 ➝ Код ревью. Первый проект. Аналог кинопоиска. Оптимизация перерисовок, bundlephobia, react memo, usecallback, useMemo.
10:50 ➝ Наглядный пример лишних ререндеров
19:25 ➝ 2 проект. ASCII генератор
20:10 ➝ 3 проект. Бронирование отелей
20:50 ➝ 4 проект. Стратегическая игра
22:05 ➝ 5 проект. Игра раннер-платформер
23:00 ➝ 6 проект. Микрофронтенды, монорепа на ангуляре
23:50 ➝ 7 проект. EVE routes
24:30 ➝ 8 проект. Аналог кинопоиска
25:30 ➝ Итоги, ставим лайки
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Пікірлер: 286

@Moishe_Rubinstein Жыл бұрын

Посмотрел и понял, как же дохрена мне ещё учить....))))

@pavel.arepev Жыл бұрын

Очень круто! Пожалуйста, не забрасывай разборы чужих проектов! Это очень помогает понять и свои ошибки) Хотя бы по немногу) Спасибо!

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

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

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

Не столько учить, сколько практиковаться

@phonty29 Жыл бұрын

@@user-bs1ef6tt3e практика часть учебы

@joehunter1971 Жыл бұрын

@@phonty29 учёба часть практики

@valeramischenko9391 Жыл бұрын

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

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

Спасибо за видео. Долго ждал такого, надеюсь еще будет выходить.

@rubbergum9773 Жыл бұрын

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

@kevinflynn4867 Жыл бұрын

Спасибо Улби ,ты крут ). Ребята молодцы что поделились проектами ,все проекты по свойму хороши. Я с удовольствием заброинровал бы номер в отеле или посмотрел бы фильм на таких приятных сайтах ,желаю всем успехов !

@falsetrue7910 Жыл бұрын

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

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

да,я ему писал,вебпак ждем!!!

@ops1ops Жыл бұрын

в чем хороший пример? сидеть оборачивать все приложение в мемо, чтобы компонент не ререндерился при обновлении стейта выше? серьезно? мемоизация это не панацея и брать оборачивать все в мемо - глупо, нужно смотреть на выполняемую логику компонентом (насколько критично ее перевыполнение при ререндерах), тестировать на потребление памяти и цпу и тогда уже делать какие-то выводы по необходимости оптимизации, а не следовать логике "перерисовывается - накину-ка я мемо" в данном случае автор видео не прав и вводит неопытных разработчиков в заблуждение

@roosevelt1995 Жыл бұрын

@@ops1ops дело даже не в том, что глупо оборачивать всё подряд. @UlbiTV в принципе ошибается, говоря "оптимизировать надо сразу". Это не так. Это говорит и дока реакта, и многие практики. "Если вы не видите, что оптимизация нужна, она вам не нужна". Еще раз, дока реакта прямо об этом говорит.

@ilaymorozoff4113 Жыл бұрын

@@roosevelt1995 так точно, опять же мы мемоизацией заранее нарушаем принцип YAGNI , то есть мемоизируем сразу всё, но оно нам можно вообще не пригодится

@IlyaShaforostoff Жыл бұрын

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

@alik64 Жыл бұрын

Спасибо за видео , как всегда очень полезный материал ! Пошел проверять свои приложения 😁🚀

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

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

@alexrassydihin710 Жыл бұрын

Ждем ролик по вебпаку. И спасибо за этот!

@Nemimo1 Жыл бұрын

Тимур, спасибо вам огромное! Крутейший контент, очень здорово!

@iskander1514 Жыл бұрын

Отличное видео, рад что существует такие каналы как твой. Хорошо помогает новичкам увидеть реальный пример работы. Хотелось бы в будущем посмотреть разбор проекта на Vue

@sh0ny Жыл бұрын

Являясь поклонником ЕVE , скажу, что это реально круто! ООООчень было интересно когда был рассмотрен в подробностях первый проект, всё же, хотелось бы, что бы Вы оставили такую рубрику

@vadymkononenko685 Жыл бұрын

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

@Lolin-dx7hk Жыл бұрын

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

@nagibatorpro734 Жыл бұрын

Люблю такие видео,делай почаще !

@zafkielakfinrear2006 Жыл бұрын

Хороший видосик, спасибо :), всё ещё ждём полный курс по js от тебя

@sonarsphere Жыл бұрын

да вроде уже немало курсов по js на ютюбе.

@zafkielakfinrear2006 Жыл бұрын

@@sonarsphereпринципиально от него жду, хотя js уже изучил.

@McNeelone Жыл бұрын

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

@haykmxitaryandinamoboks9759 Жыл бұрын

@@McNeelone какая тебе разница зачем ему? Ему интересна подача материала этого человека. Чё ты докопался

@barbatage5078 Жыл бұрын

Ат душииии братишка! Спасибо 🙏🏻

@forwarddenz2976 Жыл бұрын

Тооооп Лучшее что можно было придумать Жду следующий выпуск!!!

@anastasiia_idle Жыл бұрын

Оч круто, спасибо, Тимур!

@marvelmarvel1068 Жыл бұрын

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

@c4973 Жыл бұрын

очень круто! Спасибо за видео! Давай еще.

@helenit4365 Жыл бұрын

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

@eldarkurmanaliev7130 Жыл бұрын

Как всегда супер мега круто!!!

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

Интересная рубрика, спасибо за старания, очень приятно было смотреть разбор проектов )

@serhiisynianskyi8348 Жыл бұрын

Благодарю за отличную работу)

@markin8464 Жыл бұрын

Очень класная рубрика. Делай, пожалуйста, по больше таких видео 👍

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

Спасибо за контент, умничка

@AntonGorbachevDev Жыл бұрын

Оооо, отель узнал, это же задание из открытого курса от FSD или уже сейчас от Metalamp)

@sergeymaksimov3441 Жыл бұрын

Огонь контент, спасибо!

@allrightbruh Жыл бұрын

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

@notelovoyadecir6563 Жыл бұрын

Токсин бронь отелей, ТЗ обучалки от metalamp))

@romanvinogradovby Жыл бұрын

Поясни не понял. Не знаком с этим ресурсом. Там такие проекты для обучения бесплатно?

@AlexPebodyGM Жыл бұрын

Шикарно! Спасибо!

@Shad0w5m00h Жыл бұрын

Тимур, спасибо) вежливая аккуратная критика без лишней жести. Всем ребятам респекты, молоты)

@romanvinogradovby Жыл бұрын

А что бывает другая критика по твоему опыту? Так это бородатые дети с синдромом защемленного яичка в детстве, которых чмырили. Триггерные душноты коих надо 3,14здить

@Shad0w5m00h Жыл бұрын

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

@daariidashi7311 Жыл бұрын

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

@sem1ra1 Жыл бұрын

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

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

оборачивать все в memo? Ну придите на проект и попробуйте, я посмотрю на вас!

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

Клевое видео, и проекты супер интересные

@moonbooi Жыл бұрын

Я ничего не понимаю, я даже далеко не программист, а музыкант, но почему это так интересно?)

@1kvolt1978 Жыл бұрын

Так может ты вовсе и не музыкант, а программист, только ещё не знаешь об этом? :) Загляни внутрь себя... (В духовном смысле, физически патологоанатом заглянет :)).

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

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

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

На первом проекте сам фильмы смотрел - однозначно круто

@vitaliyzakharchuk7884 Жыл бұрын

Прям прочувствовал как умнее стал. Спасибо

@satrun1466 Жыл бұрын

Родной ты красавчик по больше рекламы контент контентом но кушать всегда хочется

@andranik8917 Жыл бұрын

Крутой формат👍

@aleksandr1277 Жыл бұрын

Вот спасибо за подгон! Теперь знаю где киношку норм посмотреть! Про доктора Стренджа уже посмотрел.

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

Красава, не перетрудись.

@Amigun_yo Жыл бұрын

Как работодатели реагируют на пиратские сайты в портфолио? Допустим, полностью рабочий пиратский киносайт, или музыкальный сервис

@user-un6sj6eh8g 3 ай бұрын

Крутые ребята, понравился первый проект

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

Ничего не понятно, но очень интересно

@adelinaromanova8353 Жыл бұрын

Ого, интересно!!

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

Как всегда топ

@shokhrookhr3850 Жыл бұрын

Junior -разработчики делали?

@markdiper2933 Жыл бұрын

Почему ревью 8 проектов, если рассмотрели мы только 1)

@Liubov1501 Жыл бұрын

Шикарные проекты ! 🎉

@gregpozdnykov3539 Жыл бұрын

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

@arkadii4052 Жыл бұрын

Тогда они летели бы с бека

@Moonglouw Жыл бұрын

Как то даже обидно за остальных авторов, первому всю, остальным по чуть чуть :(

@Help_Tanks Жыл бұрын

как всегда круто

@kristinavolk2660 Жыл бұрын

Tимур, вы просто золото! Спасибо за труд 🤓💛 Понравились проекты с кинопоиском и бронью отелей, действительно очень практично и эстетично 😍 Хочу ещё отметить проект с генерацией картинок, оригинально и со вкусом, автору респект и удачи во всех начинаниях 😉 В общем контент огонь, и всем проектам много звёзд от души!

@victor5485 Жыл бұрын

Топ формат, продолжай!

@tazer8635 Жыл бұрын

очень круто

@romanjkee6211 Жыл бұрын

Привет! Очень хотелось бы урок, как правильно запаковать проект в докерфайл и развернуть на кубере)) Понимаю, что возможно это разработчикам не сильно нужно, но, было бы полезно посмотреть, как веб интегрируется с микросервисами и какие есть особенности)

@qqGenn Жыл бұрын

Тимур - красава!

@shim868 Жыл бұрын

превью огонь)

@positivesht6122 Жыл бұрын

Как всегда - прекрасно! Но хотел бы узнать, будет ли курс от тебя по Ангуляру?

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

Присоединяюсь к вопросу)

@hamitmaxudov1408 Жыл бұрын

Тоже очень интересно. И вообще будут ли обучался для совсем зелёных. Не смотрите ли в сторону преподавания и/или менторства?

@maratvaliev8642 Жыл бұрын

Бронирование отелей - я этот проект делал по тем же макетам несколько лет назад, правда только верстка и без реакта.

@dimalepel Жыл бұрын

У Вас осталась верстка?

@dimalepel Жыл бұрын

Можно с Вами как-то связаться?

@artyomsultanov5204 Жыл бұрын

Как всегда Тимур топ!

@davitgasparyan3331 Жыл бұрын

спасибо

@rinatvaliullov3247 Жыл бұрын

Крутые проекты. И разбор.

@progweb3036 Жыл бұрын

Здравствуйте, посмотрел ваш курс по vue.js, подскажите как может вю "стыковатся" с wordpress? Ведь например тот же вывод постов делается через wp и так заказчику даже удобнее(с приятным интерфейсом). Я видел вакансии где требует и vue и wp, так в чем они могут помочь друг другу, закрывать недостaтки друг друга?

@Prog_Ramer Жыл бұрын

никак. Но можно подключить вью на отдельную страницу ВП

@rucat284 Жыл бұрын

Это я так поинмаю senior программисты делали

@vasyok92 Жыл бұрын

Подскажите что за extensions для отображения прорисовки ?

@keeeparis Жыл бұрын

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

@r45her Жыл бұрын

Если видимой просадки в перфомансе нет, то разбираться в этом вообще не надо, лучше сфокусируйтесь на самой задаче)

@sergeyistominov5880 Жыл бұрын

Большое спасибо за разбор - коротко и по делу! Хотелось бы разбор ангулярного проекта (необязательно из сабжа) на предмет архитектурных фейлов. Понятно, что на ангуляре редко делают мелочевку, но все же. Думаю, что аудитории было бы интересно - все же в комментариях достаточно часто спрашивают про Angular!

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

Да, сейчас всё что касается ангуляра в рунете - на вес золота, было бы круто

@sergeyistominov5880 Жыл бұрын

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

@wizartable Жыл бұрын

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

@CTOCDOG Жыл бұрын

@L3fty so2 ну да html в школе проходят уже

@CTOCDOG Жыл бұрын

@L3fty so2 да при том, что его изучают уже в школе оло, что из написанного не понятно?

@CTOCDOG Жыл бұрын

@L3fty so2 извиняюсь тогда, думал духота, оказалось просто недопонимание🫡

@Kanal6322 Жыл бұрын

классный контент, но хотелось бы больше бэкенда

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

Привет, давай больше видосов по бэку на ноде

@ardanow1 Жыл бұрын

А где исходники? В телеге нет (есть) Нашел :)

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

продолжай

@erronblack9842 Жыл бұрын

Хотелось бы курса Three Js

@qqGenn Жыл бұрын

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

@kostyafrompiter Жыл бұрын

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

@eXacT9090 Жыл бұрын

Привет, можешь пожалуйста сделать урок, как создать простую форму входа в react проект через логин и пароль

@ismoilshokirov Жыл бұрын

Кстати насчёт первого проекта, где везде импортируется Header и Footer из копонентов в pages. У него не будет работать SEO, нужно импортировать в _document.js так как это SSR

@eugeneshiyan Жыл бұрын

У меня просто была страница, где этот header footer не нужен

@apexnuts9785 Жыл бұрын

Бронирование отеля, если я не ошибаюсь, это с платного курса Владилена

@ii3246 Жыл бұрын

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

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

@@ii3246 5ый проект не с курсов точно.

@ii3246 Жыл бұрын

@@user-eh8eb2lu8l пятый, там да, больше похож на свой. похожий видел на реакте.

@eugeneshiyan Жыл бұрын

@@user-eh8eb2lu8l так и первый проект не с курсов, я сам придумал и делал

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

Есть 1-й кейс в опенсорсе? Хотелось бы локально поднимать такой сайт, чтобы с друзьями смотреть фильмы

@eugeneshiyan Жыл бұрын

Есть, в телеге, можно кстати и не локально поднимать, там же на гите есть ссылка)

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

коммент поддержки. оптимизация, ререндеры, memo, useCallback

@Deniss020198 Жыл бұрын

Расскажи подробнее про Angular проект с микрофронтами, протолкните в топ Лайками!

@mak_whisk Жыл бұрын

Спасибо

@biLLie_wiLLie Жыл бұрын

первый проект крутой! Откуда брать фильмы? Это же ссылки на какой-то сервис?

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

апишка от кинопоиска

@biLLie_wiLLie Жыл бұрын

@@user-tn6jy7xk9l так там же куча переводов разных.

@frostdraky8172 Жыл бұрын

Тимур, привет, недавно сложилась такая ситуация, что пришлось делать микросервисы без Nest ( у каждого своя бд, так что под каждый docker-compose необходимо). Надо было их соединить и я (как профан) нашёл только один выход: в одну докер сеть всё запихнуть, но ни о какой масштабируемости можно и не говорить. Как бы ты решил такую задачку?

@nikandrov Жыл бұрын

Разворачивать надо на K8S, используй Helm charts

@hatimanhatiman3322 Жыл бұрын

У меня включается синдром самозванца, когда я вспоминаю про прикладные проекты для себя. Проблема в том что там и задачи и решение на уровне калькулятора a+b и там больше формулы и математика чем программа, из-за чего возникает ситуация что работодатель хочет пак скилов и технологий, а в портфолио у тебя калькулятор, типо это норм? И на этом фоне какой-нибудь клон кинопоиска выглядит получше.

@tagnati5585 Жыл бұрын

А если чилдрен мемоизировать, то это спасет от ререндеров?

@prostojerk9861 Жыл бұрын

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

@ybrbnf333 Жыл бұрын

Волшебных путей нет

@prostojerk9861 Жыл бұрын

@@ybrbnf333 мне просто интересно как учился автор, сам я интересуюсь другой разработкой

@zhenia14 Жыл бұрын

В реакте есть тришейкинг?

@allpavel Жыл бұрын

в самом реакте нет. В сборщиках

@zhenia14 Жыл бұрын

@@allpavel понял спс

@popuguytheparrot_ Жыл бұрын

По layout у некста есть в документации решение, не нужно придумать велосипед

@tigrpoehal1836 Жыл бұрын

а я пишу мессенджер (express, vue, mongo) но проект будет готов не скоро

@MrVertu01 Жыл бұрын

удачи с проектом)

@Dimaaasik Жыл бұрын

Попыт это ты?

@green9541 Жыл бұрын

Нужен сайт для мессенджера?)

@tigrpoehal1836 Жыл бұрын

@@green9541 админка что ли? Я ее сам на пыхе сделаю еу либо на ноде же

@borismakhmudov896 Жыл бұрын

Можно пожалуйста, больше контент по Vue, Nuxt, пожалуйста

@ArtikMan1994 Жыл бұрын

+ не всегда стоит юзать мемо если пропсами передаем обьект или массив. Есть случаи, когда ререндер дешевше чем usememo. Если мы экономим от 10 ререндеров - мы идем в плюс от мемоизации. В противном случае, - наоборот. Так показывают бенчмарки (подробнее на канале айти синяка). Понимаю, что все зависит от конкретной реализации компонента, но суть думаю понятна. И мемоизация - не всегда панацея. В документации подробнее описано почему. Если верить автору в этом случае, начинаешь задаваться вопросом: а почему разработчики реакта тогда по дефолту не сделали мемоизацию? В гугле были обсуждения на эту тему и Ден Абрамов давал ответ на этот вопрос. Спойлер: потому что мемоизация не всегда нужна и иногда идет в убыток. Его ответ можно нагуглить

@r45her Жыл бұрын

Да, полностью согласен

@qweertyuiopqwertyuiop1112 Жыл бұрын

Подскажите пожалуйста я новечек в бэкенде и не могу никак разобраться с одной темой в spring. Почему не работает подключение к websocket через registerstompenpoint, при том что через registerwebsockethandler все работает отлично?