БЫСТРЫЙ 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
На русскоязычном ютубе нет таких как ты... Очень много уроков смотрел на разных каналах, но такого качественного контента как у тебя ни у кого не встречал
@UlbiTV
2 жыл бұрын
Спасибо друг:)
@rustam_gasymov
2 жыл бұрын
@@UlbiTV блин серьезно дружище, ты крут, я учусь и сейчас ищу себе ментора, если будет интересно маякни плз, может обсудим) спасибо тебе за контент
@miklayen_yakim
Жыл бұрын
Да... Согласен
@railbatyrshin377
9 ай бұрын
Есть ещё Sorax. И автор данного канала они самые лучшие в русскоязычном Ютубе
даю знать: нам надо ролики про оптимизацию и дев тулзы! спасибо контент супер!!
Сделай видео с примером о структурности сложного многостраничного сайта!))
@lopsonbalzhinimaev642
2 жыл бұрын
feature slice архитектура
@moi-nick-zanyat
2 жыл бұрын
@@lopsonbalzhinimaev642 хотелось бы увидеть на примере с комментариями
@lopsonbalzhinimaev642
2 жыл бұрын
@@moi-nick-zanyat у этой архитектуры неплохая документация, почитай, там есть примеры
@user-ur4ev7vl6c
2 жыл бұрын
MPA?
@user-rz1hy7xg7o
2 жыл бұрын
@@lopsonbalzhinimaev642 ох не знаю, 2 недельки поучил, поюзал, что-то вообще не зашло. Слишком сложная структура, которая отнимает кучу времени + ещё сыроватая. А главный минус, мало кто её использует. Лучше её не учить. Если в конторе на этом все пишут, то и новичка научат)
На одном дыхании… Не вылетает тема с webpack. В частности заинтересовала тема - с подгрузкой, лениво, npm модулей - разделение кода для десктопа и мобильных Очень надеюсь, что будет время записать более подробное видео
На 24:30 оговорка про функциональные и классовые компоненты. Пишу в тетрадь сразу, поэтому заметил :) Спасибо за афигенный контент!
@UlbiTV
2 жыл бұрын
за конспект отдельный респект! И за внимательность тоже))
Я начинающий разработчик и меня давно беспокоила тема оптимизации. У вас всё классно описано, спасибо большое!)
Лучший канал в русскоязычном сегменте!! сделай видео: маленький пет проект с новыми хуками + распрастраненными кастомными и тсом или про микрофронтенды
Словил себя на мысли, что уже несколько месяцев на тему разработки смотрю только Ulbi TV ) Что касается этого ролика - просто ОБЯЗАТЕЛЬНО к просмотру всем начинающим кодерам, да и продолжающим не помешает. У меня всегда подгорает, когда коллеги тащат в элементарный лендос кучу лишних библиотек, ленясь вместо этого написать 30-50 строк чистого js. А вы задумывались, сколько такого треш-кода движется в мировом интернете? Сколько тупого ненужного трафика? А это же всё, в конечном счёте, энергозатраты. Поэтому автору огромный респект за то, что затронул эту важную тему. Я считаю, что это нужно изучать сразу, перед html и css )
@UlbiTV
2 жыл бұрын
Спасибо за такое доверие и поддержку! Ценю!
Привет! Из обычного верстальщика по-тихому внедряюсь во фронтенд тусовку, твой канал - находка, насчет профайлинга: часто использую, но видос все равно хотелось бы! Спасибо за старания
@UlbiTV
2 жыл бұрын
Успехов!
Комментарий в качестве поддержки
Наконец добил этот плейлист. Поражает как элегантно ты смог все структурировать и преподнести, сначала мы учим базу, потом учимся складывать два числа, потом учимся умножать, ... , а потом учимся использовать все изученное ранее для решения сложных задач. Ты прекрасный учитель и помог огромному количеству людей, спасибо тебе!
@UlbiTV
Жыл бұрын
🤝🙏 спасибо!
@UlbiTV
Жыл бұрын
🤝🙏 спасибо!
Тимур очень важно именно от вас видео по дэбагу! Как понимать ошибки которые вываливаются в консоль, к чему они относятся и как ничего не перепутать. Это как раз то, что очень поможет новичкам в будущем не наступать на одни и те же грабли.
@johndoe034
2 жыл бұрын
100% было бы полезно, особенно в дев тулзах хрома. Тема актуальна не только для новичков, на проекте и мидлы и синьоры дебажили только консоль.логами
Более 2-х лет прошло с момента записи видео, а оно ещё актуально! Спасибо за качественный материал!
Жду выпуск про девтулз для отслеживания загрузки и прочего)
спасибо тебе огромное! вроде бы про всё слышал и пробывал, но не понимал нахрен оно надо, а ты за пол часа все обьяснил) гений)
@UlbiTV
2 жыл бұрын
И тебе спасибо за поддержку!)
Плюс за разбор профайлинга
Крутое видео! Про профайлинг было бы очень неплохо)
@user-gj4mn3rg4l
2 жыл бұрын
Профайлинг гоу! Могу дать реальный проэкт чтоб ты посмотрел по профайлеру
Досмотрел до конца. Пишу комментарий поддержки). Написать себе конспект по видео и правда будет не лишним, очень много информации.
Лайк, не глядя
Да уж реально полезно. После тестирования своих проектов понимаешь что нужно ещё пару месяцев к году чтобы весь мой хлам поставить на правильные рельсы:))) очень полезно, но времени нет... что делать?
Отличное видео. Пишите еще видео) Ясно Понятно
Огромное спасибо! Буду возвращаться к этому ролику по мере моего развития в профессии )
@UlbiTV
2 жыл бұрын
Успехов в развитии)
Очень круто, спасибо! Было бы круто еще увидеть курс по безопасности. Многим было бы полезно т.к очень важная тема (XSS, CSRF, ...)
@TheBorninmotion
2 жыл бұрын
поддерживаю !
@UlbiTV
2 жыл бұрын
Спасибо за идею, есть что рассказать на эту тему) Главное время найти
@Fs-xj2gu
2 жыл бұрын
@@UlbiTV можешь еще рассказать про себя, про свой опыт итд, можешь скинуть свой инстаграм
@kvadro_id9697
2 жыл бұрын
@@UlbiTV да-да! Расскажи кем и как работаешь. Как шёл к этому, какие ошибки совершил и что изменил бы...
@Fs-xj2gu
2 жыл бұрын
@@UlbiTV Сделай видео с ТОП ошибок как делают многие, но так делать нельзя, например неправильно используют useMemo или useCallback или кто то делает неправильные сборки, или для каких проектов что лучше подойдет по стеку где лучше использовать redux & thunk & mobx & redux saga & server side rendering & spa & в каких сервисах сайтах лучше использовать те или иные технологии итд Частые ошибки при создании компонентов, как правильно создавать компоненты. Топ архитектур, где когда использовать, feature sliced, атоморный дизайн, тупые умные компоненты, к примеру много раз встречал что неправильно использоовали архитектуру тупых и умных компонентов итд
Ролик про профайлинг тоже нужен!
Наверное лучшее пояснение с примерами по useMemo и useCallback!
Спасибо! Познавательно!
Что сказать... Красавчеггг... Спасибо большое.
Топовый, больше видео по вкладкам perfomance & profiler, лучший!
Спасибо тебе, на 24:33 ты сказал для функциональных 2 раза)
@UlbiTV
2 жыл бұрын
при монтаже бывают косяки :)
Спасибо! Учусь по твоим видео параллельно ... спасибо!
Спасибо
Спасибо, я смотрю все ролики ! Хотя не до всего дорос по уровню. Спасибо!
Очень крутой ролик по оптимизации javascript react
60к должно посмотреть точно) + залётные )
Всё по полочкам. Жирный лайк!
очень инетресно про профайлинг, ждем ждем ждем)
Спасибо большое!!!
Спассибо. Интересно посмотреть видео про профайлинг
Здравствуй Тимур, благодарю за новое видео. Интересно. *Л. а. й. к. о. с.* за видос
Спасибо. Ещё раз укрепил в голове мысль о том, что ресурсы нужно экономить.
Батя как всегда сначала люкс, потом просмотр!
@UlbiTV
2 жыл бұрын
Олды на месте))
Спасибо, полезно
Супер контент!
Большинство знал, но некоторая информация оказалась полезной. Спасибо.
Дебаунс и троттлинг, они же задержки перед экшеном, которые нарушают юзабилити, запросто заменяются другой техникой, на примере живого поиска: - Ставишь выполнение экшена с 2, а лучше 3 символа, что бы не грузить лишнего - Результат записываешь в массив - Все последующие запросы читаешь из записанного массива - Очищаешь массив, когда количество символов - Делаешь доп проверки на вставку в поле и прочие Теоретически, такая техника неэффективна, если прилетает пару миллионов результатов, но если это происходит, что-то не так с бэкомъ...
Никогда не профайлил фронтенд, будет полезно посмотреть
Супер! Спасибо!
Потресающая работа Тимур)
@UlbiTV
2 жыл бұрын
Спасибо, Гурген!
Первый лайк😀, Спасибо!
Каждому видосу лайк нужно ставить автоматом. Никакой воды, только по делу. Спасибо за годный контент.
очень круто
Просто лучший! 11/10
уже 60к, поздравляююю 👏👏👏
@UlbiTV
2 жыл бұрын
Спасибо!! 🙏
Спасибо за видео)
По названию - очень интригующе. Ждем 1080рублей
Да профайлинг интересен!
Просто топовый контент! Про webpack хотелось бы поподробнее изучить:)
Спасибо 5 (для активности)
Наикрутейший контент для начинающих разработчиков на твоем канале, регулярно посматриваю... спасибо тебе и успехов)))
@nikolaiUlianov
2 жыл бұрын
Если бы только для начинающих)
Тимур, спасибо и лайк!💥
@UlbiTV
2 жыл бұрын
Спасибо!
Спасибо 1 (для активности)
Спасибо большое за такой крутой канал!
Как всегда топ!
Очень полезное видео, спасибо! Комментарий в поддержку канала)
Спасибо 3 (для активности)
Спасибо 2 (для активности)
Большое спасибо, лайк и продвижения каналу!
🔥❤️🤘🏻 спасибо
Спасибо 4 (для активности)
Спасибо очень полезно
Годнотой банчиш. Про изображения и шрифты не рассказал, никто теперь не узнает
Узнал много терминов, практики, спасибо большое
Привет, очень нравятся твои видео и слежу за ними очень давно, спасибо)) хотел немного обратить твое внимание на такой момент, что ты часто используешь хук useCallback не совсем там, где нужно как кажется. Если говорить об оптимизации фронта, то тут как раз наоборот получается: useCallback оптимизирует рендер, если мемоизированный колбэк передается дочерним КОМПОНЕНТАМ в качестве пропса, так как позволяет не пересоздавать колбэк и тем самым не перерисовывать дочерний компонент путем обнаружения неравенства ссылок на колбэк, ТО ЕСТЬ: не перерисовывать дочерний компонент, пока пропс не поменялся (как мы знаем изменение пропсов и состояния тригерит перерендер компонента). У тебя же часто используется там, где никакой оптимизации не происходит: в компонентах, которые возвращают обычные елементы (не компоненты), где просто на каждый перерендер будет лишь дополнительно создан мемоизированный колбэк с массивом зависимостей, Поддержим лайком!! Я только за, чтобы добрыми намерениями улучшить скилы автора, так как они и так достаточно хороши, а качество подачи великолепное!!
@UlbiTV
2 жыл бұрын
Привет! Спасибо) все хорошо, но ты забыл важную деталь, какую?
Я в первый раз слышу о многих представленных в этом ролике понятиях, но всё понятно. Спасибо!
Спасибо! будем изучать
@sergeysamius1128
2 жыл бұрын
А вообще не стоит ролик начинать с унылого: "Мало кто посмотрит", "мало кому нужно". Нужно - "Оптимизация - важная вещь!!!!111" (на определённом этапе разработки проекта)
@UlbiTV
2 жыл бұрын
Успехов в изучении!
Спасибо за ваш труд
Как всегда сразу лайк. Посмотрю вечером))
Спасибо👍
максимум информации за минимум времени.... спс
Ещё раз убеждаюсь, что твой контент просто лучший !!! Обязательно буду разрабатывать приложения сразу с твоими рекомендациями !!!!!!!
Отлично, все толково и без воды.
Круто , будет сложно так писать по началу й
Большое спасибо за качественньій материал!
Отличный контент, теперь я знаю куда обращаться, если нужно будет оптимизировать приложение)
Спасибо, что делишься такой ценной информацией. Сижу, жду ролик в 1080 xd
@UlbiTV
2 жыл бұрын
Жду фидбек после просмотра в 1080)
@perseveranse
2 жыл бұрын
Лайк, подписка, колокольчик :D. А если серьезно - хорошо укомпонованный видос, все по порядку, темы интересные и главное - даешь краткую информацию, которую, при желании, можно догуглить. Я, отчасти благодаря тебе, на работу попал, и даже что-то знаю, с ростом знаний видосы твои стало смотреть интереснее.
Даёшь профайлинг!!!!
Контент как всегда - огонь!!! 🔥🔥🔥
Прекрасный ролик помогаю продвижению
Самый полезный ролик за последние месяцы. Ни одного из подходов не видел пока искал про оптимизацию, а тут столько всего полезного. Надо было раньше наткнуться. Больше спасибо.
Норм инфа, редкая
Прекрасный ролик, я сам задумывался над этим вопросом. Некоторые примеры я уже знал и использовал, а некоторые было интересно узнать тут. Все доступно, наглядно и в одном месте. Спасибо!
Спасибо тебе. Все видео отличные, нет воды, всё по делу
Полезно! Посоветую новичкам. Если библиотека из npm сделана под tree shaking, то размер бандла будет зависеть от количества по настоящему используемых функций, потому что импорт избирательный. Но, конечно, не всё, что мы хотим, будет под tree shaking.
@UlbiTV
2 жыл бұрын
Угу, все верно)
@andreipalii1220
Жыл бұрын
А как узнать если библиотека сделана под Tree Shaking? Неужели лезть в исходники? Или в том числе этим разрабы либы её продвигают? Благодарю ;)
Лайк не глядя! Как всегда супер!)
Интересно полный разбор профайлинга
Отличное видео! Все понятно и очень полезно. Спасибо!
Превосходно, спасибо!
Спасибо, Тимур! Отлично, как всегда.
Спасибо за такой контент!
спасибо большое за качественный контент, очень рад новому выпуску))