Невероятный Vite под микроскопом 

Французы свой собственный язык произносят на уровне четырехлетних детей. Так стоит ли уподобляться им?

@@user-ik7rp8qz5g жесть откуда такая ненависть к нации?

@@tumann с нацией все ок, претензии к нормам произношения их языка (и написания тоже, но это другая тема).

Это как Vue, который все зовут Вью. Просто не все привыкли еще) А вообще нечего называть свой продукт так, что его сложно произнести

Не хватало еще и учить французкий, так что будет Вайт!

Вот блин опростоволосился)

Вайт, типо белый?

@@mvttofficial Белый на французском blanc

Да, очень по ушам резало

А алиасы работают? У меня почему-то пошет ошибу, но все рав в инструкции

Удачи на собеседованиии!

желаем успехов)

@@it-sin9k 🙏

Соболезную За три месяца меньше дюжины собесов на сеньор-фронта На последнем спросили "зачем придумали БЭМ", "что такое box-model" и еще полчаса вопросов по CSS, два вопроса по JS (ну с ними-то я справился), ноль вопросов по библиотекам - сказали, что я плаваю в вопросах. Вакансия была, если что, не на джуна и не на верстальщика, а именно на сеньор-инженера. На другом собесе дали задание: есть функция конструктор и класс, от них два экземпляра и 20 строк кода, в каждой из которых меняются, добавляются, перекрещиваются, удаляются свойства экземпляров, прототипов и т.д. и на каждой надо сказать устно результат - поплыл уже на 10 строке, запутавшись какие там были до этого операции. Сказали, что я не знаю прототипов и до следующего собеса не допустили (хотя по предыдущим вопросам удивлялись глубоким знаниям). Из всех собесов был только один нормальный, но там я выше головы прыгнул и ясен пень завалился, но было интересно у Evil Martians пособеседоваться. Это пздц, товарищи.

@@user-hp2cg6px8c оу, это дичь. Имхо, прототипы на клиенте не нужны, меня ни разу классами не грузили. Даже про this все один раз спросили за 10+ собесов. Вам просто везет на персонажей, которые самоутвердиться хотят за ваш счет. Лучше бы про производительность приложений спрашивали. Я в такие компании даже если позовут не пойду, в тот же Яндекс принципиально не собеседуюсь, тк они не понимают кого ищут, сначала за алгоритмы, простите - е*ут и в хвост и в гриву, а на работе в итоге: display: flex; и padding: 10px; Удачи вам в поисках!

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

Стоит, даже если наговнякано конкретно, то будет повод прибраться.

мы очень старались)

Во-первых: не "во первых", а "во-первых". Во-вторых: если закидываешь людям понт, будь готов соответствовать.

Хот релоад на вит реально летает, это типа его самая сильная сторона. Хотя честно меня даже обычный лайврелоад устраивал, подождать 1с не проблема.

думаю что сам редаск не поддерживает хот релоад из коробки. Подозреваю что ему надо объяснить как подменить старые редьюсеры новыми

Как то так исторически сложилось и всех вроде по сей день это устраивает)

Такая идея и была у данного видео, сэкономить время для нескольких тысяч людей)

хмм, да на самом деле никакие серьезные проблемы вы не решите переходя с mapStateToProps на useSelect. У useSelect есть всего 2 преимущества на мой взгляд: - useSelect - это hook, а mapStateToProps подключается через HOK. Соответственно если используешь hook, то у тебя виртуальное дерево меньше, что потенциально должно, уменьшить количество работы. Но не думаю, что вы это почувствуете - без useSelect тяжело делать самостоятельные пере используемые хуки. Например у вас может быть хук useTotalPrice. Он будет использоваться в 5 местах. Внутри него можно достать и redux значение с помощью useSelect. В итоге хук будет полностью самостоятельным. С другой стороны с mapStateToProps придется вам во всех 5 местах доставать это значение и пробрасывать его в хук useTotalPrice. Хорошо, если значение одно, а если их много (amount, currency, discuount and e.c.). Тогда пробрасывать во всех 5 местах неудобно. А через пол года, вам понадобится еще 1 свойство и вы опыть будете пробрасывать во всех 5 местах его и надеяться, что нигде не забыли Как то так

Спасибо!) Были времена хорошие)

Прям из коробки нет, нужно jsconfig еще допилить, вот как тут и не нужно будет react-app-alias create-react-app.dev/docs/importing-a-component/

Так и никто не оспаривает, что в данный момент, он выглядит привлекательнее :) Меня смущают 2 момента: увеличенное количество npm зависимостей, так как любой важный проект с важными клиентами хочет иметь лишь безопасные пакеты и насколько он будет развиваться в экосистеме реакта дальше, не очень понятно. И что самое интересное, хотелось бы посмотреть как CRA будет дальше развиваться имея такого конкурента

