Сколько стоит JavaScript?!?!

[@it2138]

Хочу работать с тобой: foamy-stag-bb6.notion.site/ffde48fe34de4641a3c4d872433023c4?pvs=4 Тренажеры HTML Академии + Книга рецептов фронтендера + Академия + комьюнити за 99 рублей: boosty.to/how-to-learn-it Для оплаты с НЕ российских карт: foamy-stag-bb6.notion.site/Donate-bot-1550973e32a24d1da9a4ef15f80391ee Какие тренажеры бывают: htmlacademy.ru/courses#fe-start Мой телеграм: t.me/howToLearnIT ****************** 0:00 О чем видос? 0:40 Любим JavaScript, но не от всей души 02:24 Проблемы SSR 04:20 Основы производительности 05:33 Оптимизация для девайсов 07:54 Как работает JavaScript? 10:05 Метрики производительности 13:29 Оптимизация сети 15:47 Браузерная навигация 16:29 Практики EverGreen по сетевой производительности 17:34 Управляем приоритетами загрузки 18:39 Оптимизация загрузки и рендеринга 19:08 Code-splitting 21:15 Импорт по видимости 21:50 Оптимизируем статику (Картинки, шрифты, CSS, анимации) 24:53 Подписка фронтендера 25:59 Паттерны рендеринга (Прогрессивная гидрация, Островная архитектура, Server components, Streaming rendering) 30:10 Полезные советы ****************** Канал Эдди Османи www.youtube.com/@AddyOsmani Web Core Vitals web.dev/vitals/ Chrome UX Report developer.chrome.com/docs/crux/ Про Brotli habr.com/ru/companies/ruvds/articles/499278/ Lighthouse treemap googlechrome.github.io/lighthouse/treemap/ Про шрифтовую оптимизацию и content visibility kzbin.info/www/bejne/j3enfHZ3oNiNjdk Про Qwik.js kzbin.info/www/bejne/sKvQiqCPaJpod68 Про серверные компоненте kzbin.info/www/bejne/r3TComZuqreredk #js #css #react #frontend

[@siberiacancode]

Помню я говорил, что мы сделали цикл, что мы вернулись к старым подходом mpa, что это похоже на php. Мне сказали на это, что ты дурак и ничего не понял 🧐 Добро пожаловать в 2014 год 🥳 спасибо автору за видео

[@2difficult2do]

👍Классно сделано, видео длинно, а воды почти нет :-) тема полезная и актуальная

[@КириллПиринен]

Есть ещё одна самая главная метрика, про которую все забывают. Time to продукт / фича попадает на рынок и сколько она стоит в человеко $. Так вот она перевешивает все остальное. По этому js и все прочее существует вообще. Спасибо за видео, полезно было про разные сср подходы глянуть

[@VasiliyLazarev]

Это уже бизнесовые метрики, и их обычно называют "Time to Market" и (или) "Lead Time"

[@alexlmaxl4966]

Спасибо, полезно было посмотреть, теперь я хотя бы 1 кейс использования серверного компонента знаю)

[@SchnippSchnappShnappi]

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

[@Toookes]

Это просто охеренный видос. ДУмаю к нему ещё не раз вернусь. Как минимум для того чтобы ответвляться в изучении упомянутых патернов и технологий

[@Владимир.П-е9о]

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

[@krashherr599]

Привет, видео получилось супер интересным и полезным, спасибо!! Жду новых роликов!

[@alexandrstrekalovskiy4083]

Красавчик! Огромное Спасибо!

[@dinchedolfo1048]

Вау, столько полезной информации!

[@MrAndreyVasilev]

Лайк. Подписка. Спасибо за хорошее видео 👍

[@WinchesterD]

