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

108 390 просмотров • 11 июля 2022 г.

Ulbi TV

150 тыс. подписчиков

В этом ролике мы посмотрим 8 проектов от подписчиков. Один из них разберем детально. Остальные вы сможете посмотреть по ссылке ниже. Код ревью подписчиков.

Patreon/boosty (доступ к бонусам) - https://boosty.to/ulbitv

Все проекты тут (github) - https://t.me/ulbi_tv/91

Масштабируемые VPS от компании Мастерхост на топовом железе. Мастерхост - один из первых хостинг-провайдеров в России, работающий на рынке с 1999 года.
Процессор AMD EPYC, SSD NVMe-диски, бесплатное резервное копирование и удобная панель управления виртуальными серверами для построения надежной IT-инфраструктуры.
А специально для подписчиков канала Ulbi TV приятный бонус! Воспользуйтесь промокодом ULBITV для получения скидки 15% при заказе виртуального сервера или веб-хостинга.

https://masterhost.ru/vps/?utm_source=youtube&utm_medium=ulbitv&utm_campaign=ulbitv_1

Таймкоды:
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 (доступ к бонусам) - https://boosty.to/ulbitv

Qiwi кошелек - http://qiwi.com/n/BODYE821
Яндекс деньги - https://yoomoney.ru/to/4100116193037469

Finance&Programming

05.09.22 в 19:47

Типичное портфолио стажера - джуна по мнению работодателей

Victor

03.09.22 в 21:52

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

Geek

25.08.22 в 21:36

Если нажать ctrl+shift+b, то в Хроме закладки скроются, и полезного места станет больше.
*ваш Капитан Очевидность, можете на благодарить за совет.

Алексей Волосников

21.08.22 в 06:59

Оптимизация, ререндеры, memo, useCallback, bundlephobia Оптимизация, ререндеры, memo, useCallback, bundlephobia

Михайлович Влад

16.08.22 в 19:31

В каком плейлисте другие выпуски?

Georg Ros

10.08.22 в 15:39

Други, подскажите что (или где) можно почитать на тему практической реализации API на js. Через что их лучше организовывать (видел делают через функции, видел через статик метод класса, но целиком приложение не разбирал соответственно причину выбора в конкретном случае не понимаю). Уровень у меня базовый - знаю основы js(промисы, асинхронность, ООП вроде понимаю принципиально), естественно HTML и CSS.

Cергей Мирошниченко

08.08.22 в 09:42

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

JoniDreik

07.08.22 в 23:53

я хочу начать изучать программирование что лучше выбрать что бы потом не менять решение питон иле джава

LaZyS

06.08.22 в 09:12

Тимур, у меня вопрос. Что, если я начинающий реакт разработчик из маленького города и здесь нет вакансий по фронту вообще? Что в таком случае делать - продолжать учиться на своей технологии и метить на удаленку в большой город с вакансиями? Переезжать? Менять технологию на ту, которая популярна в городе? Я уже голову сломал :)

Lucha :3

05.08.22 в 18:04

да ацтань

Yelkanat

04.08.22 в 15:50

Здравствуйте! Не могу оформить подписку с Казахстана! Как я могу оформить подписку?

Viacheslav Boichuk

31.07.22 в 07:27

>buisnes
Спасибо, после этого выключил

Hatiman Hatiman

30.07.22 в 20:41

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

Собственник

30.07.22 в 08:19

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

daarii dashi

30.07.22 в 01:35

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

Azimut GG

28.07.22 в 18:00

вот смотрю тебя, и понимаю какой я тупой

Zig

28.07.22 в 16:23

Один вопрос такой, зарплата у backend, frontend и fullstack почти одиноквая или сильно различаються?

Omar İsmayilzade

28.07.22 в 11:55

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

Artyom Sultanov

26.07.22 в 16:39

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

Магомед Сулейманов

26.07.22 в 16:23

В какой программе он пишет?

Alex Pebody

26.07.22 в 09:45

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

Rinat Valiullov

25.07.22 в 16:13

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

Дмитрий Яльчик

24.07.22 в 23:01

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

SlavaSatane SlavaSatane

22.07.22 в 19:02