npm пакеты не требуют у вас такие переменные?

@@it-sin9k нет, эти переменные нужны пакетам, и это пакеты должны заботиться о том, чтоб все, что им надо, у них было. Ведь у них свой проект, свой бандлер, который все собирает и делает релиз. Некоторые делают билды под разные типы модулей, и возможно, если пакету что-то надо, то это намек на то, что пакет неправильно используется. Обычно это все автоматически разруливается, но может какой-то исключительный случай.

Круто! Спасибо за комментарий!

Настраивал ли прокси сервер? Если да то, подскажи пожалуйста, есть ли возможность проксировать все пути на бэк без префиксов типо /api, то есть если я хочу сделать запрос на /test/1 чтоб он на бэк проксировал?

Спасибо, что поделились горьким опытом)

да, это первое что я попробовал. У меня просто ничего не изменилось. Мб какой то пакет более специфичный в под зависимостях используется.

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

@@user-pt5yi8lx4q ну значит я тоже душнила, все норм ;)

На анг.яз будет вайт, а вит это с франсуа. Душнилы вы капец

@@lionstar3189 надо уважать разработчика, раз уж он явно написал как надо читать наименование

@@lionstar3189 ща пробежался по нескольким видосам от англоязычных ютуберов - у всех вит

согласен

СОГЛАСЕН 100х

На проекте пришлось разобраться с MF. "Просто добавляешь по сути плагин, читаешь документацию, настраиваешь свое приложение, имимтируешь хост приложение, и вуаля - ты красавчик" - сделал я на домашнем компе под линуксом и последними версиями node и webpack. А вот на рабочем проекте под виндой пришлось обновлять ноду с 14 до 16 (и то пришлось сопроводительное письмо в СБ с пояснением ЗАЧЕМ, и это в 2022г)), webpoack с 4 на 5 версию обновлять, сами понимаете какие проблемы вызывает, в общем всего неделька страданий и поиска новой работы грузчиком в пятерочке...Как hot-reload сделать внутри родительского приложения при изменении в дочернем - так и не разобрался, потому разрабатываю без режима MF, я слишком для этого дерьма.

@@bebeto123g это путь воина

Не надо лезть в этот ад - там куча ньансов, которые усложняют разработку, поддержку и тестирование многократно!) Установкой ModuleFederation, не ограничитесь)

А вот как раз записал про это следующее видео))) буквально на днях выйдет))

@@it-sin9k С нетерпением жду!

Я думаю это нужно согласовать с командой. CRA будет более стабильным, а Vite более новым модным и дерзки, но менее стабильным. Как я вижу комментарии делятся на две группы. Я живу уже год и все ок, проблем не было. И год живу, но прошел некоторые трудности неприятные. Почитайте комментарии и примите решение :)

@@it-sin9k Спасибо за ответ, я принял решение, что модность и дерзость для меня не позволительная роскошь, на данном этапе)) и поэтому перенесу на CRA

Про это запланировал отдельное видео)

Ого крутые показатели) не слышал чтобы проект запускался 65 секунд никогда) огромный же у вас проект)

У меня тоже около минуты запускается, хотя у меня бандл на 600кб,учкбныц проект, правда и проц i7 2 поколения) на ryzen 5 3600 секунд 30, если бы запускался 9 сек, я бы был бы доволен)))

@@lLoseControll Ребята у меня мак бук последний) сорян)

@@it-sin9k да кстати, отчасти влияет то, что это на типичном офисном ПК. В домашнем условии на мощном ПК оно конечно было бы побыстрее. Тем не менее именно на рабочей машине и нужно эти оптимизации.

Мне кажется подобную тему я уже раскрыл в нескольких видео, но вот доклад мой, который хорошо это все подытожит: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fWm-m1-_dVA.html

@@it-sin9k посмотрю. Спасибо!

Спасибо за полезный комментарий! Думаю другим зрителям будет полезно почитать)

jest на vitest можно было сразу мигрировать. Там один конфиг для vite и vitest шарится. Надо только пару опций добавить, и drop-in replacement готов

для jest есть ts-jest, который работает с ES modules и бабель не надо ставить. Там правда надо в доке найти нужный конфиг. А линтер настроить - это 5 секунд.

Умно)

можно, но это не даст такого прироста. Скорость vite в деве идет за счет того что он не собирает бандл. Он просто отдает все файлы в браузер как esm модули. Ну и конечно транспилит тот же jsx только по мере того как файл понадобиться.

Прикольно :) Звучит как исследование интересное) надо попробовать)

vite работает быстро в dev режиме за счет того что не собирает бандл как это делает вебпак. Дело не только в esbuild

@@user-yw9wx4lv2w да, в видео есть целый блок про ES Modules. Где даже блок схемы разбираются, как это работает :)