Видео прикольное, но думаю актуально для малой группы людей которые делаюточень большие веб приложения потребляющие много ресурсов. Я вот Джун Фронтендер, вообще не представляю что нужно сделать с сайтом чтобы он залагал на моём устройстве (сознательное вредительство типа бесконечного цикла не в счёт). Вот например, для анимаций принято использовать CSS свойство "translate", вместо left, right, top, bottom, иил ни дай бог margin. Оно то понятно в теории что translate выгоднее потому что его изменение не тригерит пересчёт геометрии всех остальных компонентов на странице, но когда я смотрю на приложение со стороны, вообще не видно разницы. Так и с телефонами, веб приложение скорее заглючит потому что телефон не тянет браузер потому что кончилась оперативная память, или ещё что-то, на что разработчик не может повлиять, нежели от того что ты страницу как-то не так оптимизировал.

[@hooked74]

Все зависит от длительности анимации и количества элементов на странице, подлежащих Reflow и Repaint'у. Если у тебя на странице будет порядка 3к элементов, из которых хотяб одна треть будет во вьюпорте, то выполнение Reflow и Repaint не будут укладываться в 1 фрейм они же ~16мс из-за чего ты будешь наблюдать задержки в своей анимации, а длительное исполнение анимации лишь усугубит данный процесс из-за чего будут наблюдаться пропуски фреймов. Так что в данном случае разница будет колоссальной.

[@aleksandrkim550]

Если накидывать либы не думая, не следить за импортами, закинуть сторонии скрипты и загружать 20мб картинку а сверху ты все компоненты сделаешь анимируемыми через width top то видео станет актуальным. Это конечно утрированный пример, но большие проекты начинаются с мвп где никто архитектуру не закладывает. Если за этим не следить то в какой то момент все таким говном и обрастает

[@WinchesterD]

@@hooked74 Это где ты такой сайт видел, с 3К элементов?

[@hooked74]

@@WinchesterD поработаешь подольше и не такое увидишь...

[@igorshcherbachenya4419]

@@aleksandrkim550 жиза) довелось повидать много фронтовых прилаг изнутри от мало до великих и так же могу однозначно сказать - как только на собесе начинают сильно продавливать вопросы производительности, жди огромную кучу быдло-решений ради "запустим проект, а потом всё исправим". В 99% из 100% эти решения лежат и размножаются в коде, пока т.н. "лиды" (прости господи) с умным видом пропихивают на собесах вопросы производительности фронта. Разрабатывали один финтех с просто громадными формами (анимашки, сложные слайдеры, перестройка страницы - прилагалась), разрабатывали большой портал с WebGL (почти весь контент на графике) и вот ей-богу - ни разу не столкнулись с какими-то траблами перформанса на десктопах и мобилках (IE не в счёт, тот клей с рождения ложками захлёбывает).

[@ВиталийФилипенко-ш3в]

Дада в видосе - респект :)

[@cijic]

Очень хорошее видео. Молодец.

[@vsezold]

$psb-font-path)) Привет из ПСБ, коллега!

[@max_mgtow]

Приветствую Друг 🤝🔥

[@dropers7551]

Давай про Astro Очень интересный фреймворк

[@olezhonnv3215]

Булька)))

[@romanz7400]

Огонь

[@ivanivanov9579]

14:25 некорректный подсчет времени загрузки приложения. Скорость интернета указывается в Мбит/с, а не Мб/с, те время загрузки представленное в видео нужно смело умножать на 8

[@maksway5676]

Добавить бы в название ролика "Оптимизация". А то не совсем понятно до просмотра, о чем видео. Так думаю больше будет просмотров.

[@baksonyan4ik]

what the, он снова сделал huge видео которое я буду рекомендовать всем программистам

[@s.o.v.a9837]

Мощно

[@Xelson1337]

9:35 а как же treeshaking?

[@daniil2704]

Это все конечно классно, но хотелось бы ещё видоса практического, хз. А то теория конечно хорошо, но вот у меня есть скажем Vite, и на него кричи, не кричи, а как его заставить делать бандлы мелкие по частям и т.п., не понятно.

