Смотрим проекты подписчиков 8 проектов. Оптимизация, ререндеры, memo, useCallback, bundlephobia
Вставка
- Опубліковано 17 чер 2024
- В этом ролике мы посмотрим 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 - Наука та технологія
Посмотрел и понял, как же дохрена мне ещё учить....))))
Очень круто! Пожалуйста, не забрасывай разборы чужих проектов! Это очень помогает понять и свои ошибки)
Хотя бы по немногу)
Спасибо!
Спасибо! Ребята крутые, постарались на славу! Мне понравился проект "Бронирование отелей" своей практичностью. Когда смотришь такие проекты понимаешь как много еще предстоит выучить, чтобы выйти на должный уровень.
Не столько учить, сколько практиковаться
@@user-bs1ef6tt3e практика часть учебы
@@phonty29 учёба часть практики
Тимур, спасибо за всегда актуальные видео. Мне, как начинающему, посмотреть на структуру и архитектуру разных проектов просто невероятно полезно
Спасибо за видео. Долго ждал такого, надеюсь еще будет выходить.
Спасибо Улби ,ты крут ). Ребята молодцы что поделились проектами ,все проекты по свойму хороши. Я с удовольствием заброинровал бы номер в отеле или посмотрел бы фильм на таких приятных сайтах ,желаю всем успехов !
огромное спасибо, полезный обзор, особенно когда высказали рекомендации по проекту, что мемоизировать, что нет и почему.
ваши силы были потрачены не зря! с удовольствием посмотрел
Спасибо за видео , как всегда очень полезный материал ! Пошел проверять свои приложения 😁🚀
Отличное видео, рад что существует такие каналы как твой. Хорошо помогает новичкам увидеть реальный пример работы. Хотелось бы в будущем посмотреть разбор проекта на Vue
Тимур, спасибо вам огромное! Крутейший контент, очень здорово!
Хороший видосик, спасибо :), всё ещё ждём полный курс по js от тебя
да вроде уже немало курсов по js на ютюбе.
@@sonarsphereпринципиально от него жду, хотя js уже изучил.
@@zafkielakfinrear2006 а для чего ждёшь курс именно от него? тем более если изучил жс... Странные люди в наше время пошли, им мало доки и куче других курсов.
@@McNeelone какая тебе разница зачем ему? Ему интересна подача материала этого человека. Чё ты докопался
Ждем ролик по вебпаку. И спасибо за этот!
Отличное видео! Судя по частоте выхода видео и по их наполнению, вы очень много времени посвящаете этому, и это на протяжение длительного времени. Было бы круто, если бы вы рассказали как проводите свой рабочий день и как вам удается столько времени поддерживать такую продуктивность (хотя бы в формате поста). Спасибо !
офигенная рубрика на самом деле, очень классно, я как раз перед просмотром, когда только видос вышел, подумал, что оставлю коммент, что давай больше подобных видосов где разбираешь чужой код и в самом конце ты говоришь, что больше такое делать не будешь((
Являясь поклонником ЕVE , скажу, что это реально круто! ООООчень было интересно когда был рассмотрен в подробностях первый проект, всё же, хотелось бы, что бы Вы оставили такую рубрику
Люблю такие видео,делай почаще !
Тооооп
Лучшее что можно было придумать
Жду следующий выпуск!!!
Ат душииии братишка! Спасибо 🙏🏻
Интересная рубрика, спасибо за старания, очень приятно было смотреть разбор проектов )
Очень класная рубрика. Делай, пожалуйста, по больше таких видео 👍
Оч круто, спасибо, Тимур!
очень круто! Спасибо за видео! Давай еще.
Тимур, спасибо) вежливая аккуратная критика без лишней жести. Всем ребятам респекты, молоты)
А что бывает другая критика по твоему опыту? Так это бородатые дети с синдромом защемленного яичка в детстве, которых чмырили. Триггерные душноты коих надо 3,14здить
@@romanvinogradovby да ещё как бывает. Токсики не спят. Знакомый рассказал, что его собесил средних лет мужик. Так вот, собес был пулеметным расстрелом длиной в два часа, где собеседующий буквально упивался своей гига крутостью и афигенно глубокими знаниями
С мемо оч хороший и понятный пример, как обычно респект! Ждем ролик по вебпаку, залайкайте чтоб в топ
да,я ему писал,вебпак ждем!!!
в чем хороший пример? сидеть оборачивать все приложение в мемо, чтобы компонент не ререндерился при обновлении стейта выше? серьезно? мемоизация это не панацея и брать оборачивать все в мемо - глупо, нужно смотреть на выполняемую логику компонентом (насколько критично ее перевыполнение при ререндерах), тестировать на потребление памяти и цпу и тогда уже делать какие-то выводы по необходимости оптимизации, а не следовать логике "перерисовывается - накину-ка я мемо"
в данном случае автор видео не прав и вводит неопытных разработчиков в заблуждение
@@ops1ops дело даже не в том, что глупо оборачивать всё подряд. @UlbiTV в принципе ошибается, говоря "оптимизировать надо сразу". Это не так. Это говорит и дока реакта, и многие практики. "Если вы не видите, что оптимизация нужна, она вам не нужна". Еще раз, дока реакта прямо об этом говорит.
@@roosevelt1995 так точно, опять же мы мемоизацией заранее нарушаем принцип YAGNI , то есть мемоизируем сразу всё, но оно нам можно вообще не пригодится
Как всегда супер мега круто!!!
Очень круто. Спасибо большое за ваш труд. И советы актуальные
Очередное спасибо!
Очень классное видео. Еще не закончил учить нативный JS, так что о фрейморках и речи не идет, но такой формат позволяет расширить кругозор и иметь более четкое представление о том, что тебя ждет.
Спасибо, лайк!
Благодарю за отличную работу)
Очень крутое видео, прям сразу видишь над чем нужно работать, классный формат
Огонь контент, спасибо!
Спасибо очень крутое и нужное видео! пожалуйста продолжай снимать такие видео мне как и другим я думаю очень помогает и мотивирует
Спасибо за контент, умничка
У тебя отличный канал, я много знаний получаю от твоих видео, надеюсь ты не забросишь ютуб
Шикарно! Спасибо!
Клевое видео, и проекты супер интересные
Вот спасибо за подгон! Теперь знаю где киношку норм посмотреть! Про доктора Стренджа уже посмотрел.
Крутой формат👍
Красава, не перетрудись.
искал где бесплатно посмотреть фильмы без смс и регистрации, наткнулся на это видео еще и кодить научился
автору спасибо
Оооо, отель узнал, это же задание из открытого курса от FSD или уже сейчас от Metalamp)
Ого, интересно!!
Прям прочувствовал как умнее стал. Спасибо
Родной ты красавчик по больше рекламы контент контентом но кушать всегда хочется
На первом проекте сам фильмы смотрел - однозначно круто
Как всегда топ
Посмотрел я значит весь видос и удивился от новых слов которые вообще никогда не слышал....
Токсин бронь отелей, ТЗ обучалки от metalamp))
Поясни не понял. Не знаком с этим ресурсом. Там такие проекты для обучения бесплатно?
Тимур - красава!
Топ формат, продолжай!
как всегда круто
превью огонь)
Крутые ребята, понравился первый проект
Шикарные проекты ! 🎉
Я ничего не понимаю, я даже далеко не программист, а музыкант, но почему это так интересно?)
Так может ты вовсе и не музыкант, а программист, только ещё не знаешь об этом? :) Загляни внутрь себя... (В духовном смысле, физически патологоанатом заглянет :)).
очень круто
Tимур, вы просто золото! Спасибо за труд 🤓💛
Понравились проекты с кинопоиском и бронью отелей, действительно очень практично и эстетично 😍
Хочу ещё отметить проект с генерацией картинок, оригинально и со вкусом, автору респект и удачи во всех начинаниях 😉
В общем контент огонь, и всем проектам много звёзд от души!
Как всегда Тимур топ!
Большое спасибо за разбор - коротко и по делу! Хотелось бы разбор ангулярного проекта (необязательно из сабжа) на предмет архитектурных фейлов. Понятно, что на ангуляре редко делают мелочевку, но все же. Думаю, что аудитории было бы интересно - все же в комментариях достаточно часто спрашивают про Angular!
Да, сейчас всё что касается ангуляра в рунете - на вес золота, было бы круто
@@user-mi8hb1xj5q и от многих слышу, типо уже и реакт не торт(про Ангуляр еще хуже) - все на Vue идут. Но я отказываюсь в это верить - у всех трех фреймворков есть определённые плюсы, но Ангуляр какой-то ламповый, "свой") Возможно, т.к. ООП ближе к пониманию.
Крутые проекты. И разбор.
оборачивать все в memo? Ну придите на проект и попробуйте, я посмотрю на вас!
спасибо
Привет! Очень хотелось бы урок, как правильно запаковать проект в докерфайл и развернуть на кубере)) Понимаю, что возможно это разработчикам не сильно нужно, но, было бы полезно посмотреть, как веб интегрируется с микросервисами и какие есть особенности)
Ничего не понятно, но очень интересно
фигасе. автор я хочу у тебя учиться. так лаконично все рассказываешь. я в начале пути и изучаю чистый js. и сейчас это видео для меня было как инопланетный язык. но как же это интересно и здорово даже если просто брать сам факт того, что если превозмочь свое нехочу/не умею/свою лень, то я смогу сделать подобный проект. я уже загуглил пару моментов т к стало интересно что это и как.
@L3fty so2 ну да html в школе проходят уже
@L3fty so2 да при том, что его изучают уже в школе оло, что из написанного не понятно?
@L3fty so2 извиняюсь тогда, думал духота, оказалось просто недопонимание🫡
Как работодатели реагируют на пиратские сайты в портфолио? Допустим, полностью рабочий пиратский киносайт, или музыкальный сервис
Как всегда - прекрасно! Но хотел бы узнать, будет ли курс от тебя по Ангуляру?
Присоединяюсь к вопросу)
Тоже очень интересно. И вообще будут ли обучался для совсем зелёных. Не смотрите ли в сторону преподавания и/или менторства?
Это я так поинмаю senior программисты делали
Возможно в проекте с фильмами планировали сделать какую-то админскую версию сайта, где можно было бы добавлять категории и т.д., поэтому они и в состояниях, а не в константах.
Тогда они летели бы с бека
классный контент, но хотелось бы больше бэкенда
По идее я стараюсь не использовать memo, а наоборот, изолирую логику в компонентах, где происходит перерендер. Иначе каждый новый добавленный компонент нужно оборачивать в мемо, когда можно разобраться в причинах перерендера и разбить на компоненты.
Если видимой просадки в перфомансе нет, то разбираться в этом вообще не надо, лучше сфокусируйтесь на самой задаче)
Почему ревью 8 проектов, если рассмотрели мы только 1)
Как то даже обидно за остальных авторов, первому всю, остальным по чуть чуть :(
Бронирование отелей - я этот проект делал по тем же макетам несколько лет назад, правда только верстка и без реакта.
У Вас осталась верстка?
Можно с Вами как-то связаться?
продолжай
Привет, давай больше видосов по бэку на ноде
Спасибо
Спасибо за видео. Насчёт мемоизации подмечу, что совет не очень правильный (сам раньше этим грешил). Если всё бездумно оборачивать в memo, useMemo, useCallback, то приложение будет работать медленнее, потому что эти функции тоже не бесплатные. Если бы это было не так, давно бы уже сделали мемоизацию из коробки. Плюс они довольно сильно ухудшают читабельность кода и заставляют следить за зависимостями
Лучше всего их использовать только там, где реально нужно. Например, если надо функцию или значение использовать в useEffect, или в кастомных хуках тоже можно на всякий случай. В общем сначала надо дождаться проблемы, а потом уже её решать, а преждевременная оптимизация это зло, как всем известно
Ну и если вас пугают лишние рендеры, то keep calm, так работает реакт, это нормально. Рендеры очень быстрые, и борьба с ними - это не то, на что стоит тратить своё время, потратьте его лучше на решение бизнес-задачи. В противном случае юзер всё равно не заметит разницы (он не будет лезть в девтулзы и смотреть, что там подсвечивается), а вы потратите на это лишнее время + излишне усложните код, который вам ещё поддерживать в будущем
Расскажи подробнее про Angular проект с микрофронтами, протолкните в топ Лайками!
Junior -разработчики делали?
Кстати насчёт первого проекта, где везде импортируется Header и Footer из копонентов в pages. У него не будет работать SEO, нужно импортировать в _document.js так как это SSR
У меня просто была страница, где этот header footer не нужен
Здравствуйте, посмотрел ваш курс по vue.js, подскажите как может вю "стыковатся" с wordpress? Ведь например тот же вывод постов делается через wp и так заказчику даже удобнее(с приятным интерфейсом). Я видел вакансии где требует и vue и wp, так в чем они могут помочь друг другу, закрывать недостaтки друг друга?
никак. Но можно подключить вью на отдельную страницу ВП
Ахахах, бронирование отелей это со стажировки компании Metalamp вроде
Жесть он умный..
Без шуток
Автор?
@@eugeneshiyan Да
@@jailyssneust2189 практикуйся и со временем будешь не хуже)
Подскажите что за extensions для отображения прорисовки ?
👍🏼👍🏼👍🏼
Можно пожалуйста, больше контент по Vue, Nuxt, пожалуйста
Хотелось бы курса Three Js
Люто плюсую! Очень интересная, востребованная, но слабо раскрытая тема
У них дока тупая вообще.. ничего не понятно только с просторов интернета разобраться можно.
Автор вроде и беспокоится о размере бандла, но rtk-query норм) А ведь не оч, всю апишку тянешь. Такие моменты лучше просто отдельными функциями делать
Еще одно: я бы не стал оборачивать общие компоненты в memo, а делал бы это только там, где их использую, так как при использовании этого компонента не всегда может понадобиться мемо и будет трата ресурсов. Пример
import Card from "@shared"
const MemoizedCard = memo(Card);
const Page = () =>
Типо с rtk query на аксиос переписать?)
@@eugeneshiyan если будешь экспортировать апишки как отдельные функции, то без разницы, что использовать.
Я про то, что лучше вот так
export const getHumans = () => ...
export const getHumanLanguage = () => ...
а не
export const humanAPI = {
getAll(),
getLanguage()
}
Как вариант, идея, аналогичный формат, но без ревью: Подборка библиотек. Просто обзор, функционал, какой профит и т.п. ну это так.
+ не всегда стоит юзать мемо если пропсами передаем обьект или массив. Есть случаи, когда ререндер дешевше чем usememo. Если мы экономим от 10 ререндеров - мы идем в плюс от мемоизации. В противном случае, - наоборот. Так показывают бенчмарки (подробнее на канале айти синяка). Понимаю, что все зависит от конкретной реализации компонента, но суть думаю понятна.
И мемоизация - не всегда панацея. В документации подробнее описано почему.
Если верить автору в этом случае, начинаешь задаваться вопросом: а почему разработчики реакта тогда по дефолту не сделали мемоизацию? В гугле были обсуждения на эту тему и Ден Абрамов давал ответ на этот вопрос. Спойлер: потому что мемоизация не всегда нужна и иногда идет в убыток. Его ответ можно нагуглить
Да, полностью согласен
на 10:35 минуте заметил такую канструкцию. Линк и так превращается в тег а. А а в а пихать нельзя ))))
это nextjs, тут это именно так нужно, посмотрите доку и исходный код
@@eugeneshiyan спасибо, я не знал :)
Да, внутри линка обязательно надо вложить a в nextjs
@@kostyafrompiter Это всё моя невнимательность, показалось ванильным реакт-домовским компонентом. И называются одинаково. :) Но выглядит до жути нелогично (по моему мнению). Не знаю, что курили разработчики некста ))))
первый проект крутой! Откуда брать фильмы? Это же ссылки на какой-то сервис?
апишка от кинопоиска
@@user-tn6jy7xk9l так там же куча переводов разных.
А где исходники? В телеге нет (есть) Нашел :)
Типичное портфолио стажера - джуна по мнению работодателей
Привет, можешь пожалуйста сделать урок, как создать простую форму входа в react проект через логин и пароль
автор, посоветуй книги или видео, где ты лично учился, интересно узнать твои первые шаги изучения
Волшебных путей нет
@@ybrbnf333 мне просто интересно как учился автор, сам я интересуюсь другой разработкой
коммент поддержки. оптимизация, ререндеры, memo, useCallback
а я пишу мессенджер (express, vue, mongo) но проект будет готов не скоро
удачи с проектом)
Попыт это ты?
Нужен сайт для мессенджера?)
@@green9541 админка что ли? Я ее сам на пыхе сделаю еу либо на ноде же
У меня включается синдром самозванца, когда я вспоминаю про прикладные проекты для себя. Проблема в том что там и задачи и решение на уровне калькулятора a+b и там больше формулы и математика чем программа, из-за чего возникает ситуация что работодатель хочет пак скилов и технологий, а в портфолио у тебя калькулятор, типо это норм? И на этом фоне какой-нибудь клон кинопоиска выглядит получше.