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