[@alexsmirnov5862]

А что документация Vite по этому поводу говорит?

[@noneex451]

Harold Finch, admin

[@prosto1076]

Так вот из-за кого я после загрузки главной страницы KZbin в течении 30 секунд не могу добавить интересные мне видео в Watch Later

[@fedordostoevskiy4209]

Даже средние приложухи нормально работают у всех, а кто большие пишет, KZbin не смотрит. И на django, и на php нормально работает, и какие вычисления огромные кто делает???Видео очень классное!

[@scriptboris]

Почему отказались от рендеринга на клиенте?

[@so1yanka]

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

[@Black1991Star]

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

[@Владимир.П-е9о]

По моему опыту, в больших проектах улучшение перфа всегда дает плюс к деньгам, особенно в долгосрок. Много раз проводили АБ тесты, быстрая загрузка помогает пользователю оставаться вовлеченным.

[@nickythecasper4314]

Сейчас толстые клиенты на реактивных и псевдореактивных низкоуровневых библиотеках типа vue или svelte - лучшее решение для проектирования интерфейса. А неиспользуемый код - это плохая привычка лидов нагромождать плагины на всякую мелочь, жирные киты , кастомящиеся композиционно - это от лукавого. Понимайте нативные процессы, кэшируйте, учитесь писать чистый код, господа.

[@derus1559]

ждем прорыва в области процессоров, чтобы снова все повторить

[@Svetoz]

Загрузка одного динамического шрифта может стоить как десять статичных - ну так себе оптимизация.

[@FailValiev]

а я жду развития webGL

[@karlmarx3843]

Разве он отстаёт?

[@SanchReload]

​@@karlmarx3843сейчас webgpu приоритет, на webgl болт положили

[@FailValiev]

@@karlmarx3843 нет, но производительность не очень

[@giovannicube764]

Где ты был года 3 назад молодой человек😅😅😅

[@Nikitosss91]

javascript is 300$

[@bassboosted1184]

Сам по себе js это кусок нелогического дерьма. Хотите убивайте меня за это, хотите нет. Это язык, который тащит годами все нужное и ненужное. А все почему? Потому, что нам нужна слвместимость со старьем. Что, IE8 до сих пор поддерживаем или как? Ну если вы так любите js, то почему дл сих пор передаете его по сети ввиде текста? Незадумывались передавать байт код и экономить кучу ресурсов и времени на парсинг текста? Я не знаю, что должно произойти, что бы в вебе произошла революция и чтото изменилось.

[@phat80]

Все уже придумано - PWA. Один раз загрузил и используй. Но тема не особо развивается. Ну или свое нативное приложение. Это как раз много кто делает. Я просто устанавливаю приложения тех сервисов, которыми пользуюсь постоянно и нет проблем. Мало есть людей, которые прямо каждый день различные тяжелые сайты пачками посещают. Обычно это очень ограниченный список.

[@mikestr1782]

Когда не JavaScript?

[@piscopancer]

Да! Давайте уже typescript

[@Teardrop-u4z]

Когда будет что то новое место браузеров

[@IgorNovakus]

Зачем лоиентироваться на человека у которого телефон за 30 долларов. Он просто не платежеспособен,он вообще не целевпя аудитории

[@motopers]

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

[@__robert__paulson__]

Запиши ответку, в чем проблема?

[@motopers]

@@__robert__paulson__ тратить время на дрочь с обс и всей хуйней когда лето совсем не хочется, а так в лёгкую

[@ИванДунин-т7и]

Щас бы думать о нигерийских мошенниках 🤣🤣🤣

[@kkkamchatsky]

А вот зря ты смеялся 😃

[@Leoboy400]

Ну надристал, ну молодец

[@ilyagamepub]

ну сейчас чекнем чего ты тут пронализировал дядя

[@Sanya_Nub_voin]

А кто-то еще пить хочет в веб засунуть... Земля стекловатой этим оптимизаторам!