Что-то излишние мемо, прям всё и везде - скорее это совет как не надо делать((

Aziz Mukambetov

21.07.22 в 20:31

Брат тебе сколько лет воще шаришь не реально

Zaq The Duck

21.07.22 в 19:07

То есть "скорее всего, там используются какие-то библиотеки" про ASCII генератор - это к тому, что в видосе "смотрим проекты подписчиков" ты код решил не смотреть?

Heres Liker

21.07.22 в 18:48

Автор дает плохой совет об оптимизации.
Оборачивание компонентов в memo не останавливает реакт от браузерной перерисовки, а только от калькуляции следующего кусочка виртуального дерева, после которого уже внутри реакта решается что нужно перерисовать. Для большинства компонентов состоящих из нескольких элементов это операция элементарная, по факту просто вернуть js объект. Оптимизировать это - тоже самое что оборачивать все функции, которые внутри себя считают 2 + 2, просто чтобы они не вызывались. Реакт заточен под то, чтобы рендеры часто вызывались, и не стоит использовать лишний код снижающий читаемость.

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

Serhii Synianskyi

21.07.22 в 18:11

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

Андрей Казанов

21.07.22 в 14:54

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

Artem D

21.07.22 в 08:06

Мне кажется вы вводите людей в заблуждение советуя использовать memo и useCallback практически везде.
все эти "оптимизации" не бесплатны, очевидно, под каждый мемо и useCallback реакт делает дополнительную работу, и тут разработчик должен понимать, стоит ли эта работа оптимизации? Если компонент отрисовывает что то простое не делая никаких доп вычислений или доп логики то зачем его оптимизировать?

Astolf

20.07.22 в 18:52

начало длиною в жизнь, полное воды

Nickolay ivanov

20.07.22 в 14:00

Смотри, есть небольшой моментик, так-то много по делу сказал, но, ты просто и тупо обернул все в мемо, так не надо, посмотри у АйТи синяка вроде видео было про оптимизации, он там рассказывал про статью Дена Абрамова, есть такой момент, что зачастую, можно избавиться от лишнего рендера за счёт изменения композиции и надо анализировать, в профайлере написано почему рендерится тот или иной компонент, надо анализировать его положение в коде и тогда уже, если не получается оптимизировать с помощью композиции, то юзать react memo

Странный Человек

19.07.22 в 22:44

Всем привет, я пришёл к выводу, что что-то нужно менять в этой жизни и я хочу погрузиться с головой в iT, так как думаю, что это куда лучше, чем батрачить на заводе по 10 часов. Я не знаю, что из этого получится, но я приложу все усилия, чтобы достичь высот в данном направлении. Если кто тоже собирается, то желаю крепких нервов и не останавливаться. Всем успехов. Спросите через год)

Автор канала красавчик)

Davit Gasparyan

19.07.22 в 19:53

спасибо

Sergey Maksimov

19.07.22 в 19:49

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

Nescay

19.07.22 в 18:25

Подскажите пожалуйста, могу ли я за 6 месяцев самостоятельного изучения, устроиться джуном в какую нибудь область программирования, например js, java core, sql или что то связанное с Phyton, html, css и подобное?

dlz

19.07.22 в 13:58

как называется его idle ?

HMM

18.07.22 в 11:57

Начало: 03:35

Anderson

18.07.22 в 05:26

Некоторые проекты почти полные копии преподавателей. Не знаю кто у кого копипастит, но даже стили и логига одинаковая

moonboi ♪

17.07.22 в 17:38

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

Alexandru Cristea

17.07.22 в 16:27

Можете посоветовать несколько типов архитектур?

Илья Приходько

17.07.22 в 15:22

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

Prog Ramming

17.07.22 в 09:18

Хороший обзорный ролик получился! Оптимизация, ререндеры, memo, useCallback, bundlephobia Оптимизация, ререндеры, memo, useCallback, bundlephobia

sᴜɴsᴇᴛ ʟᴏᴠᴇʀ

17.07.22 в 08:34

А первый проект был по шаблону или с нуля написан?

Prog Web

17.07.22 в 08:07

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

Denys Bilas

16.07.22 в 17:20

Привет. Если выбирать между Java и C#, что бы ты выбрал?

Владимир Шустров

16.07.22 в 12:49

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

Владимир Шустров

