БЫСТРЫЙ FRONTEND. Оптимизация. Как писать JAVASCRIPT эффективно?

Ғылым және технология

В этом ролике мы поговорим о том, как делать быстрые оптимизированные проекты на Javascript и с примерами на React. Поговорим про Webpack, redux, различные подходы и способы по улучшению производительности frontend проекта.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Исходный код здесь - t.me/ulbi_tv/39
Домашнее задание здесь - / 58926560
Таймкоды:
00:00 ➝ Введение
00:30 ➝ Метрики, профайлинг
04:40➝ Подходы
35:00➝ Время ставить лайки и писать комменты :)
Мой канал в telegram и канал для общения подписчиков - t.me/ulbi_tv
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Пікірлер: 469

  • @gevorgmovsisyan5153
    @gevorgmovsisyan51532 жыл бұрын

    На русскоязычном ютубе нет таких как ты... Очень много уроков смотрел на разных каналах, но такого качественного контента как у тебя ни у кого не встречал

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Спасибо друг:)

  • @rustam_gasymov

    @rustam_gasymov

    2 жыл бұрын

    @@UlbiTV блин серьезно дружище, ты крут, я учусь и сейчас ищу себе ментора, если будет интересно маякни плз, может обсудим) спасибо тебе за контент

  • @miklayen_yakim

    @miklayen_yakim

    Жыл бұрын

    Да... Согласен

  • @railbatyrshin377

    @railbatyrshin377

    9 ай бұрын

    Есть ещё Sorax. И автор данного канала они самые лучшие в русскоязычном Ютубе

  • @marynakosiv3750
    @marynakosiv37502 жыл бұрын

    даю знать: нам надо ролики про оптимизацию и дев тулзы! спасибо контент супер!!

  • @moi-nick-zanyat
    @moi-nick-zanyat2 жыл бұрын

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

  • @lopsonbalzhinimaev642

    @lopsonbalzhinimaev642

    2 жыл бұрын

    feature slice архитектура

  • @moi-nick-zanyat

    @moi-nick-zanyat

    2 жыл бұрын

    @@lopsonbalzhinimaev642 хотелось бы увидеть на примере с комментариями

  • @lopsonbalzhinimaev642

    @lopsonbalzhinimaev642

    2 жыл бұрын

    @@moi-nick-zanyat у этой архитектуры неплохая документация, почитай, там есть примеры

  • @user-ur4ev7vl6c

    @user-ur4ev7vl6c

    2 жыл бұрын

    MPA?

  • @user-rz1hy7xg7o

    @user-rz1hy7xg7o

    2 жыл бұрын

    @@lopsonbalzhinimaev642 ох не знаю, 2 недельки поучил, поюзал, что-то вообще не зашло. Слишком сложная структура, которая отнимает кучу времени + ещё сыроватая. А главный минус, мало кто её использует. Лучше её не учить. Если в конторе на этом все пишут, то и новичка научат)

  • @pipkin931
    @pipkin9312 жыл бұрын

    На одном дыхании… Не вылетает тема с webpack. В частности заинтересовала тема - с подгрузкой, лениво, npm модулей - разделение кода для десктопа и мобильных Очень надеюсь, что будет время записать более подробное видео

  • @AirdropLuck
    @AirdropLuck2 жыл бұрын

    На 24:30 оговорка про функциональные и классовые компоненты. Пишу в тетрадь сразу, поэтому заметил :) Спасибо за афигенный контент!

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    за конспект отдельный респект! И за внимательность тоже))

  • @BondStreetRed
    @BondStreetRed2 жыл бұрын

    Я начинающий разработчик и меня давно беспокоила тема оптимизации. У вас всё классно описано, спасибо большое!)

  • @vadymkononenko685
    @vadymkononenko6852 жыл бұрын

    Лучший канал в русскоязычном сегменте!! сделай видео: маленький пет проект с новыми хуками + распрастраненными кастомными и тсом или про микрофронтенды

  • @aya4924
    @aya49242 жыл бұрын

    Словил себя на мысли, что уже несколько месяцев на тему разработки смотрю только Ulbi TV ) Что касается этого ролика - просто ОБЯЗАТЕЛЬНО к просмотру всем начинающим кодерам, да и продолжающим не помешает. У меня всегда подгорает, когда коллеги тащат в элементарный лендос кучу лишних библиотек, ленясь вместо этого написать 30-50 строк чистого js. А вы задумывались, сколько такого треш-кода движется в мировом интернете? Сколько тупого ненужного трафика? А это же всё, в конечном счёте, энергозатраты. Поэтому автору огромный респект за то, что затронул эту важную тему. Я считаю, что это нужно изучать сразу, перед html и css )

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Спасибо за такое доверие и поддержку! Ценю!

  • @romansamon9215
    @romansamon92152 жыл бұрын

    Привет! Из обычного верстальщика по-тихому внедряюсь во фронтенд тусовку, твой канал - находка, насчет профайлинга: часто использую, но видос все равно хотелось бы! Спасибо за старания

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Успехов!

  • @darieandre5598
    @darieandre55982 жыл бұрын

    Комментарий в качестве поддержки

  • @vadikot
    @vadikot Жыл бұрын

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

  • @UlbiTV

    @UlbiTV

    Жыл бұрын

    🤝🙏 спасибо!

  • @UlbiTV

    @UlbiTV

    Жыл бұрын

    🤝🙏 спасибо!

  • @vinderornitier
    @vinderornitier2 жыл бұрын

    Тимур очень важно именно от вас видео по дэбагу! Как понимать ошибки которые вываливаются в консоль, к чему они относятся и как ничего не перепутать. Это как раз то, что очень поможет новичкам в будущем не наступать на одни и те же грабли.

  • @johndoe034

    @johndoe034

    2 жыл бұрын

    100% было бы полезно, особенно в дев тулзах хрома. Тема актуальна не только для новичков, на проекте и мидлы и синьоры дебажили только консоль.логами

  • @efimkapliy6370
    @efimkapliy63703 ай бұрын

    Более 2-х лет прошло с момента записи видео, а оно ещё актуально! Спасибо за качественный материал!

  • @user-by5uv4cm2c
    @user-by5uv4cm2c2 жыл бұрын

    Жду выпуск про девтулз для отслеживания загрузки и прочего)

  • @TheZionjke
    @TheZionjke2 жыл бұрын

    спасибо тебе огромное! вроде бы про всё слышал и пробывал, но не понимал нахрен оно надо, а ты за пол часа все обьяснил) гений)

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    И тебе спасибо за поддержку!)

  • @londonsky1835
    @londonsky18352 жыл бұрын

    Плюс за разбор профайлинга

  • @platonyasev1913
    @platonyasev19132 жыл бұрын

    Крутое видео! Про профайлинг было бы очень неплохо)

  • @user-gj4mn3rg4l

    @user-gj4mn3rg4l

    2 жыл бұрын

    Профайлинг гоу! Могу дать реальный проэкт чтоб ты посмотрел по профайлеру

  • @alexsuhobski5231
    @alexsuhobski52312 жыл бұрын

    Досмотрел до конца. Пишу комментарий поддержки). Написать себе конспект по видео и правда будет не лишним, очень много информации.

  • @rinat_kam
    @rinat_kam2 жыл бұрын

    Лайк, не глядя

  • @romanbolshiyanov
    @romanbolshiyanov2 жыл бұрын

    Да уж реально полезно. После тестирования своих проектов понимаешь что нужно ещё пару месяцев к году чтобы весь мой хлам поставить на правильные рельсы:))) очень полезно, но времени нет... что делать?

  • @pavelbrunki
    @pavelbrunki2 жыл бұрын

    Отличное видео. Пишите еще видео) Ясно Понятно

  • @andreiribac6284
    @andreiribac62842 жыл бұрын

    Огромное спасибо! Буду возвращаться к этому ролику по мере моего развития в профессии )

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Успехов в развитии)

  • @user-nk6lp7xx7b
    @user-nk6lp7xx7b2 жыл бұрын

    Очень круто, спасибо! Было бы круто еще увидеть курс по безопасности. Многим было бы полезно т.к очень важная тема (XSS, CSRF, ...)

  • @TheBorninmotion

    @TheBorninmotion

    2 жыл бұрын

    поддерживаю !

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Спасибо за идею, есть что рассказать на эту тему) Главное время найти

  • @Fs-xj2gu

    @Fs-xj2gu

    2 жыл бұрын

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

  • @kvadro_id9697

    @kvadro_id9697

    2 жыл бұрын

    @@UlbiTV да-да! Расскажи кем и как работаешь. Как шёл к этому, какие ошибки совершил и что изменил бы...

  • @Fs-xj2gu

    @Fs-xj2gu

    2 жыл бұрын

    @@UlbiTV Сделай видео с ТОП ошибок как делают многие, но так делать нельзя, например неправильно используют useMemo или useCallback или кто то делает неправильные сборки, или для каких проектов что лучше подойдет по стеку где лучше использовать redux & thunk & mobx & redux saga & server side rendering & spa & в каких сервисах сайтах лучше использовать те или иные технологии итд Частые ошибки при создании компонентов, как правильно создавать компоненты. Топ архитектур, где когда использовать, feature sliced, атоморный дизайн, тупые умные компоненты, к примеру много раз встречал что неправильно использоовали архитектуру тупых и умных компонентов итд

  • @VolodymyrSirenko
    @VolodymyrSirenko2 жыл бұрын

    Ролик про профайлинг тоже нужен!

  • @wishmaker1443
    @wishmaker14432 жыл бұрын

    Наверное лучшее пояснение с примерами по useMemo и useCallback!

  • @user-pf7ht6th8x
    @user-pf7ht6th8x2 жыл бұрын

    Спасибо! Познавательно!

  • @user-sh7bb6hk6f
    @user-sh7bb6hk6f2 жыл бұрын

    Что сказать... Красавчеггг... Спасибо большое.

  • @glebpilipenka3060
    @glebpilipenka30602 жыл бұрын

    Топовый, больше видео по вкладкам perfomance & profiler, лучший!

  • @filippkotenko851
    @filippkotenko8512 жыл бұрын

    Спасибо тебе, на 24:33 ты сказал для функциональных 2 раза)

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    при монтаже бывают косяки :)

  • @user-eh1nj8el9l
    @user-eh1nj8el9l2 жыл бұрын

    Спасибо! Учусь по твоим видео параллельно ... спасибо!

  • @dushnilas
    @dushnilas2 жыл бұрын

    Спасибо

  • @VolodymyrSirenko
    @VolodymyrSirenko2 жыл бұрын

    Спасибо, я смотрю все ролики ! Хотя не до всего дорос по уровню. Спасибо!

  • @jsmonstr9638
    @jsmonstr96382 жыл бұрын

    Очень крутой ролик по оптимизации javascript react

  • @user-pd9no5ye5g
    @user-pd9no5ye5g2 жыл бұрын

    60к должно посмотреть точно) + залётные )

  • @mrstronciy1060
    @mrstronciy10602 жыл бұрын

    Всё по полочкам. Жирный лайк!

  • @nelson6783
    @nelson67832 жыл бұрын

    очень инетресно про профайлинг, ждем ждем ждем)

  • @nikolosnik2176
    @nikolosnik21762 жыл бұрын

    Спасибо большое!!!

  • @mikhailblush5261
    @mikhailblush52612 жыл бұрын

    Спассибо. Интересно посмотреть видео про профайлинг

  • @hutoryanin
    @hutoryanin2 жыл бұрын

    Здравствуй Тимур, благодарю за новое видео. Интересно. *Л. а. й. к. о. с.* за видос

  • @St3av3
    @St3av32 жыл бұрын

    Спасибо. Ещё раз укрепил в голове мысль о том, что ресурсы нужно экономить.

  • @uNkind33
    @uNkind332 жыл бұрын

    Батя как всегда сначала люкс, потом просмотр!

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Олды на месте))

  • @oleksandrlesiuk6239
    @oleksandrlesiuk62392 жыл бұрын

    Спасибо, полезно

  • @eldururthand9478
    @eldururthand94782 жыл бұрын

    Супер контент!

  • @orbismala8124
    @orbismala81242 жыл бұрын

    Большинство знал, но некоторая информация оказалась полезной. Спасибо.

  • @sergeynazarov2473
    @sergeynazarov24732 жыл бұрын

    Дебаунс и троттлинг, они же задержки перед экшеном, которые нарушают юзабилити, запросто заменяются другой техникой, на примере живого поиска: - Ставишь выполнение экшена с 2, а лучше 3 символа, что бы не грузить лишнего - Результат записываешь в массив - Все последующие запросы читаешь из записанного массива - Очищаешь массив, когда количество символов - Делаешь доп проверки на вставку в поле и прочие Теоретически, такая техника неэффективна, если прилетает пару миллионов результатов, но если это происходит, что-то не так с бэкомъ...

  • @SlavaTechnology
    @SlavaTechnology2 жыл бұрын

    Никогда не профайлил фронтенд, будет полезно посмотреть

  • @aleksandrgradov7859
    @aleksandrgradov78592 жыл бұрын

    Супер! Спасибо!

  • @DrGurgen
    @DrGurgen2 жыл бұрын

    Потресающая работа Тимур)

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Спасибо, Гурген!

  • @bahram1010
    @bahram10102 жыл бұрын

    Первый лайк😀, Спасибо!

  • @konstantinnaumov6281
    @konstantinnaumov62812 жыл бұрын

    Каждому видосу лайк нужно ставить автоматом. Никакой воды, только по делу. Спасибо за годный контент.

  • @tazer8635
    @tazer86352 жыл бұрын

    очень круто

  • @maxdis4084
    @maxdis40842 жыл бұрын

    Просто лучший! 11/10

  • @anton-vr5xw
    @anton-vr5xw2 жыл бұрын

    уже 60к, поздравляююю 👏👏👏

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Спасибо!! 🙏

  • @drobos7884
    @drobos78842 жыл бұрын

    Спасибо за видео)

  • @chillchill5254
    @chillchill52542 жыл бұрын

    По названию - очень интригующе. Ждем 1080рублей

  • @qutbiddinmakhmudov4088
    @qutbiddinmakhmudov40882 жыл бұрын

    Да профайлинг интересен!

  • @firedvata
    @firedvata2 жыл бұрын

    Просто топовый контент! Про webpack хотелось бы поподробнее изучить:)

  • @artiomborisov6838
    @artiomborisov68382 жыл бұрын

    Спасибо 5 (для активности)

  • @gtsjdm
    @gtsjdm2 жыл бұрын

    Наикрутейший контент для начинающих разработчиков на твоем канале, регулярно посматриваю... спасибо тебе и успехов)))

  • @nikolaiUlianov

    @nikolaiUlianov

    2 жыл бұрын

    Если бы только для начинающих)

  • @adelinaromanova8353
    @adelinaromanova83532 жыл бұрын

    Тимур, спасибо и лайк!💥

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Спасибо!

  • @artiomborisov6838
    @artiomborisov68382 жыл бұрын

    Спасибо 1 (для активности)

  • @user-dz8gp1ls9z
    @user-dz8gp1ls9z2 жыл бұрын

    Спасибо большое за такой крутой канал!

  • @olehmudriy9308
    @olehmudriy93082 жыл бұрын

    Как всегда топ!

  • @user-cb3sc8wk8i
    @user-cb3sc8wk8i2 жыл бұрын

    Очень полезное видео, спасибо! Комментарий в поддержку канала)

  • @artiomborisov6838
    @artiomborisov68382 жыл бұрын

    Спасибо 3 (для активности)

  • @artiomborisov6838
    @artiomborisov68382 жыл бұрын

    Спасибо 2 (для активности)

  • @helenit4365
    @helenit43652 жыл бұрын

    Большое спасибо, лайк и продвижения каналу!

  • @Ben-mt1sp
    @Ben-mt1sp2 жыл бұрын

    🔥❤️🤘🏻 спасибо

  • @artiomborisov6838
    @artiomborisov68382 жыл бұрын

    Спасибо 4 (для активности)

  • @olehy5000
    @olehy50002 жыл бұрын

    Спасибо очень полезно

  • @sergioglock2216
    @sergioglock22162 жыл бұрын

    Годнотой банчиш. Про изображения и шрифты не рассказал, никто теперь не узнает

  • @yourbadapple
    @yourbadapple2 жыл бұрын

    Узнал много терминов, практики, спасибо большое

  • @vitalyberyoza2189
    @vitalyberyoza21892 жыл бұрын

    Привет, очень нравятся твои видео и слежу за ними очень давно, спасибо)) хотел немного обратить твое внимание на такой момент, что ты часто используешь хук useCallback не совсем там, где нужно как кажется. Если говорить об оптимизации фронта, то тут как раз наоборот получается: useCallback оптимизирует рендер, если мемоизированный колбэк передается дочерним КОМПОНЕНТАМ в качестве пропса, так как позволяет не пересоздавать колбэк и тем самым не перерисовывать дочерний компонент путем обнаружения неравенства ссылок на колбэк, ТО ЕСТЬ: не перерисовывать дочерний компонент, пока пропс не поменялся (как мы знаем изменение пропсов и состояния тригерит перерендер компонента). У тебя же часто используется там, где никакой оптимизации не происходит: в компонентах, которые возвращают обычные елементы (не компоненты), где просто на каждый перерендер будет лишь дополнительно создан мемоизированный колбэк с массивом зависимостей, Поддержим лайком!! Я только за, чтобы добрыми намерениями улучшить скилы автора, так как они и так достаточно хороши, а качество подачи великолепное!!

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Привет! Спасибо) все хорошо, но ты забыл важную деталь, какую?

  • @Andrew_Code
    @Andrew_Code2 жыл бұрын

    Я в первый раз слышу о многих представленных в этом ролике понятиях, но всё понятно. Спасибо!

  • @sergeysamius1128
    @sergeysamius11282 жыл бұрын

    Спасибо! будем изучать

  • @sergeysamius1128

    @sergeysamius1128

    2 жыл бұрын

    А вообще не стоит ролик начинать с унылого: "Мало кто посмотрит", "мало кому нужно". Нужно - "Оптимизация - важная вещь!!!!111" (на определённом этапе разработки проекта)

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Успехов в изучении!

  • @tatyanaruskevich3290
    @tatyanaruskevich32902 жыл бұрын

    Спасибо за ваш труд

  • @woodDacha
    @woodDacha2 жыл бұрын

    Как всегда сразу лайк. Посмотрю вечером))

  • @romansmikhotur7850
    @romansmikhotur78502 жыл бұрын

    Спасибо👍

  • @user_aw32xdg22
    @user_aw32xdg222 жыл бұрын

    максимум информации за минимум времени.... спс

  • @MAKS-FISHER
    @MAKS-FISHER5 ай бұрын

    Ещё раз убеждаюсь, что твой контент просто лучший !!! Обязательно буду разрабатывать приложения сразу с твоими рекомендациями !!!!!!!

  • @tehbangel
    @tehbangel2 жыл бұрын

    Отлично, все толково и без воды.

  • @user-ic4dk4sp3y
    @user-ic4dk4sp3y2 жыл бұрын

    Круто , будет сложно так писать по началу й

  • @user-zr1dw9uj7g
    @user-zr1dw9uj7g2 жыл бұрын

    Большое спасибо за качественньій материал!

  • @apexnuts9785
    @apexnuts97852 жыл бұрын

    Отличный контент, теперь я знаю куда обращаться, если нужно будет оптимизировать приложение)

  • @perseveranse
    @perseveranse2 жыл бұрын

    Спасибо, что делишься такой ценной информацией. Сижу, жду ролик в 1080 xd

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Жду фидбек после просмотра в 1080)

  • @perseveranse

    @perseveranse

    2 жыл бұрын

    Лайк, подписка, колокольчик :D. А если серьезно - хорошо укомпонованный видос, все по порядку, темы интересные и главное - даешь краткую информацию, которую, при желании, можно догуглить. Я, отчасти благодаря тебе, на работу попал, и даже что-то знаю, с ростом знаний видосы твои стало смотреть интереснее.

  • @andreyphilippov
    @andreyphilippov2 жыл бұрын

    Даёшь профайлинг!!!!

  • @user-bp7jb5of5d
    @user-bp7jb5of5d2 жыл бұрын

    Контент как всегда - огонь!!! 🔥🔥🔥

  • @villishelpy5055
    @villishelpy50552 жыл бұрын

    Прекрасный ролик помогаю продвижению

  • @irohVlad
    @irohVlad Жыл бұрын

    Самый полезный ролик за последние месяцы. Ни одного из подходов не видел пока искал про оптимизацию, а тут столько всего полезного. Надо было раньше наткнуться. Больше спасибо.

  • @viktormanko1363
    @viktormanko13632 жыл бұрын

    Норм инфа, редкая

  • @michigan996
    @michigan9962 жыл бұрын

    Прекрасный ролик, я сам задумывался над этим вопросом. Некоторые примеры я уже знал и использовал, а некоторые было интересно узнать тут. Все доступно, наглядно и в одном месте. Спасибо!

  • @maximlazarsky7135
    @maximlazarsky71352 жыл бұрын

    Спасибо тебе. Все видео отличные, нет воды, всё по делу

  • @vintprox
    @vintprox2 жыл бұрын

    Полезно! Посоветую новичкам. Если библиотека из npm сделана под tree shaking, то размер бандла будет зависеть от количества по настоящему используемых функций, потому что импорт избирательный. Но, конечно, не всё, что мы хотим, будет под tree shaking.

  • @UlbiTV

    @UlbiTV

    2 жыл бұрын

    Угу, все верно)

  • @andreipalii1220

    @andreipalii1220

    Жыл бұрын

    А как узнать если библиотека сделана под Tree Shaking? Неужели лезть в исходники? Или в том числе этим разрабы либы её продвигают? Благодарю ;)

  • @lostsouls3151
    @lostsouls31512 жыл бұрын

    Лайк не глядя! Как всегда супер!)

  • @VictoriaSH100
    @VictoriaSH1002 жыл бұрын

    Интересно полный разбор профайлинга

  • @tetrada9642
    @tetrada96422 жыл бұрын

    Отличное видео! Все понятно и очень полезно. Спасибо!

  • @Werma2006
    @Werma20062 жыл бұрын

    Превосходно, спасибо!

  • @anazkomult
    @anazkomult2 жыл бұрын

    Спасибо, Тимур! Отлично, как всегда.

  • @leokorsunsky2395
    @leokorsunsky23952 жыл бұрын

    Спасибо за такой контент!

  • @ruslanshmadchenko2132
    @ruslanshmadchenko21322 жыл бұрын

    спасибо большое за качественный контент, очень рад новому выпуску))

Келесі