Смотрим проекты подписчиков 8 проектов. Оптимизация, ререндеры, memo, useCallback, bundlephobia
ฝัง
- เผยแพร่เมื่อ 24 มิ.ย. 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 учёба часть практики
@@joehunter1971 часть практики учёбы
Спасибо за видео. Долго ждал такого, надеюсь еще будет выходить.
Тимур, спасибо за всегда актуальные видео. Мне, как начинающему, посмотреть на структуру и архитектуру разных проектов просто невероятно полезно
Спасибо Улби ,ты крут ). Ребята молодцы что поделились проектами ,все проекты по свойму хороши. Я с удовольствием заброинровал бы номер в отеле или посмотрел бы фильм на таких приятных сайтах ,желаю всем успехов !
Спасибо за видео , как всегда очень полезный материал ! Пошел проверять свои приложения 😁🚀
Тимур, спасибо вам огромное! Крутейший контент, очень здорово!
С мемо оч хороший и понятный пример, как обычно респект! Ждем ролик по вебпаку, залайкайте чтоб в топ
да,я ему писал,вебпак ждем!!!
в чем хороший пример? сидеть оборачивать все приложение в мемо, чтобы компонент не ререндерился при обновлении стейта выше? серьезно? мемоизация это не панацея и брать оборачивать все в мемо - глупо, нужно смотреть на выполняемую логику компонентом (насколько критично ее перевыполнение при ререндерах), тестировать на потребление памяти и цпу и тогда уже делать какие-то выводы по необходимости оптимизации, а не следовать логике "перерисовывается - накину-ка я мемо"
в данном случае автор видео не прав и вводит неопытных разработчиков в заблуждение
@@ops1ops дело даже не в том, что глупо оборачивать всё подряд. @UlbiTV в принципе ошибается, говоря "оптимизировать надо сразу". Это не так. Это говорит и дока реакта, и многие практики. "Если вы не видите, что оптимизация нужна, она вам не нужна". Еще раз, дока реакта прямо об этом говорит.
@@roosevelt1995 так точно, опять же мы мемоизацией заранее нарушаем принцип YAGNI , то есть мемоизируем сразу всё, но оно нам можно вообще не пригодится
огромное спасибо, полезный обзор, особенно когда высказали рекомендации по проекту, что мемоизировать, что нет и почему.
ваши силы были потрачены не зря! с удовольствием посмотрел
Ждем ролик по вебпаку. И спасибо за этот!
Отличное видео, рад что существует такие каналы как твой. Хорошо помогает новичкам увидеть реальный пример работы. Хотелось бы в будущем посмотреть разбор проекта на Vue
офигенная рубрика на самом деле, очень классно, я как раз перед просмотром, когда только видос вышел, подумал, что оставлю коммент, что давай больше подобных видосов где разбираешь чужой код и в самом конце ты говоришь, что больше такое делать не будешь((
Отличное видео! Судя по частоте выхода видео и по их наполнению, вы очень много времени посвящаете этому, и это на протяжение длительного времени. Было бы круто, если бы вы рассказали как проводите свой рабочий день и как вам удается столько времени поддерживать такую продуктивность (хотя бы в формате поста). Спасибо !
Люблю такие видео,делай почаще !
Тооооп
Лучшее что можно было придумать
Жду следующий выпуск!!!
Ат душииии братишка! Спасибо 🙏🏻
Хороший видосик, спасибо :), всё ещё ждём полный курс по js от тебя
да вроде уже немало курсов по js на ютюбе.
@@sonarsphereпринципиально от него жду, хотя js уже изучил.
@@zafkielakfinrear2006 а для чего ждёшь курс именно от него? тем более если изучил жс... Странные люди в наше время пошли, им мало доки и куче других курсов.
@@McNeelone какая тебе разница зачем ему? Ему интересна подача материала этого человека. Чё ты докопался
Являясь поклонником ЕVE , скажу, что это реально круто! ООООчень было интересно когда был рассмотрен в подробностях первый проект, всё же, хотелось бы, что бы Вы оставили такую рубрику
Оч круто, спасибо, Тимур!
Интересная рубрика, спасибо за старания, очень приятно было смотреть разбор проектов )
Как всегда супер мега круто!!!
очень круто! Спасибо за видео! Давай еще.
Очередное спасибо!
Благодарю за отличную работу)
Спасибо за контент, умничка
Огонь контент, спасибо!
искал где бесплатно посмотреть фильмы без смс и регистрации, наткнулся на это видео еще и кодить научился
автору спасибо
Очень крутое видео, прям сразу видишь над чем нужно работать, классный формат
Очень класная рубрика. Делай, пожалуйста, по больше таких видео 👍
Шикарно! Спасибо!
Клевое видео, и проекты супер интересные
Очень классное видео. Еще не закончил учить нативный JS, так что о фрейморках и речи не идет, но такой формат позволяет расширить кругозор и иметь более четкое представление о том, что тебя ждет.
Спасибо, лайк!
Крутой формат👍
Спасибо очень крутое и нужное видео! пожалуйста продолжай снимать такие видео мне как и другим я думаю очень помогает и мотивирует
У тебя отличный канал, я много знаний получаю от твоих видео, надеюсь ты не забросишь ютуб
Тимур, спасибо) вежливая аккуратная критика без лишней жести. Всем ребятам респекты, молоты)
А что бывает другая критика по твоему опыту? Так это бородатые дети с синдромом защемленного яичка в детстве, которых чмырили. Триггерные душноты коих надо 3,14здить
@@romanvinogradovby да ещё как бывает. Токсики не спят. Знакомый рассказал, что его собесил средних лет мужик. Так вот, собес был пулеметным расстрелом длиной в два часа, где собеседующий буквально упивался своей гига крутостью и афигенно глубокими знаниями
Посмотрел я значит весь видос и удивился от новых слов которые вообще никогда не слышал....
Оооо, отель узнал, это же задание из открытого курса от FSD или уже сейчас от Metalamp)
Очень круто. Спасибо большое за ваш труд. И советы актуальные
Вот спасибо за подгон! Теперь знаю где киношку норм посмотреть! Про доктора Стренджа уже посмотрел.
Красава, не перетрудись.
Ого, интересно!!
Как всегда топ
Прям прочувствовал как умнее стал. Спасибо
Шикарные проекты ! 🎉
Почему ревью 8 проектов, если рассмотрели мы только 1)
как всегда круто
Крутые ребята, понравился первый проект
Тимур - красава!
Топ формат, продолжай!
На первом проекте сам фильмы смотрел - однозначно круто
Родной ты красавчик по больше рекламы контент контентом но кушать всегда хочется
очень круто
Я ничего не понимаю, я даже далеко не программист, а музыкант, но почему это так интересно?)
Так может ты вовсе и не музыкант, а программист, только ещё не знаешь об этом? :) Загляни внутрь себя... (В духовном смысле, физически патологоанатом заглянет :)).
Tимур, вы просто золото! Спасибо за труд 🤓💛
Понравились проекты с кинопоиском и бронью отелей, действительно очень практично и эстетично 😍
Хочу ещё отметить проект с генерацией картинок, оригинально и со вкусом, автору респект и удачи во всех начинаниях 😉
В общем контент огонь, и всем проектам много звёзд от души!
Токсин бронь отелей, ТЗ обучалки от metalamp))
Поясни не понял. Не знаком с этим ресурсом. Там такие проекты для обучения бесплатно?
Крутые проекты. И разбор.
превью огонь)
Привет! Очень хотелось бы урок, как правильно запаковать проект в докерфайл и развернуть на кубере)) Понимаю, что возможно это разработчикам не сильно нужно, но, было бы полезно посмотреть, как веб интегрируется с микросервисами и какие есть особенности)
Как всегда Тимур топ!
спасибо
оборачивать все в memo? Ну придите на проект и попробуйте, я посмотрю на вас!
Как работодатели реагируют на пиратские сайты в портфолио? Допустим, полностью рабочий пиратский киносайт, или музыкальный сервис
Как всегда - прекрасно! Но хотел бы узнать, будет ли курс от тебя по Ангуляру?
Присоединяюсь к вопросу)
Тоже очень интересно. И вообще будут ли обучался для совсем зелёных. Не смотрите ли в сторону преподавания и/или менторства?
Возможно в проекте с фильмами планировали сделать какую-то админскую версию сайта, где можно было бы добавлять категории и т.д., поэтому они и в состояниях, а не в константах.
Тогда они летели бы с бека
Большое спасибо за разбор - коротко и по делу! Хотелось бы разбор ангулярного проекта (необязательно из сабжа) на предмет архитектурных фейлов. Понятно, что на ангуляре редко делают мелочевку, но все же. Думаю, что аудитории было бы интересно - все же в комментариях достаточно часто спрашивают про Angular!
Да, сейчас всё что касается ангуляра в рунете - на вес золота, было бы круто
@@user-mi8hb1xj5q и от многих слышу, типо уже и реакт не торт(про Ангуляр еще хуже) - все на Vue идут. Но я отказываюсь в это верить - у всех трех фреймворков есть определённые плюсы, но Ангуляр какой-то ламповый, "свой") Возможно, т.к. ООП ближе к пониманию.
Ничего не понятно, но очень интересно
фигасе. автор я хочу у тебя учиться. так лаконично все рассказываешь. я в начале пути и изучаю чистый js. и сейчас это видео для меня было как инопланетный язык. но как же это интересно и здорово даже если просто брать сам факт того, что если превозмочь свое нехочу/не умею/свою лень, то я смогу сделать подобный проект. я уже загуглил пару моментов т к стало интересно что это и как.
@L3fty so2 ну да html в школе проходят уже
@L3fty so2 да при том, что его изучают уже в школе оло, что из написанного не понятно?
@L3fty so2 извиняюсь тогда, думал духота, оказалось просто недопонимание🫡
Как то даже обидно за остальных авторов, первому всю, остальным по чуть чуть :(
классный контент, но хотелось бы больше бэкенда
Бронирование отелей - я этот проект делал по тем же макетам несколько лет назад, правда только верстка и без реакта.
У Вас осталась верстка?
Можно с Вами как-то связаться?
По идее я стараюсь не использовать memo, а наоборот, изолирую логику в компонентах, где происходит перерендер. Иначе каждый новый добавленный компонент нужно оборачивать в мемо, когда можно разобраться в причинах перерендера и разбить на компоненты.
Если видимой просадки в перфомансе нет, то разбираться в этом вообще не надо, лучше сфокусируйтесь на самой задаче)
Спасибо
продолжай
Здравствуйте, посмотрел ваш курс по vue.js, подскажите как может вю "стыковатся" с wordpress? Ведь например тот же вывод постов делается через wp и так заказчику даже удобнее(с приятным интерфейсом). Я видел вакансии где требует и vue и wp, так в чем они могут помочь друг другу, закрывать недостaтки друг друга?
никак. Но можно подключить вью на отдельную страницу ВП
Подскажите что за extensions для отображения прорисовки ?
Привет, давай больше видосов по бэку на ноде
Кстати насчёт первого проекта, где везде импортируется Header и Footer из копонентов в pages. У него не будет работать SEO, нужно импортировать в _document.js так как это SSR
У меня просто была страница, где этот header footer не нужен
Junior -разработчики делали?
Автор вроде и беспокоится о размере бандла, но 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()
}
Это я так поинмаю senior программисты делали
Спасибо за видео. Насчёт мемоизации подмечу, что совет не очень правильный (сам раньше этим грешил). Если всё бездумно оборачивать в memo, useMemo, useCallback, то приложение будет работать медленнее, потому что эти функции тоже не бесплатные. Если бы это было не так, давно бы уже сделали мемоизацию из коробки. Плюс они довольно сильно ухудшают читабельность кода и заставляют следить за зависимостями
Лучше всего их использовать только там, где реально нужно. Например, если надо функцию или значение использовать в useEffect, или в кастомных хуках тоже можно на всякий случай. В общем сначала надо дождаться проблемы, а потом уже её решать, а преждевременная оптимизация это зло, как всем известно
Ну и если вас пугают лишние рендеры, то keep calm, так работает реакт, это нормально. Рендеры очень быстрые, и борьба с ними - это не то, на что стоит тратить своё время, потратьте его лучше на решение бизнес-задачи. В противном случае юзер всё равно не заметит разницы (он не будет лезть в девтулзы и смотреть, что там подсвечивается), а вы потратите на это лишнее время + излишне усложните код, который вам ещё поддерживать в будущем
Есть 1-й кейс в опенсорсе? Хотелось бы локально поднимать такой сайт, чтобы с друзьями смотреть фильмы
Есть, в телеге, можно кстати и не локально поднимать, там же на гите есть ссылка)
+ не всегда стоит юзать мемо если пропсами передаем обьект или массив. Есть случаи, когда ререндер дешевше чем usememo. Если мы экономим от 10 ререндеров - мы идем в плюс от мемоизации. В противном случае, - наоборот. Так показывают бенчмарки (подробнее на канале айти синяка). Понимаю, что все зависит от конкретной реализации компонента, но суть думаю понятна.
И мемоизация - не всегда панацея. В документации подробнее описано почему.
Если верить автору в этом случае, начинаешь задаваться вопросом: а почему разработчики реакта тогда по дефолту не сделали мемоизацию? В гугле были обсуждения на эту тему и Ден Абрамов давал ответ на этот вопрос. Спойлер: потому что мемоизация не всегда нужна и иногда идет в убыток. Его ответ можно нагуглить
Да, полностью согласен
Бронирование отеля, если я не ошибаюсь, это с платного курса Владилена
все с известных курсов... своего ничего.((( у меня просто хватает курсов в известного сайта, даже знаю кто автор курсов этих.))) интереснее было бы свое проекты посмотреть. а так, народ тупо с курсов кидают...
@@ii3246 5ый проект не с курсов точно.
@@user-eh8eb2lu8l пятый, там да, больше похож на свой. похожий видел на реакте.
@@user-eh8eb2lu8l так и первый проект не с курсов, я сам придумал и делал
Привет, можешь пожалуйста сделать урок, как создать простую форму входа в react проект через логин и пароль
первый проект крутой! Откуда брать фильмы? Это же ссылки на какой-то сервис?
апишка от кинопоиска
@@user-tn6jy7xk9l так там же куча переводов разных.
Расскажи подробнее про Angular проект с микрофронтами, протолкните в топ Лайками!
на 10:35 минуте заметил такую канструкцию. Линк и так превращается в тег а. А а в а пихать нельзя ))))
это nextjs, тут это именно так нужно, посмотрите доку и исходный код
@@eugeneshiyan спасибо, я не знал :)
Да, внутри линка обязательно надо вложить a в nextjs
@@kostyafrompiter Это всё моя невнимательность, показалось ванильным реакт-домовским компонентом. И называются одинаково. :) Но выглядит до жути нелогично (по моему мнению). Не знаю, что курили разработчики некста ))))
автор, посоветуй книги или видео, где ты лично учился, интересно узнать твои первые шаги изучения
Волшебных путей нет
@@ybrbnf333 мне просто интересно как учился автор, сам я интересуюсь другой разработкой
А где исходники? В телеге нет (есть) Нашел :)
Можно пожалуйста, больше контент по Vue, Nuxt, пожалуйста
А вообще это нормальная практика разделять скрины и страницу? Вроде выглядит удобно
Хотелось бы курса Three Js
Люто плюсую! Очень интересная, востребованная, но слабо раскрытая тема
У них дока тупая вообще.. ничего не понятно только с просторов интернета разобраться можно.
коммент поддержки. оптимизация, ререндеры, memo, useCallback
Тимур, привет, недавно сложилась такая ситуация, что пришлось делать микросервисы без Nest ( у каждого своя бд, так что под каждый docker-compose необходимо). Надо было их соединить и я (как профан) нашёл только один выход: в одну докер сеть всё запихнуть, но ни о какой масштабируемости можно и не говорить. Как бы ты решил такую задачку?
Разворачивать надо на K8S, используй Helm charts
Как вариант, идея, аналогичный формат, но без ревью: Подборка библиотек. Просто обзор, функционал, какой профит и т.п. ну это так.
Ахахах, бронирование отелей это со стажировки компании Metalamp вроде
У меня включается синдром самозванца, когда я вспоминаю про прикладные проекты для себя. Проблема в том что там и задачи и решение на уровне калькулятора a+b и там больше формулы и математика чем программа, из-за чего возникает ситуация что работодатель хочет пак скилов и технологий, а в портфолио у тебя калькулятор, типо это норм? И на этом фоне какой-нибудь клон кинопоиска выглядит получше.