Поддержи видео лайком, 1000 лайков 👍 и я начну собирать новые 10 ошибок! Скачать 🖥 красивый PDF - htmllessons.link/DJ5IQeV Наберем в телеге 8500 подписчиков и я выложу файл туда бесплатно! 00:00 Вступление 00:40 Ошибка 1: Почему нельзя оставлять логику в компонентах? 02:50 Ошибка 2: Используйте константы правильно! 04:38 Ошибка 3: Конфиги - залог стабильности 07:54 Ошибка 4: Оптимизируем модули по максимуму 09:35 Ошибка 5: Динамические импорты как они есть! 13:55 Ошибка 6: Ленивая загрузка на полную мощность 15:30 Ошибка 7: Почему devDependencies? 17:09 Ошибка 8: SSR или ISR? Большая разница 20:34 Ошибка 9: tailwind-merge для чистоты кода 21:37 Ошибка 10: Загрузка данных только когда нужно! 23:31 Заключение
Круто. Очень полезно. Опытные разрабы смогут использовать все эти фишки, но для новичков, возможно, надо было бы больше примеров показать. Спасибо. Монтаж тоже заходит
Давай видео, где в одном проекте юзаем все эти фишки. Часа на 4. Будет легендарно. Можно будет добавить просмотр перфоманса, до и после внедрения фишек.
По второму примеру: а если я в названии поля енама описку сделаю?) какая разница в чем делать описку: в иvени поля енама или строке , на равенство которой проверяем status?
Ты исправишь в случае чего только в одном месте. Это концепция единственного источника правды. В других частях где ты используешь enum не сможешь допустим ошибку. Тебе ide подскажет. Главное быть внимательным в одном месте.
7:54 Разве имеет какое-то значение сколько строк кода в проекте? Если другой код не используется, то каким образом он может влиять на производительность? Компилятор вообще разве не выкидывает лишний код для оптимизации?
Странный вопрос. Первое о чем нужно думать это о читаемости и скорости вовлечения в код. Чем больше строк кода в файле, тем сложнее в нем навигироваться.
Было бы отлично, если был бы реальный тест производительности, чтобы наглядно было видно разницу Условно, я, действительно, понимаю, что код будет работать быстрее, но на сколько - это тоже важно Если у меня уже есть проект, и он грузится, например, 10сек, есть ли мне смысл подтягивать всю команду смотреть твой видос, чтобы они поняли, что нужно переделать все компоненты с использованием dynamic импортов, потому что выйграем в производительности 10мс? Само видео кайф, харош
Значит вам пока не требуется. Я к этому пришел, потому что у нас функционально большой проект и я начал чувствовать просадки в производительности. Поэтому искал все пути оптимизации. У вас должна быть острая необходимость, потому что просто так оптимизация денег бизнесу не принесет
@@REDGroup этих слов "У вас должна быть острая необходимость" в видосе не хватает столько раз, сколько было сказано "подгружайте тогда, когда надо" Есть большой проект, есть желание писать чистый код, но нет необходимости в подобной оптимизации и неизвестен выхлоп. Тут ещё момент есть, когда тостер на странице может использоваться в нескольких функциях и проще его подключить в шапке, чем асинхронно в каждой функции (я понимаю, что само подключение можно отдельно вынести, но и его тоже нужно будет учитывать в каждой тостер функции) А новичков и вовсе может оттолкнуть, т.к. могут подумать, что подобную структуру нужно писать изначально, что выглядит сложно за видос спасибо, круто, без воды
1. Если страница SSR то при каждом запросе юзера она собирается заново на сервере. 2. Если страница ISR то страница берется из кэша. Быстрый отклик и не такая большая загрузка на сервер. Все очень просто. В видосе это объяснили
Спасибо за ролик. Зависимости у меня вынесены в dev dependencies Вот такой вопрос, при продакшн сборке в ci/cd их нужно устанавливать через команду npm ci с флагом --production Но условный vite который для сборки нужен он как раз в devDependecies находится. Как в данном случае делать? Установить средства для сборки глобально? У нас это происходит в образе с nodejs
Пожалуйста. Там есть кнопка оплаты для иностранных карт, по ней можно провести оплату. Надеюсь что скоро мы откроем компанию за границей и сделаем более удобные иностранные платежи
Первые ошибки, мне напомнили одну вещь, где в самом начале все старались использовать стиль написания кода в виде ООП , после люди стали использовать функциональный стиль, так как его легче понять, а сейчас мы обратно возвращаемся к истоку. Не зря говорят:"всё новое - это забытое старое"
20:30 Спасибо за трезвое отношение к SSR. Я сам не понимаю такого восторженного отношения к SSR, а особенно React Server Components: когда я вижу SQL запросы в React-компонентах в некоторых примерах "западных" блогеров, у меня рука сама собой тянется сделать face palm. Я в своём проекте заморочился и стараюсь кешировать всё что только можно: и страницы, и данные из базы и результаты некоторых вычислений. И всё это для того, что бы по-максимуму разгрузить сервер.
🙏 . Но по прежнему находятся люди, которые считают что ssr top. Я просто на личном опыте в одном из прошлых проектов поплатился за это, у меня очень сильно косты выросли на сервер и продолжали расти. Так что тут да, очень аккуратно и в редких случаях
Ничем не отличается от php, java, python, .net, c++. Проблемы одни и те-же, и решаются они одинаково везде. Тут все упирается в наличие опыта, если его нет, то придется нарабатывать. Таблеток еще не придумали.
крутая графика в ролике, формат определенно зашел. не думал сделать ролик про оптимизацию проекта на vite+react или next js, как реализовать кэширование или вот ISR?
Давайте поддержим парня купив курс, я сам фронтендер уже не один год, купил и много чего узнал для себя посмотрел очень интересно снято всем советую, хотя просмотров мало но парень старается максимально 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Держу в курсе сейчас большинство компаний используют tailwind, к примеру можете глянуть код chatgpt. Это очень удобное решение, чем писать олдскульные классы. Главное правильно оптимизировать
![Настройка, которая сделает WebStorm в 10 раз быстрее! [ Плагины / Снипеты / Хоткеи ]](/img/n.gif)
Поддержи видео лайком, 1000 лайков 👍 и я начну собирать новые 10 ошибок!
Скачать 🖥 красивый PDF - htmllessons.link/DJ5IQeV
Наберем в телеге 8500 подписчиков и я выложу файл туда бесплатно!
00:00 Вступление
00:40 Ошибка 1: Почему нельзя оставлять логику в компонентах?
02:50 Ошибка 2: Используйте константы правильно!
04:38 Ошибка 3: Конфиги - залог стабильности
07:54 Ошибка 4: Оптимизируем модули по максимуму
09:35 Ошибка 5: Динамические импорты как они есть!
13:55 Ошибка 6: Ленивая загрузка на полную мощность
15:30 Ошибка 7: Почему devDependencies?
17:09 Ошибка 8: SSR или ISR? Большая разница
20:34 Ошибка 9: tailwind-merge для чистоты кода
21:37 Ошибка 10: Загрузка данных только когда нужно!
23:31 Заключение
Спасибо! Лично мне зашел такой формат. Отличное видео
Круто. Очень полезно. Опытные разрабы смогут использовать все эти фишки, но для новичков, возможно, надо было бы больше примеров показать. Спасибо. Монтаж тоже заходит
Спасибо! Полезные советы
Спасибо за видео! Реально очень ценно!
классный видос, полезный
Крутое видео, спасибо ;)
Отличное видео, много для работы подчерпнул
Как всегда топ, благодарю тебя за качественный контент, обязательно буду применять в своих проектах!🎉
Отличный видос. Спасибо за работу.
Макс, как всегда очень крутой ролик.
Спасибо интересно)
Реально интересное видео. Снимай побольше таких видео об ошибках и как их исправить
Крутой и познавательный ролик!
Спасибо. Очень полезно.
Давай видео, где в одном проекте юзаем все эти фишки. Часа на 4. Будет легендарно. Можно будет добавить просмотр перфоманса, до и после внедрения фишек.
В новом интенсиве по некст 15 будет такой урок уже записан. А на ютубе думаю мало кому будет интересно
Очень классный видос !
Долго ждал бро. Огромное спасибо тебе
По второму примеру: а если я в названии поля енама описку сделаю?) какая разница в чем делать описку: в иvени поля енама или строке , на равенство которой проверяем status?
Ты исправишь в случае чего только в одном месте. Это концепция единственного источника правды. В других частях где ты используешь enum не сможешь допустим ошибку. Тебе ide подскажет. Главное быть внимательным в одном месте.
@@arturseu я к тому, что если я протипирую status просто юнионом, мне так же будет везде высвечена ошибка, не енамы спасают от описок, а типирование
полезный видос
7:54 Разве имеет какое-то значение сколько строк кода в проекте? Если другой код не используется, то каким образом он может влиять на производительность? Компилятор вообще разве не выкидывает лишний код для оптимизации?
Странный вопрос. Первое о чем нужно думать это о читаемости и скорости вовлечения в код. Чем больше строк кода в файле, тем сложнее в нем навигироваться.
@@REDGroup Я не про количество строк в файле, а про импорты
Действительно полезно
Спасибо за видео ! Очень круто ! Хотелось бы послушать про decency injection
Было бы отлично, если был бы реальный тест производительности, чтобы наглядно было видно разницу
Условно, я, действительно, понимаю, что код будет работать быстрее, но на сколько - это тоже важно
Если у меня уже есть проект, и он грузится, например, 10сек, есть ли мне смысл подтягивать всю команду смотреть твой видос, чтобы они поняли, что нужно переделать все компоненты с использованием dynamic импортов, потому что выйграем в производительности 10мс?
Само видео кайф, харош
Значит вам пока не требуется. Я к этому пришел, потому что у нас функционально большой проект и я начал чувствовать просадки в производительности. Поэтому искал все пути оптимизации. У вас должна быть острая необходимость, потому что просто так оптимизация денег бизнесу не принесет
@@REDGroup этих слов "У вас должна быть острая необходимость" в видосе не хватает столько раз, сколько было сказано "подгружайте тогда, когда надо"
Есть большой проект, есть желание писать чистый код, но нет необходимости в подобной оптимизации и неизвестен выхлоп. Тут ещё момент есть, когда тостер на странице может использоваться в нескольких функциях и проще его подключить в шапке, чем асинхронно в каждой функции (я понимаю, что само подключение можно отдельно вынести, но и его тоже нужно будет учитывать в каждой тостер функции)
А новичков и вовсе может оттолкнуть, т.к. могут подумать, что подобную структуру нужно писать изначально, что выглядит сложно
за видос спасибо, круто, без воды
Что у тебя за команда такая, которая не в состоянии сделать для начала одну вещь - разобраться, что именно работает долго?
Вау супер полезное видео с примерами спасибо!
все жиза. мне бы это видео пару лет назад)
По 8 блоку пример не понял... Товары цены и т.д. должны тянуться с базы, какой тут билд? Типо страницу заного отрендерить или что?
Вы немного не понимаете о чем речь. В комментарии объяснить не смогу. Просто изучите различие ssr и isr
1. Если страница SSR то при каждом запросе юзера она собирается заново на сервере.
2. Если страница ISR то страница берется из кэша. Быстрый отклик и не такая большая загрузка на сервер.
Все очень просто. В видосе это объяснили
Спасибо очень крутой видос
Макс спасибо, ты капитальный красавчик!
Познавательно, в 1 примере почему сразу не записать `enabled: isOpen`?
Да, думаю можно. Чуть перемудрил
Полезное видео, много чего узнал, спасибо) ❤
Очень интересно. Качественный контент
Отличное видео!!!
Классный видос, продолжай в том же духе, и у тебя все получится бро
Спасибо! 🔥🔥🔥
Нашёл ответы на множество своих вопросов. Спасибо за полезный контент)
а не проще вот просто html, css, php и немного js?)))
respect тебе макс за крутое и полезное видео👏👏👏
Спасибо за советы
Спасибо за ролик. Зависимости у меня вынесены в dev dependencies Вот такой вопрос, при продакшн сборке в ci/cd их нужно устанавливать через команду npm ci с флагом --production
Но условный vite который для сборки нужен он как раз в devDependecies находится. Как в данном случае делать? Установить средства для сборки глобально? У нас это происходит в образе с nodejs
Честно не понимаю зачем ставить с флагом production. Я сам много раз настраивал ci/cd, все работает и без этого флага и достаточно быстро.
Спасибо огромное за бомбезный контент, можешь пожалуйста подсказать почему не получается купить что-угодно из твоего сайта (я из Украины)
Пожалуйста. Там есть кнопка оплаты для иностранных карт, по ней можно провести оплату. Надеюсь что скоро мы откроем компанию за границей и сделаем более удобные иностранные платежи
Angular +++++++😊
Топ видос на выходные
Круто
так мало подписчиков но крутая подача
70к вроде хороший результат для нашей узкой сферы. Но да есть куда расти и пора уже к сотке прийти. И в плане качества постоянно растем.
Первые ошибки, мне напомнили одну вещь, где в самом начале все старались использовать стиль написания кода в виде ООП , после люди стали использовать функциональный стиль, так как его легче понять, а сейчас мы обратно возвращаемся к истоку. Не зря говорят:"всё новое - это забытое старое"
Ну тут вроде выносится именно логика, а сами станицы все также в функциональном стиле.
@@montecristo31 внешний вид всегда намного лучше делать в функциональном стиле, но бизнес логика, наоборот стремиться к ООП стилю
Пожалуй самое лучшее твое видео
Да, вижу по фидбэку зашло.
20:30 Спасибо за трезвое отношение к SSR. Я сам не понимаю такого восторженного отношения к SSR, а особенно React Server Components: когда я вижу SQL запросы в React-компонентах в некоторых примерах "западных" блогеров, у меня рука сама собой тянется сделать face palm.
Я в своём проекте заморочился и стараюсь кешировать всё что только можно: и страницы, и данные из базы и результаты некоторых вычислений. И всё это для того, что бы по-максимуму разгрузить сервер.
🙏 . Но по прежнему находятся люди, которые считают что ssr top. Я просто на личном опыте в одном из прошлых проектов поплатился за это, у меня очень сильно косты выросли на сервер и продолжали расти. Так что тут да, очень аккуратно и в редких случаях
Ничем не отличается от php, java, python, .net, c++. Проблемы одни и те-же, и решаются они одинаково везде. Тут все упирается в наличие опыта, если его нет, то придется нарабатывать. Таблеток еще не придумали.
крутая графика в ролике, формат определенно зашел. не думал сделать ролик про оптимизацию проекта на vite+react или next js, как реализовать кэширование или вот ISR?
С витом в проде не работаю. А по нексту наверное только в будущем интенсиве на платформе по некст 15. На ютуб пока не планирую.
👍👍👍
Огонь
😶🌫
Давайте поддержим парня купив курс, я сам фронтендер уже не один год, купил и много чего узнал для себя посмотрел очень интересно снято всем советую, хотя просмотров мало но парень старается максимально 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Топ
+
грёбаный контент мешает мне смотреть рекламу.
Смешно
минус в карму за tailwind
Держу в курсе сейчас большинство компаний используют tailwind, к примеру можете глянуть код chatgpt. Это очень удобное решение, чем писать олдскульные классы. Главное правильно оптимизировать
Отличный видос. Спасибо за работу.