16.07.22 в 12:18

подскажите пожалуйста. Сейчас редакс тулкин на хайпе, но я не могу понять почему. Он же весит 11.8 мб, это ппц как много. Да, там много библиотек включено в сборку, но даже если собирать отдельно, получается много. НО тем не менее, сайт бандл фобия показывает другие показатели: 39.4kB.

Так стоит ли переходить на редакс тулкит? Очень отталкивает его вес, 11.8 мб это очень много.

Спасибо

Cl4x

16.07.22 в 04:51

Подскажите замену для монгоДБ, залочили они атласс для русских

eXacT9090

15.07.22 в 20:14

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

Владимир Сударьков

15.07.22 в 19:52

Перший проект відкрив мені memo, я сам бекенд, але трохи по роботі з реактом стикаюся. Круто, якісно і лаконічно

mgrm

15.07.22 в 09:05

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

Marat Valiev

15.07.22 в 05:52

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

Roman jkee

14.07.22 в 19:37

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

Frost Draky

14.07.22 в 18:24

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

Денис Лихачёв

14.07.22 в 15:55

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

Кирилл

14.07.22 в 14:08

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

Петр

14.07.22 в 08:15

Обсирать своих подписчиков - идешь к успеху)

Дмитрий М

14.07.22 в 07:37

Использовать везде memo() тоже неправильно, нужно разделять компоненты

Tazer

14.07.22 в 05:34

очень круто

Учёба SPA

14.07.22 в 01:52

Крутой формат! хоть и не видно перерисовку всего дерева а всё равно важно чтобы перерисовывался только тот компонент который подвергся изменению. правильный акцент 13:13

Лемикс

13.07.22 в 21:38

Видео интересное, но мне показалось халтурой, что освящен нормально только один проект из восьми. Зачем было показывать остальные проекты с комментарием "код, честно говоря, я особо не смотрел"? Если это видео о том, какие приемы хорошие/плохие были использованы в той или иной работе с просмотром исходников и тд, то можно семь проектов смело выкидывать из видео. Если это видео является типа реакцией на работы подписчиков, то зачем нужно было так детально разбирать первую работу, если в случае чего, люди сами смогут взглянуть на код?
Видно, автор разбирается в теме, дает дельные советы, но у меня сложилось впечатление, что авторы семи проектов остались обделены, а из "критикующих" комментраиев к их работам остались только "ну вот здесь верстка поехала"

Rubber Gum

13.07.22 в 15:45

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

Roman

13.07.22 в 15:37

Такие разборы это конечно пиздец. Не видеть в упор что спредится пропс и говорить, что мемо не поможет из-за чилдрен это сильно

Roman

13.07.22 в 15:30

Во фронтенде нет сервисов. Объект с кучей ключей это не сервис

Roman

13.07.22 в 15:29

Препроцессы это не хорошо. Хз за что тут хвалить

Roman

13.07.22 в 15:28

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

Roman

13.07.22 в 15:20

Прежде чем критиковать, научись сам нормально кодить и отвечать на интервью

Brayden Wilson

13.07.22 в 15:12

20:10

INTEGRAL

13.07.22 в 15:04

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

Ismoil Shokirov

13.07.22 в 14:43

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

Someone Neverknown

13.07.22 в 12:34

Вот удивительная вещь! Программисты же должны по умолчанию быть более внимательны к словам, или нет?
Если обычный человек действительно может не понимать, зачем говорить правильно, то у программиста неправильное слово = нерабочий проект )
Но как-то так выходит, что нет. Название методов выучивают легко, а слова разговорного языка выучить проблема.
Если в "бизнес" я допускаю, что это была опечатка, а не непонимание от какого корня построено слово, то уж "бронь" - это прямо реальная жертва низкокультурного окружения.

Александр Пфейфер

13.07.22 в 12:15

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

Shokhrukh Ruziev

13.07.22 в 10:52

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

vasyok28

13.07.22 в 10:51

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

Вадим Арданов

13.07.22 в 09:50

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

Lord

13.07.22 в 06:17

Какой же страшный код у редакса и столько бойлерплейта и еще папка компонентс ваще

Qweertyuiop Qwertyuiop

13.07.22 в 04:39

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

Alina Shogenova