Знакомая ситуация :)

Чего сразу хоронить) просто не рекомендую по первым ощущениям) Буду и дальше наблюдать как развивается экосистема)

Если cra используется с конфигом из коробки, то миграция это вопрос пары часов. А если есть дополнительный кастомный конфиг вебпака, то может понадобится накидывать кучу плагинов или самому их писать.

дев сборка использует esbuild написанный на golang, а продакшн через rollup. не может ли из-за этого измениться поведение кода при определенных условиях? по сути 2 разных компилятора, и 2 разные сборки

@@MegaBeshka это так и происходит

@@profesor08 под поведением кода я имел ввиду ошибки

Хмм, тогда интересно как работает у нас на проекте с вебпаком 5 о_О

Возможно у Вас некорректный кофиги поэтому долгий старт.

@@serhioramires3166 некорректный конфиг cra? Долгий старт был у cra

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

Ого, спасибо за фидбек :) Очень полезно)

Он же автоматом конвертирует модули на CommonJS в ESM формат, как и rollup, поверх которого он работает. С чего бы вдруг они не будут работать?

@@alexandrkositsky7698 ничего автоматом не происходит, Это делает создатель пакета с помощью каких то инструментов по идее. И насколько эти инструменты оттестированы, если толком никто не пользуется ES модулями неизвестно. И добавили ли ES модули для пакета вообще это вопрос на усмотрение создателя пакета насколько я понимаю. Так что все может быть :)

Ого, не знал. Только глянул и действительно год тишины у них О_о

@@it-sin9k Больше. Пятую версию зарелизили 14 декабря 2021. В апреле 22 добавили мелкие баг-фиксы.

Любопытная информация. Ну ждем официального заявления куда переходить по рекомендации в React документации. Пока не очень понятно. В Webpack пока комиты на ежедневной основе есть, но кто знает, что они там подпиливают. Значит нас ждут большие перемены, очень интригующе)

Круто! Спасибо что поделились своей историей)

Исправился! Спасибо developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

к сожалению я не работал еще с vite на реальных проектах и не могу оценить насколько он хорош) но очевидно, что vite теснит всех в SPA)

Тема микрофронтенда еще не до конца избита на всех конференциях?)

о круто) а у вас TS на проекте? вы отдельно loader для него подключали?

@@it-sin9k Ку) Нет, у нас на проекте TS нету. В ближайшее время планируем переходить. До этого был старый добрый babel-loader

@@ArtikMan1994 Надо будет попробовать с нашим ts-loader как это взлетит)

Очень похожие ощущения словил)

у меня макбук прошка на м1 процессоре, я уже начал думать, что дело в нем)

@@it-sin9k собирай проект на чем то послабее, и тогда сможешь оправдать для бизнеса переход на vite =)

@@user-yw9wx4lv2w боюсь, что бизнес за такие трюки мне оторвет что-нибудь)

прикольная тема) не думал о ней даже) надо будет поковырять)

ахах) позитивное мышление!)

да) все верно)

хех) надо точно заводить пет проект потестировать)

Если что, то в нектсе нет вита, там тоже вебпак

@@alexandrkositsky7698 +

Давайте представим ситуацию, когда проект длится допустим уже 7 лет. В начале он был допустим на 2 вебпаке с react-scripts версии допустим 3. Спустя года 2 вышел вебпак 3 и вышла новая версия react-scripts со всеми настройками для вебпака 3. Обновить react-scripts проще, чем изучать все фишки webpack 3 и его настройки. Еще года через 2 вышел webpack 4 / webpack 5 с разными новыми настройками. Не хотелось на это все тратить много времени. А с высокой вероятностью вообще хз обновлял ли бы кто то этот вебпак и тем более его настройки спустя годы. Поэтому так проще и экономнее жить, чем кастомный сетап поддерживать

@@it-sin9k так это почти про мой один проект) Проекту около 5 лет уже. Был react-scripts, хотя конфигурировать умею и пользуюсь вебпаком как одним из сборщиков с его первой версии. Первые два года этого проекта использовал react-scripts потом нужно было конфигурировать поставил rewared расширение, потом перевел на react-scripts-ts, а эту сборку кучу лет никто не обновлял. Потом вынужден был на кастомную сборку перевести с конфигурированием вебпака, и сразу на четвертый, а потом и на пятый. И затем подумал, почему не сразу перевел, а терпел кучу времени устаревшие зависимости. Все стало намного гибче и не зависишь от чужих зависимостей react-scripts. Теперь буду на Vite переводить, как минимум дев режим для ускорения хот релоада, а прод если, что можно на вебпаке также собирать. Настраивать сборку для фронта это ещё как-то естественно. А вот какой-нибудь автодеплой с градлом для Java или клейком для C# это уже не очень, тут для девопса задача, но приходилось самому настраивать