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