13.07.22 в 00:55

Kevin Flynn

12.07.22 в 20:52

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

shim

12.07.22 в 20:00

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

Владимир

12.07.22 в 18:57

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

Pavel Arepiev

12.07.22 в 18:57

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

Keeeparis

12.07.22 в 14:57

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

Мансур Джалалов

12.07.22 в 14:32

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

4real

12.07.22 в 14:18

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

Vladyslav Shchepotin

12.07.22 в 12:10

Спасибо за видео! Хочу прокомментировать ваши замечания по первому проекту:
1. Много обращаете внимания на вкусовщину: автор захотел не выносить все в src и т.д. ну и ничего страшного, пускай лежит в корне, для него это не проблема, ему так удобно, да и другим разработчикам не составит труда что-то найти или понять.
2. Вы сильно замудрили с мемоизацией компонент которые ререндерятся при нажатии на кнопку "Буду смотреть". Там надо просто перенести логику isFavourite в MovieFavorite, а с MovieItem убрать (не надо isFavourite определять в MovieItem, и передавать пропсом в MovieFavorite). В таком случае будет рендериться только кнопка, и не надо будет мемоизировать компоненты вообще.
3. Carousel. Вы вынесли функции и т.д. в useCallback/useMemo, при этом Swiper не является memo компонентом. Вообще не понятно что это даст, никакой оптимизации производительности или рендеров не будет.

SnAtVB

12.07.22 в 10:34

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

SxS

12.07.22 в 09:49

const Componet: FC<ItemProps> = memo(({ item }) => { item })
ESLint: 'item' is missing in props validation(react/prop-types)
как устранить эту ошибку? с мемо появляется

Denis Ba

12.07.22 в 09:43

а можно примерно оценочное время разработки для этих проектов узнать? думаю новичкам будет интересно

Александр

12.07.22 в 08:19

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

Grenadier

12.07.22 в 07:48

Автор вроде и беспокоится о размере бандла, но rtk-query норм) А ведь не оч, всю апишку тянешь. Такие моменты лучше просто отдельными функциями делать

Еще одно: я бы не стал оборачивать общие компоненты в memo, а делал бы это только там, где их использую, так как при использовании этого компонента не всегда может понадобиться мемо и будет трата ресурсов. Пример
import Card from "@shared"
const MemoizedCard = memo(Card);
const Page = () => <MemoizedCard />

Krosh

12.07.22 в 07:47

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

Ilya ы

12.07.22 в 07:43

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

unico xr5tj

12.07.22 в 07:01

интересный формат
пысы никаких скроллов, адаптивку надо уметь делать.

Iskander

12.07.22 в 07:01

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

Boris Makhmudov

12.07.22 в 05:45

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

Alex Rassydihin

12.07.22 в 04:59

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

Серж Тэ

12.07.22 в 04:07

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

Ivan Stepanoff

12.07.22 в 02:52

Класс! Очень интересный и достаточно редкий материал. Мне всегда недоставало 'разбора полетов' при выполнении тестов. Подсмотреть чужой код тоже не всегда помогает, не хватает опыта чтобы оценить реальные достоинства и скрытые недостатки кода.
Автору респект и всяческих благ!

Рекомендации:

Ulbi TV

102 933 просмотра •

6 июня 2022 г.

Ulbi TV

78 169 просмотров •

2 апреля 2022 г.

Ulbi TV

51 175 просмотров •

11 марта 2022 г.

Ulbi TV

19 054 просмотра •

18 октября 2021 г.

Ulbi TV

11 469 просмотров •

12 ноября 2020 г.

Ulbi TV

11 634 просмотра •

16 ноября 2020 г.

Ulbi TV

18 679 просмотров •

20 ноября 2020 г.

Ulbi TV

17 205 просмотров •

9 декабря 2020 г.

Ulbi TV

15 039 просмотров •

24 декабря 2020 г.

Ulbi TV

9 955 просмотров •

30 декабря 2020 г.

Ulbi TV

26 144 просмотра •

2 января 2021 г.

Ulbi TV

14 640 просмотров •

18 января 2021 г.

Ulbi TV

33 940 просмотров •

6 февраля 2021 г.

showinfo=0 controls=1 rel=0 iv_load_policy=3