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

Поделиться
HTML-код
  • Опубликовано: 20 сен 2024

Комментарии • 475

  • @qutbiddinmakhmudov4088
    @qutbiddinmakhmudov4088 2 года назад +4

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

  • @gevorgmovsisyan5153
    @gevorgmovsisyan5153 2 года назад +174

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

    • @UlbiTV
      @UlbiTV  2 года назад +12

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

    • @rustam_gasymov
      @rustam_gasymov 2 года назад +1

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

    • @miklayen_yakim
      @miklayen_yakim 2 года назад

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

    • @railbatyrshin377
      @railbatyrshin377 Год назад

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

    • @maxexc6939
      @maxexc6939 Месяц назад

      Да, автор молодец! Спасибо 🙂

  • @sergioglock2216
    @sergioglock2216 2 года назад +3

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

  • @moi-nick-zanyat
    @moi-nick-zanyat 2 года назад +192

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

    • @lopsonbalzhinimaev642
      @lopsonbalzhinimaev642 2 года назад +14

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

    • @moi-nick-zanyat
      @moi-nick-zanyat 2 года назад +8

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

    • @lopsonbalzhinimaev642
      @lopsonbalzhinimaev642 2 года назад +4

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

    • @белка-у8б
      @белка-у8б 2 года назад +3

      MPA?

    • @СергейВер-и9ю
      @СергейВер-и9ю 2 года назад +1

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

  • @aya4924
    @aya4924 2 года назад +7

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

    • @UlbiTV
      @UlbiTV  2 года назад +3

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

  • @BondStreetRed
    @BondStreetRed 2 года назад +44

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

  • @АлександрКорнетов-э3я

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

  • @marynakosiv3750
    @marynakosiv3750 2 года назад +10

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

  • @andreyphilippov
    @andreyphilippov 2 года назад +3

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

  • @vadymkononenko685
    @vadymkononenko685 2 года назад +5

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

  • @wishmaker1443
    @wishmaker1443 2 года назад +4

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

  • @TheZionjke
    @TheZionjke 2 года назад +6

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

    • @UlbiTV
      @UlbiTV  2 года назад +3

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

  • @platonyasev1913
    @platonyasev1913 2 года назад +45

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

    • @СергейБрыков-х8и
      @СергейБрыков-х8и 2 года назад

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

  • @AirdropLuck
    @AirdropLuck 2 года назад +27

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

    • @UlbiTV
      @UlbiTV  2 года назад +5

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

  • @andreiribac6284
    @andreiribac6284 2 года назад +9

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

    • @UlbiTV
      @UlbiTV  2 года назад +2

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

  • @vadikot
    @vadikot Год назад +13

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

    • @UlbiTV
      @UlbiTV  Год назад +1

      🤝🙏 спасибо!

    • @UlbiTV
      @UlbiTV  Год назад

      🤝🙏 спасибо!

  • @alexsuhobski5231
    @alexsuhobski5231 2 года назад +4

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

  • @anton-vr5xw
    @anton-vr5xw 2 года назад +4

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

    • @UlbiTV
      @UlbiTV  2 года назад +2

      Спасибо!! 🙏

  • @DrGurgen
    @DrGurgen 2 года назад +5

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

    • @UlbiTV
      @UlbiTV  2 года назад +2

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

  • @Vinits-i
    @Vinits-i 4 дня назад

    Это просто шикардос!! Наконец-то я разобралась, как чинить перерисовки, помимо прочего

  • @VolodymyrSirenko
    @VolodymyrSirenko 2 года назад +6

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

  • @leokorsunsky2395
    @leokorsunsky2395 2 года назад +3

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

  • @St3av3
    @St3av3 2 года назад +5

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

  • @romansamon9215
    @romansamon9215 2 года назад +6

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

    • @UlbiTV
      @UlbiTV  2 года назад +3

      Успехов!

  • @nelson6783
    @nelson6783 2 года назад +7

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

  • @uNkind33
    @uNkind33 2 года назад +8

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

    • @UlbiTV
      @UlbiTV  2 года назад +2

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

  • @konstantinnaumov6281
    @konstantinnaumov6281 2 года назад +24

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

  • @glebpilipenka3060
    @glebpilipenka3060 2 года назад +4

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

  • @hutoryanin
    @hutoryanin 2 года назад +4

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

  • @pipkin931
    @pipkin931 2 года назад +3

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

  • @orbismala8124
    @orbismala8124 2 года назад +4

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

  • @vinderornitier
    @vinderornitier 2 года назад +32

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

    • @johndoe034
      @johndoe034 2 года назад +4

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

  • @ВладиславАлексеев-г7с
    @ВладиславАлексеев-г7с 2 года назад +151

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

    • @TheBorninmotion
      @TheBorninmotion 2 года назад +5

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

    • @UlbiTV
      @UlbiTV  2 года назад +36

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

    • @Fs-xj2gu
      @Fs-xj2gu 2 года назад +1

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

    • @kvadro_id
      @kvadro_id 2 года назад

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

    • @Fs-xj2gu
      @Fs-xj2gu 2 года назад +6

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

  • @mikhailblush5261
    @mikhailblush5261 2 года назад +4

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

  • @mikhailstepanishchev283
    @mikhailstepanishchev283 2 года назад +3

    Очень интересно,спасибо за видео!

  • @gtsjdm
    @gtsjdm 2 года назад +6

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

    • @nikolaiUlianov
      @nikolaiUlianov 2 года назад

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

  • @helenit4365
    @helenit4365 2 года назад +7

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

  • @efimkapliy6370
    @efimkapliy6370 6 месяцев назад +1

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

  • @АлександрКулик-м7я
    @АлександрКулик-м7я 2 года назад +6

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

  • @jsmonstr9638
    @jsmonstr9638 2 года назад +4

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

  • @ПопівчакБогдан
    @ПопівчакБогдан 2 года назад +2

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

  • @bulbaway
    @bulbaway 2 года назад +2

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

  • @ВалентинРубин
    @ВалентинРубин 2 года назад +2

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

  • @user_aw32xdg22
    @user_aw32xdg22 2 года назад +2

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

  • @mrstronciy1060
    @mrstronciy1060 2 года назад +5

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

  • @woodDacha
    @woodDacha 2 года назад +5

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

  • @rinat_kam
    @rinat_kam 2 года назад +12

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

  • @user-pc9bl7uf1l
    @user-pc9bl7uf1l 2 года назад +5

    огонь!

  • @АннаПотреба-я2щ
    @АннаПотреба-я2щ 2 года назад +6

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

  • @maximlazarsky7135
    @maximlazarsky7135 2 года назад +3

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

  • @MAKS-FISHER
    @MAKS-FISHER 9 месяцев назад

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

  • @tatyanaruskevich3290
    @tatyanaruskevich3290 2 года назад +6

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

  • @nelson6783
    @nelson6783 2 года назад +5

    просто агонь)

  • @ruslanshmadchenko2132
    @ruslanshmadchenko2132 2 года назад +4

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

  • @michigan996
    @michigan996 2 года назад +6

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

  • @bahram1010
    @bahram1010 2 года назад +6

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

  • @АлексейСтепанов-к9о
    @АлексейСтепанов-к9о 2 года назад +5

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

  • @tehbangel
    @tehbangel 2 года назад +5

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

  • @xela_8746
    @xela_8746 2 года назад +5

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

  • @artiomborisov6838
    @artiomborisov6838 2 года назад +4

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

  • @yourbadapple
    @yourbadapple 2 года назад +2

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

  • @adelinaromanova8353
    @adelinaromanova8353 2 года назад +7

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

    • @UlbiTV
      @UlbiTV  2 года назад +1

      Спасибо!

  • @Сергей-г8г6с
    @Сергей-г8г6с 2 года назад +4

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

  • @ИванШевченко-й5р
    @ИванШевченко-й5р 2 года назад +5

    У тебя все ролики ценные! Спасибо за шикарный контент!

  • @lostsouls3151
    @lostsouls3151 2 года назад +6

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

  • @filippkotenko851
    @filippkotenko851 2 года назад +5

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

    • @UlbiTV
      @UlbiTV  2 года назад +3

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

  • @villishelpy5055
    @villishelpy5055 2 года назад +2

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

  • @ZTtaHk
    @ZTtaHk 2 года назад +5

    Термоядерная концентрация годноты!
    Браво!

  • @МаринаБовкунович-л1щ
    @МаринаБовкунович-л1щ 2 года назад +2

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

  • @MDanshin
    @MDanshin 2 года назад +9

    Полный разбор профайлинга очень интересно.

  • @VolodymyrSirenko
    @VolodymyrSirenko 2 года назад +7

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

  • @user-pd9no5ye5g
    @user-pd9no5ye5g 2 года назад +4

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

  • @nikolosnik2176
    @nikolosnik2176 2 года назад +4

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

  • @aleksandrgradov7859
    @aleksandrgradov7859 2 года назад +3

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

  • @eldururthand9478
    @eldururthand9478 2 года назад +4

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

  • @drobos7884
    @drobos7884 2 года назад +5

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

  • @anazkomult
    @anazkomult 2 года назад +6

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

  • @WalterWhite-ck5rz
    @WalterWhite-ck5rz 2 года назад +4

    Огонь просто 👍
    Много полезного, что реально пригодится в работе.

  • @perseveranse
    @perseveranse 2 года назад +8

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

    • @UlbiTV
      @UlbiTV  2 года назад +2

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

    • @perseveranse
      @perseveranse 2 года назад +1

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

  • @apexnuts9785
    @apexnuts9785 2 года назад +6

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

  • @Werma2006
    @Werma2006 2 года назад +6

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

  • @sergeysamius1128
    @sergeysamius1128 2 года назад +5

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

    • @sergeysamius1128
      @sergeysamius1128 2 года назад +1

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

    • @UlbiTV
      @UlbiTV  2 года назад +2

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

  • @irohVlad
    @irohVlad Год назад +1

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

  • @oleksandrlesiuk6239
    @oleksandrlesiuk6239 2 года назад +5

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

  • @frednoby8531
    @frednoby8531 Месяц назад

    Просто шикарно! Спасибо тебе за труд, Тимур.

  • @londonsky1835
    @londonsky1835 2 года назад +6

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

  • @Санскритдляпреданных

    Как всегда лайк не глядя! Спасибо за годный контент!

  • @artiomborisov6838
    @artiomborisov6838 2 года назад +4

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

  • @lazizbeksultonov6416
    @lazizbeksultonov6416 2 года назад +4

    Просто ТОП bro!

  • @maxdis4084
    @maxdis4084 2 года назад +4

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

  • @artiomborisov6838
    @artiomborisov6838 2 года назад +4

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

  • @EmberInHeart
    @EmberInHeart 2 года назад +4

    Привет , как на счёт идеи рубрики - делать ревью каких то проектов подписчиков на гитхабе. Как пример у меня есть проекты которые я старался делать по бест практикам но все же хотелось услышать мнение профи по ним. Где можно сделать болеее эффективнее или какие-то моменты были не правильны.

  • @olehmudriy9308
    @olehmudriy9308 2 года назад +4

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

  • @vitalyberyoza2189
    @vitalyberyoza2189 2 года назад +3

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

    • @UlbiTV
      @UlbiTV  2 года назад +1

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

  • @katdim_art_studio
    @katdim_art_studio 2 года назад +2

    Тимур, спасибо, что ты у нас есть! Советы драгоценны!

  • @romanbolshiyanov
    @romanbolshiyanov 2 года назад +3

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

  • @sergeynazarov2473
    @sergeynazarov2473 2 года назад +2

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

  • @nikitatundra5633
    @nikitatundra5633 2 года назад +3

    ПРОСТО БОМБА !!!! Это правда очень ценная штука!!

  • @alextuzov904
    @alextuzov904 2 года назад +5

    Спасибо! Очень познавательно и интересно!

  • @chillchill5254
    @chillchill5254 2 года назад +5

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