Пока готовлю большой проект и много контент на TH-cam решил разбавить новым форматом. Как вам? Лично мне очень нравится учить новое, и если вы оцените, то буду таким делиться чаще) Так же напишите, какую тему в подобном стиле еще разобрать?
@Зорица Караджич насчёт разработчиков, которые в нативном js разбираются хуже, чем в реакт, это очень плохо. Такими быть нельзя. Обходиться без фреймворков конечно можно, но зачем? Фреймворки проще для разработчика, а потому все крупные проекты на них написаны. Давно я вакансий по чистому js не видел, очень давно. Надо конечно и по чистому js снимать, тут я согласен
Если есть желание посмотреть пример реального проекта с использованием архитектуры микро-фронтэнда, предлагаю пообщаться, покажу реальный проект. Отправил запрос в друзья в vk. Сделаете ролик про "честный" микро-фронтэнд.
Владилен, добрый день! Канал великолепный. Очень помог подтянуть знания по js. И помогает пополнять. За это большое спасибо! На канале совсем не затрагивается тема 3d и и в целом, в интернете, очень не просто найти хоть какие-то материалы по Three.js. Есть план помещения нарисованная в Blender ни как не могу найти как его импортировать на сайт и оживить при помощи js. Думаю многим так же был бы интересен такой курс. Спасибо!
Классно рассказано, спасибо тебе! Правда в части общей шины данных не совсем корректно применено к микрофронтендам. Я сейчас разбираюсь с микрофронтендами углубленно, и суть их в том, что каждый микрофронт должен работать изолировано, только со своим набором данных. Ни один микрофронт не должен реагировать на изменения в другом. Посыл микрофронтендов заключается в том, что каждую часть приложения разрабатывают разные команды, и по итогу их части приложения - модулями можно грубо назвать, должны легко слиться в одно большое приложение. Но фишка даже больше не в этом, а в том, чтобы данные для других микрофронтов подгружались лишь тогда и только тогда, когда они нужны, и подгружаться должны только те данные, которые не были подгружены ранее для ранее потребовавшихся микрофронтов. Т.е. общие пакеты или данные не должны подгружаться дважды, например react для каждого микрофронта. Все это поддерживается в webpack5. А так, мне понравилась теория о микрофронтендах! :))))
Привет, а если у нас есть какое-то состояние например токен пользователя, и нам надо его иметь для запросов на разных фронтах Не должны ли они делить данное состояние между друг другом
@@djorji7114 Привет! Нет, каждый фронт несёт свой набор данных, необходимый ему для работы со своим сервисом. Токен пользователя лучше хранить в куке, по которой каждый микросервис сам определит что это за пользователь. Идея микро фронтов заключается в том, что в какой-то любой момент один микрофронт удаляется например, другой загружается и работает, что-то вроде когда-то активно применяющийся в реализации фронтовой разработке. Хорошо что от них ушли 😁
@@djorji7114 я сейчас на проекте, где, к сожалению, нет микрофронтенда (( Погугли, на просторах интернет тонны информации. Реакт не панацея для микрофронта, любой фреймворк можешь использовать и даже чистый is. Главная суть, что твой сгенерированный js bundle имеет свой уникальный путь загрузки и должен скачиваться по этому пути, а в настройках главного контент сайта должна быть логика по его подключению в определённый контейнер
Это не совсем микро-фронтэнд. Это монолит с использованием разных фреймворков. Можно назвать его - ГИБРИД. Микрофронтэнд - это когда каждый модуль вообще никак не связан с другими модулями, когда они собираются в разных проектах, а подключаются в хост-модуль например с помощью webpack moduleFederation плагина и лучше по какому-нибудь конфигу на лету. Или вообще подключаются непосредственно в html Ну и еще про стор замечание. Это по функционалу - шина событий. Стор все-таки должен хранить данные. А в общем спасибо за рассказ.
@@user-pe5qr2wp4u - это способ включения стороннего модуля на страницу и ВСЕ! На этом функционал и возможности заканчиваются. Встречный вопрос, кто они?
Стоит дополнить, что реализация стора в глобальной переменной очень плохая идея. И да это не стор, а простой event emitter паттерн в который докинули коун, что тоже не хорошо.
@@alung414 Да, привязка к глобальному объекту window - это с точки зрения безопасности плохо. Надо искать другие варианты решения создания EventBus с глобальной областью видимости. А вот в качестве стора удобно использовать Mobx и пробрасывать его в модули через пропсы.
Кстати, не извращения) в продакшне такое используют нередко сейчас. Правда это почти никогда про разные фреймворки, просто разные команды занимаются разными частями одного большого сервиса, даже не обязательно, чтобы всё это на одной странице было и есть связующее звено между этим всем
Отличная тема! Мне бы очень хотелось посмотреть, как оптимально организовать совмещение различных css-библиотек, например, весь проект на Materialize, а вот какой-нибудь слайдер прикрутить с Bootstrap. Еще интересно было бы посмотреть про сессии в Ноде, по работе с куками в бэке и на фронте. Интересна интеграция в проект сторонней аутентификации, через гугл, к примеру. Интересна двухфакторная авторизация, с подтверждением по почте/телефону. Короче, жду))) Удачи тебе во всем!
класс, сначала загрузим реакт, потом загрузим вью и через кошачью жопу будим их синхронить..... огонь идея, производительность должна расти на глазах :)))
Ну хз, обычно компонентам не требуется такой синхронизации, я думаю Владилен показал пример, как можно научить компоненты взаимодействовать при необходимости.
Канал замечательный. Проштудировал все видео про создание CRM на vue, просто шикарно. Для начинающих самое то. Спасибо большое, ждем новых видео, особенно интересно по vue
Ах, какой красивый и умный мужчина) Недавно начала работать с Vue.js. Наткнулась на это видео случайно, но была рада, что я не одна люблю извращаться :D Было очень интересно, с меня подписочка)
Владилен, в какой-то момент видоса я вдруг осознал, что полностью понял программирование. Все твои объяснения и весь код стал кристально ясным и понятным. По сути, программирование - это действительно своего рода общение;) Спасибо Вам, дорогой друг
У меня лет 5 назад был SPA-проект на bootstrap+jQuery, в котором реализована идея плагинизации: сервер отдает список подключенных (оплаченных пользователем) фич-микросервисов, фронт читает этот список и загружает соответствующие js-файлы через "добавить в head тег "), которые "находят" себе место на SPA. Когда визуально компоненты можно разнести - это (как выше отмечалось) можно сделать и на 'ах. А вот когда в едином SPA что-то дорисовывается или меняет логику - это квест. К сожалению, с переходом на React пришлось "потерять" эту крутейшую штуку и прийти к фронту-монолиту. В итоге, даже если пользователь не оплатил какую-то фичу, по факту при загрузке страницы эта фича ему грузится (но не работает) - такое себе решение. Но уход от вермишели кода на jquery к компонентам на React в целом многократно прибавил надежности
Привет! Большое спасибо за крутой контент. Ты растешь, мы тоже не стоим на месте и хотелось бы видеть больше видео направленных на архитектуру веб приложений, выбор технологий и тд. (син-архитекторские штуки) Спасибо:)
Мне кажется, не совсем корректно описано. Микрофронтенды живут на своих собственных хостах и могут быть загружены в другие приложения лениво. Для этого используют ModuleFederation из Webpack 5. В конфиг заранее прописывают какие модули (микрофронтенды) могут быть запущены. А еще, есть ощущение, что бессмысленно создавать микрофронты на разных фреймворках, тк придется скачивать бандлы всех этих фреймворков. Лучше писать на одном, а в конфиге указать какие зависимости у приложений одинаковые, чтобы юзер скачивал их не больше одного раза.
@@VladilenMinin да, потому что данный архитектурный подход имеет место в очень крупных проектах, когда одной команде приходится ждать, пока задеплоит другая, пока соберётся (в плане сборки проекта) огромный монолит и т.д. Для проектов средней величины, наверное, мало смысла в подобном подходе.
Владилен, приятно видеть, когда вы, как человек, который обладает значительными знаниями и практикой в разных технологиях, честно и открыто говорите: "а вот это я не знал, но узнал, разобрался и вам, друзья, расскажу и покажу что это и как выглядит". Спасибо большое! Если будет желание/возможность/время, то не могли бы вы показать, как вместе работают: Nest - GraphQL-ArangoDB. Хотя бы на уровне: вот так подключать, вот так включать. Вообще ничего нет в рунете по теме. Спасибо :-)
Это можно сделать по-другому. Под каждое приложение определенный репозиторий. Выбираем главный и подключаем в него придаточные через npm link (подключаются как dependencies), и подключаем в основной тегом в нужное место. Связь через общий стор, или стор каждого отдельного репозитория, если это написано на 1 фреймворке, либо кастомное решение стора в случае разных фреймворков
Кромешный ад. Не дай господь мне столкнуться с таким чудом по работе. Мало того что мы в "рантайм" тянем каждый фреймворк на котором пишут приложение, так ещё и прослойки-адаптеры для них, чтобы это чудо запустилось. В итоге, получаем полуживое приложение, которое со скрипом общается меж своими внутренностями. Единственный плюс лишь в том, что можно команду разработчиков за копейки собрать. Так что, если стоит задача собрать приложение в бюджет булки хлеба, и без планов на поддержку с вашей стороны - Вариант ещё может чего-то стоить.
@@anotherakuma Ещё как неприятно, но зато экономно. Только до сих пор в голове уложить не могу одно: Даже если у разношёрстная команда, где каждый пишет код на том, на чём может - Как это, в дальнейшем, проблему нехватки кадров решит. Да и со взаимозаменяемостью внутри команды проблемы большие приходят. Короче, я правда этого не понимаю...
Владилен, рассмотри еще Module Federation для микрофронтендов th-cam.com/video/pcY8-pDGLkI/w-d-xo.html По сравнению с single-spa он позволяет шарить общие модули; каждое приложение это независимая webpack-сборка, и приложение "собирается" в браузере; позволяет строить интересные гибриды, когда вставляется компонента с другого приложения и в коде это выглядит как-будто используется компонента из соседнего файла.
При разработке на реакт ты сразу начинаешь страдать изза размера бандла, но придумали же микрофронтенды!! ТЕПЕРЬ можно и реакт библиотеку тянуть и вью, вот бы еще ангуляр подключать тогда приложение точно будет удобно и быстро работать
Привет уже давно твой подписчик. Очень нравится твои видео, и как ты подаёшь материал. Сам начал записывать видео. Например про микрофронтенды, на angular. А так цель немного другая, стараюсь записывать всякие тонкости в технологиях, которые использую.
оно интересно, но в этом случае тащится бандл react и vue, зачем? чтобы скрестить одно с другим? даже если будет два приложения vue, то каждое в итоге либы потащит, общий размер кода получаемого юзером будет расти
Добрый день. Владлен Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не получится точно! Простая карточная игра (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Спасибо
У меня была недавно немного иная ситуация. Даже не знаю, можно ли это назвать микрофронтендом. Есть несколько SPA страниц на Vue и React. Необходимо было создать отдельный виджет, который можно подключить к любой из SPA, причем без публикации в npm. Хотелось сам виджет сделать на Vue. Пришлось помучиться с реализацией, но уверен, если бы была видео-инструкция от Владилена, это было бы проще)
у меня есть проект на github. на который я включил по ошибке dependabot[bot]. и он у меня появился в авторах проекта!! это очень бесит... и как я не пытался его убрать. так и не получилось. подскажите как как убрать этот бот безопасности dependabot[bot]!!! плиз...
В целом прикольно, но мне кажется тяжело в использовании и особенно в рефакторинге, потому что при наличии нескольких либ, например река и вью, человек, который будет рефакторить должен будет знать и то и то. Плюс у приложух разная скорость загрузки, порядок загрузки компонентов и запросов нельзя будет поменять. Владилен, подскажи пожалуйста, у тебя макбук 16 или 13 дюймов и во время разработки, подключаешь ли ты дом мониторы?
Я считаю это извращением, но может понадобится когда нужно срочно написать за час модуль для vue, но в гугле ты нашел его только на реакте, тогда вполне годные костыли получатся)
плз. если можно... сделать урок, как создать свою библиотеку для React, хотя бы ui[с аккордеоном, модульными окнами, своим слайдером, ...args] => return с выгрузкой в npm, и с примером потом как её использовать. Понятное дело найдутся умники которые напишут : "это уже всё создано, зачем?". Но интересен сам процесс как создать свою ui библиотеку хотя бы и понять как их делать, шаг за шагом. Инструменты использовать могут все, а создавать их единицы. (с) Неизвестный прогер :) А то я что-то ничего толкового не нашел, какие -то лекции с достаточным количеством литража воды в уши (( Спасибо огромное за Ваш труд.
В теории микросервисов упоминались динамически создаваемые сущности с заданным временем жизни. Которые создаются, отрабатывают или падают, умирая передают состояние на новый круг. Но это наверное уже совсем другая история
Таак, а разве micro frontend архитектура не то когда условно есть роут с логином и роут с настройками пользователя и вы с помощью nginx ссылаетесь на разные SPA
А мне этот подход прям понравился, гибкость нереальная. А какой связавшись стор интересно можно использовать вместо window, чтобы это было не костыльно.
А какой практический смысл такого подхода? Юзать две либы по одному маршруту, загружая обе библиотеки не очень рационально получается. Наверное, есть смысл разные либы всегда по разным маршрутам.
А интересно, главные компоненты с ID React и Vue (index.html), может быть один или можно несколько и если несколько, то как это указать в react.app.js и vue.app.js? Это бы позволило обойти вот это вот представление глубокого дерева после написания всего приложения.
Если раньше даже при использовании одно фронтенд фреймворка собиралось "полмира". Теперь собираться будет вообще "весь мир". А потом удивляются почему на "сяоми тыщ за 10" приложение чуть сложнее hello_world безбожно тормозит (либо вообще не работает).
Контент интересен, спасибо. Один только вопрос зачем, а самое главное нахрена?)) давайте один проект будет лепить команда по вью, команда по ангуляр и команда реакщиков) раньше мы плавали в фекалиях индусского кода, почему бы теперь не добавить ещё сюда и микро-фронтенд на разных фреймворках и соединять их йух пойми чем)
@@VladilenMinin Спасибо за ответ. Конечно можно, но все же я думаю лучше взять один фреймворк и разбить его как Module Federation или в Angular вообще есть возможность разбивать по проектам приложение. За контент отдельное спасибо, меня спрашивали вопросы по микрофронтендам на собеседовании
Всем привет, я учу vue и столкнулся с проблемой при передаче объекта через props например: В родителе пишу data: () => ({ person: { name: 'Ivan" } }) В файле компонента пытаюсь вывести имя {{person.name}} props: ['person'] Но получают ошибку Cannot read properties of undefined (reading 'name') но если отдельно передавать не person а person.name в родителе, то все работает Мб кто-то подскажет где я ошибаюсь?
Странно, что стор делает что-то с данными, а не просто хранит их. Если нажатие кнопки обрабатывается во VUE, то пусть там будут методы для этого. Иначе у нас еще 3 слой появляется.
Для ознакомления с темой микросервисов - ок. В реальности их спользование под большим вопросом. Не, не так... под ОГРОМНЫМ вопросом (даже целой серией вопросов) - а надо ли оно вам действительно?
@@max_mgtow не только поэтому. Вот, на примере, который был рассмотрен. Разделил ты на блоки, у каждого свой микросервис. И ты такой: "О господи! Как же я охренителен!". А потом так - ЧИК! - и тебе надо сынтегрировать взаимодействие 2 микросервисов, потому как у каждого своя отдельная база и надо как-то синхронизировать состояния и обеспечивать транзакционность и т.д. и т.п. А ещё это не приносящий тонну бабок проект, а очень даже пилотный, а тебе надо уйма времени для поддержки твоего хитрого набора микросервисов. И ты такой уже тонешь в болоте этих проблем: "Оу... вечно я во что-то вступлю... то в дерьмо, то в пионеры...". Така фигня, малята.
С точки зрения программирования - это просто интересно, но нежиснеспособно. А вот с точки зрения бизнеса, к сожалению, очень даже реальный кейс. Например, есть две команды разрабов, одна знает vue, другая - react. Бизнес давно ждёт фич и по отдельности ресурсов каждой команды не хватает. Дальше начинается веселье. У меня как-то был опыт по встраиванию angular приложения во vue приложение, которое, в свою очередь, работало на рельсах. В принципе, все работало и задачи бизнеса решало, а на производительность все клали.
А кто может объяснить зачем это нужно? Что это нам даёт? Потому что это как минимум странно.... Писать приложение на вью и реакт одновременно и пытаться это связать...
![[ENGSUB] UNPRODUCTIVE DAY ใช้ชีวิต (เปื่อยๆ) ด้วยกัน 1 วัน! | OUROAD CLOSEFRiEND SS2 EP.9](http://i.ytimg.com/vi/pyYKZ3kra9w/mqdefault.jpg)
Контент несомненно полезный, но сам microFrontend подход напомнил мем где слон + пингвин = пингвин с головой слона)
Ну тут ты не прав
Пока готовлю большой проект и много контент на TH-cam решил разбавить новым форматом. Как вам?
Лично мне очень нравится учить новое, и если вы оцените, то буду таким делиться чаще)
Так же напишите, какую тему в подобном стиле еще разобрать?
А что за большой проект?
Очень хотелось бы информацию по docker и kubernetes
@Зорица Караджич насчёт разработчиков, которые в нативном js разбираются хуже, чем в реакт, это очень плохо. Такими быть нельзя. Обходиться без фреймворков конечно можно, но зачем? Фреймворки проще для разработчика, а потому все крупные проекты на них написаны. Давно я вакансий по чистому js не видел, очень давно. Надо конечно и по чистому js снимать, тут я согласен
Если есть желание посмотреть пример реального проекта с использованием архитектуры микро-фронтэнда, предлагаю пообщаться, покажу реальный проект. Отправил запрос в друзья в vk. Сделаете ролик про "честный" микро-фронтэнд.
Владилен, добрый день! Канал великолепный. Очень помог подтянуть знания по js. И помогает пополнять. За это большое спасибо!
На канале совсем не затрагивается тема 3d и и в целом, в интернете, очень не просто найти хоть какие-то материалы по Three.js.
Есть план помещения нарисованная в Blender ни как не могу найти как его импортировать на сайт и оживить при помощи js.
Думаю многим так же был бы интересен такой курс.
Спасибо!
Классно рассказано, спасибо тебе!
Правда в части общей шины данных не совсем корректно применено к микрофронтендам.
Я сейчас разбираюсь с микрофронтендами углубленно, и суть их в том, что каждый микрофронт должен работать изолировано, только со своим набором данных. Ни один микрофронт не должен реагировать на изменения в другом.
Посыл микрофронтендов заключается в том, что каждую часть приложения разрабатывают разные команды, и по итогу их части приложения - модулями можно грубо назвать, должны легко слиться в одно большое приложение.
Но фишка даже больше не в этом, а в том, чтобы данные для других микрофронтов подгружались лишь тогда и только тогда, когда они нужны, и подгружаться должны только те данные, которые не были подгружены ранее для ранее потребовавшихся микрофронтов. Т.е. общие пакеты или данные не должны подгружаться дважды, например react для каждого микрофронта.
Все это поддерживается в webpack5.
А так, мне понравилась теория о микрофронтендах! :))))
Привет, а если у нас есть какое-то состояние например токен пользователя, и нам надо его иметь для запросов на разных фронтах
Не должны ли они делить данное состояние между друг другом
@@djorji7114 Привет!
Нет, каждый фронт несёт свой набор данных, необходимый ему для работы со своим сервисом. Токен пользователя лучше хранить в куке, по которой каждый микросервис сам определит что это за пользователь.
Идея микро фронтов заключается в том, что в какой-то любой момент один микрофронт удаляется например, другой загружается и работает, что-то вроде когда-то активно применяющийся в реализации фронтовой разработке. Хорошо что от них ушли 😁
@@chewed2024 хорошо, спасибо я только начинаю изучать этот подход архитектурный можешь что-то посоветовать посмотреть, почитать в связке с реакт
@@djorji7114 я сейчас на проекте, где, к сожалению, нет микрофронтенда ((
Погугли, на просторах интернет тонны информации.
Реакт не панацея для микрофронта, любой фреймворк можешь использовать и даже чистый is.
Главная суть, что твой сгенерированный js bundle имеет свой уникальный путь загрузки и должен скачиваться по этому пути, а в настройках главного контент сайта должна быть логика по его подключению в определённый контейнер
Это не совсем микро-фронтэнд. Это монолит с использованием разных фреймворков. Можно назвать его - ГИБРИД.
Микрофронтэнд - это когда каждый модуль вообще никак не связан с другими модулями, когда они собираются в разных проектах, а подключаются в хост-модуль например с помощью webpack moduleFederation плагина и лучше по какому-нибудь конфигу на лету. Или вообще подключаются непосредственно в html
Ну и еще про стор замечание. Это по функционалу - шина событий. Стор все-таки должен хранить данные.
А в общем спасибо за рассказ.
они изобрели?
@@user-pe5qr2wp4u - это способ включения стороннего модуля на страницу и ВСЕ! На этом функционал и возможности заканчиваются. Встречный вопрос, кто они?
Стоит дополнить, что реализация стора в глобальной переменной очень плохая идея. И да это не стор, а простой event emitter паттерн в который докинули коун, что тоже не хорошо.
@@alung414 Да, привязка к глобальному объекту window - это с точки зрения безопасности плохо. Надо искать другие варианты решения создания EventBus с глобальной областью видимости. А вот в качестве стора удобно использовать Mobx и пробрасывать его в модули через пропсы.
@@artsurkov или редакс )
что за извращения?)
оказывается Владилен знает толк в извращениях))
Кстати, не извращения) в продакшне такое используют нередко сейчас. Правда это почти никогда про разные фреймворки, просто разные команды занимаются разными частями одного большого сервиса, даже не обязательно, чтобы всё это на одной странице было и есть связующее звено между этим всем
@@DarkzarichV2 тут и есть главный посыл, никогда разные фрэймворки. А конкретно, что приведено в данном видео - это полный треш..
@@DarkzarichV2 да не, просто кругом извращенцы)
приложение по управлению приложениями с приложениями приложения приложений
Отличная тема! Мне бы очень хотелось посмотреть, как оптимально организовать совмещение различных css-библиотек, например, весь проект на Materialize, а вот какой-нибудь слайдер прикрутить с Bootstrap. Еще интересно было бы посмотреть про сессии в Ноде, по работе с куками в бэке и на фронте. Интересна интеграция в проект сторонней аутентификации, через гугл, к примеру. Интересна двухфакторная авторизация, с подтверждением по почте/телефону. Короче, жду))) Удачи тебе во всем!
Круто!! Спасибо! Очень доступно со стором получилось.
класс, сначала загрузим реакт, потом загрузим вью и через кошачью жопу будим их синхронить..... огонь идея, производительность должна расти на глазах :)))
А может за этим будущее))
Ну хз, обычно компонентам не требуется такой синхронизации, я думаю Владилен показал пример, как можно научить компоненты взаимодействовать при необходимости.
конечно производительность разработчика должна расти, иначе он просто не успеет за обновлениями всех технологий))
разве фокус с window, не костыль?
Привет) ну наконец новье))
Скоро будет больше)
Канал замечательный. Проштудировал все видео про создание CRM на vue, просто шикарно. Для начинающих самое то. Спасибо большое, ждем новых видео, особенно интересно по vue
Осталось SSR еще впихуить туда для счастья
Классное видео! Я вообще работаю на vue, но всегда было интересно посмотреть в сторону react.
Ах, какой красивый и умный мужчина)
Недавно начала работать с Vue.js. Наткнулась на это видео случайно, но была рада, что я не одна люблю извращаться :D
Было очень интересно, с меня подписочка)
Интересно! Всё больше и больше новых идей появляется в разработке)
А в реальном проекте что вместе window??
Поздравляю, уже 155к 🤝👏
Полезно, спасибо большое) Смотрю твои видео)
Красавчик Владилен! Как раз собираюсь разделить react проект на микросервисы. Очень полезным был видео. Спасибо👍
Владилен, в какой-то момент видоса я вдруг осознал, что полностью понял программирование. Все твои объяснения и весь код стал кристально ясным и понятным. По сути, программирование - это действительно своего рода общение;)
Спасибо Вам, дорогой друг
У меня лет 5 назад был SPA-проект на bootstrap+jQuery, в котором реализована идея плагинизации: сервер отдает список подключенных (оплаченных пользователем) фич-микросервисов, фронт читает этот список и загружает соответствующие js-файлы через "добавить в head тег "), которые "находят" себе место на SPA. Когда визуально компоненты можно разнести - это (как выше отмечалось) можно сделать и на 'ах. А вот когда в едином SPA что-то дорисовывается или меняет логику - это квест. К сожалению, с переходом на React пришлось "потерять" эту крутейшую штуку и прийти к фронту-монолиту. В итоге, даже если пользователь не оплатил какую-то фичу, по факту при загрузке страницы эта фича ему грузится (но не работает) - такое себе решение. Но уход от вермишели кода на jquery к компонентам на React в целом многократно прибавил надежности
Нихрена себе уже связанные вью и Реакт появились. Вроде все логично но за этими объяснениями лежит мощный опыт и практика 😁
- Мама, у меня микрофронтенд
видео суперское
Здравствуй Владилен.
Отличная идея, интересный контент. Делай ещё подобный контент.
*Л. а. й. к.*
Привет! Большое спасибо за крутой контент. Ты растешь, мы тоже не стоим на месте и хотелось бы видеть больше видео направленных на архитектуру веб приложений, выбор технологий и тд. (син-архитекторские штуки) Спасибо:)
Мне кажется, не совсем корректно описано. Микрофронтенды живут на своих собственных хостах и могут быть загружены в другие приложения лениво. Для этого используют ModuleFederation из Webpack 5. В конфиг заранее прописывают какие модули (микрофронтенды) могут быть запущены.
А еще, есть ощущение, что бессмысленно создавать микрофронты на разных фреймворках, тк придется скачивать бандлы всех этих фреймворков. Лучше писать на одном, а в конфиге указать какие зависимости у приложений одинаковые, чтобы юзер скачивал их не больше одного раза.
Ну да, здесь перепутаны понятия микро-фронтэнда и гибрида. Микро-фронтэнд - это модульная архитектура, как вы описали.
Воу воу!!!!!! нифига себе, Владилен я еще реакт не выучил до конца, а скоро в мэйнстриме будет реакт-свелт-вью-сингл-спа?:))))))))))
Маловероятно. Архитектура специфическая для больших проектов
@@VladilenMinin да, потому что данный архитектурный подход имеет место в очень крупных проектах, когда одной команде приходится ждать, пока задеплоит другая, пока соберётся (в плане сборки проекта) огромный монолит и т.д. Для проектов средней величины, наверное, мало смысла в подобном подходе.
Владилен, приятно видеть, когда вы, как человек, который обладает значительными знаниями и практикой в разных технологиях, честно и открыто говорите: "а вот это я не знал, но узнал, разобрался и вам, друзья, расскажу и покажу что это и как выглядит". Спасибо большое! Если будет желание/возможность/время, то не могли бы вы показать, как вместе работают: Nest - GraphQL-ArangoDB. Хотя бы на уровне: вот так подключать, вот так включать. Вообще ничего нет в рунете по теме. Спасибо :-)
Благодарю)
Может быть летом запишу что то на эту тему
@@VladilenMinin Спасибо, буду ждать :-)
Спасибо большое!!!
Это можно сделать по-другому. Под каждое приложение определенный репозиторий. Выбираем главный и подключаем в него придаточные через npm link (подключаются как dependencies), и подключаем в основной тегом в нужное место. Связь через общий стор, или стор каждого отдельного репозитория, если это написано на 1 фреймворке, либо кастомное решение стора в случае разных фреймворков
ну да и будет у тебя по итогу 50 репозиториев... а блин год прошёл)) что нового есть на эту тему?
Кромешный ад. Не дай господь мне столкнуться с таким чудом по работе. Мало того что мы в "рантайм" тянем каждый фреймворк на котором пишут приложение, так ещё и прослойки-адаптеры для них, чтобы это чудо запустилось. В итоге, получаем полуживое приложение, которое со скрипом общается меж своими внутренностями.
Единственный плюс лишь в том, что можно команду разработчиков за копейки собрать. Так что, если стоит задача собрать приложение в бюджет булки хлеба, и без планов на поддержку с вашей стороны - Вариант ещё может чего-то стоить.
Nx куда лучше работает с этим делом. Но тема и правда не очень приятная
что за бред я сейчас прочитал
@@anotherakuma Ещё как неприятно, но зато экономно. Только до сих пор в голове уложить не могу одно: Даже если у разношёрстная команда, где каждый пишет код на том, на чём может - Как это, в дальнейшем, проблему нехватки кадров решит. Да и со взаимозаменяемостью внутри команды проблемы большие приходят. Короче, я правда этого не понимаю...
Владилен, рассмотри еще Module Federation для микрофронтендов th-cam.com/video/pcY8-pDGLkI/w-d-xo.html
По сравнению с single-spa он позволяет шарить общие модули; каждое приложение это независимая webpack-сборка, и приложение "собирается" в браузере; позволяет строить интересные гибриды, когда вставляется компонента с другого приложения и в коде это выглядит как-будто используется компонента из соседнего файла.
Было интересно и полезно. Спосибо)))
При разработке на реакт ты сразу начинаешь страдать изза размера бандла, но придумали же микрофронтенды!! ТЕПЕРЬ можно и реакт библиотеку тянуть и вью, вот бы еще ангуляр подключать тогда приложение точно будет удобно и быстро работать
прикольно, не дай бог такое на реальном проекте встретить
Привет уже давно твой подписчик. Очень нравится твои видео, и как ты подаёшь материал. Сам начал записывать видео. Например про микрофронтенды, на angular. А так цель немного другая, стараюсь записывать всякие тонкости в технологиях, которые использую.
оно интересно, но в этом случае тащится бандл react и vue, зачем? чтобы скрестить одно с другим? даже если будет два приложения vue, то каждое в итоге либы потащит, общий размер кода получаемого юзером будет расти
microfrontend только для js-фреймворка? или я могу использовать его с проектом mvc
Не планируются ли видео по React Query?
вау ахуеть, теперь юзеру придется качать вью с реактом одновременно
Хороший способ усложнить систему на ровном месте
Я конечно, прилайкосил. Но было бы интересней сделать инкремент из вью части, а декремент из реакта, чтобы была двусторонняя связь.
Элементарно, добавляешь экшн в стор и кнопку в реакт. Будет работать)
Круто!
Забавно. Слышал, но ещё не видел. Спасибо.
Добрый день. Владлен
Подскажите можно ли
найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не
получится точно!
Простая карточная
игра (качество и сложность не важно. лучше что-то по проще..)
HTML, CSS, JS, MySQL
Описание:
Регистрация игрока, Минимум два участника
Спасибо
У меня была недавно немного иная ситуация. Даже не знаю, можно ли это назвать микрофронтендом. Есть несколько SPA страниц на Vue и React. Необходимо было создать отдельный виджет, который можно подключить к любой из SPA, причем без публикации в npm. Хотелось сам виджет сделать на Vue. Пришлось помучиться с реализацией, но уверен, если бы была видео-инструкция от Владилена, это было бы проще)
у меня есть проект на github. на который я включил по ошибке dependabot[bot]. и он у меня появился в авторах проекта!! это очень бесит... и как я не пытался его убрать. так и не получилось. подскажите как как убрать этот бот безопасности dependabot[bot]!!! плиз...
В целом прикольно, но мне кажется тяжело в использовании и особенно в рефакторинге, потому что при наличии нескольких либ, например река и вью, человек, который будет рефакторить должен будет знать и то и то. Плюс у приложух разная скорость загрузки, порядок загрузки компонентов и запросов нельзя будет поменять.
Владилен, подскажи пожалуйста, у тебя макбук 16 или 13 дюймов и во время разработки, подключаешь ли ты дом мониторы?
Что такое дом мониторы? Это мониторы для работы с DOM?
@@r45her домашние наверное 😆
Пока не разбирался, но очень похоже на неоправданное утолщение бандл сайза
Спасибо. Очень интересная тема! Может быть будет большой проект на микрофронтендах? )
Это пиздец извращение
имеет ли смысл писать разные части приложения на разных фреймворках? в чем преимущество?
Я думаю преимущество в то, что такие проекты потенциально можно переиспользовать и из них составлять целое приложение
Я считаю это извращением, но может понадобится когда нужно срочно написать за час модуль для vue, но в гугле ты нашел его только на реакте, тогда вполне годные костыли получатся)
Ты мыслишь масштабами мелких проектов. Это все актуально для энтерпрайз
плз. если можно... сделать урок, как создать свою библиотеку для React, хотя бы ui[с аккордеоном, модульными окнами, своим слайдером, ...args] => return с выгрузкой в npm, и с примером потом как её использовать. Понятное дело найдутся умники которые напишут : "это уже всё создано, зачем?". Но интересен сам процесс как создать свою ui библиотеку хотя бы и понять как их делать, шаг за шагом.
Инструменты использовать могут все, а создавать их единицы. (с) Неизвестный прогер :)
А то я что-то ничего толкового не нашел, какие -то лекции с достаточным количеством литража воды в уши ((
Спасибо огромное за Ваш труд.
Эйнштейн со своим "Делай просто, насколько возможно, но не проще этого (c)" вышел из чата 🙂
Использование нескольких библиотек на одной странице, это преимущество или недостаток?
Вариант с GraphQL , вместо windows?
Это все конечно интересно, но приложение, получается, будет весить больше, чем если бы оно писалось на одном фреймворке. Ведь так?
И зачем эти усложнения? Избыточная сложность, в 99% случаев это антипаттерн.
В теории микросервисов упоминались динамически создаваемые сущности с заданным временем жизни. Которые создаются, отрабатывают или падают, умирая передают состояние на новый круг. Но это наверное уже совсем другая история
Таак, а разве micro frontend архитектура не то когда условно есть роут с логином и роут с настройками пользователя и вы с помощью nginx ссылаетесь на разные SPA
Окей а если надо обрабатывать на вью нажатие в реакте или любые другие взаимодействия, как это реализовать? Через стор уже не получится
Почему? Так же создаёшь событие в сторе и подписываешься. Можешь попробовать через исходники поиграть
То чувство когда в коментах получил, ответ качественнее чем от автора.
Было бы интересней без single spa. Например используя webpack module federation.
Видел с ним реализацию
Если знаешь про плагин, то ты легко напишешь сам это)
Надо ли было при анмаунте отписываться от прослушивания событий?
Было бы круто об monorepo NX Angular & React + nest
А мне этот подход прям понравился, гибкость нереальная. А какой связавшись стор интересно можно использовать вместо window, чтобы это было не костыльно.
А какой практический смысл такого подхода?
Юзать две либы по одному маршруту, загружая обе библиотеки не очень рационально получается. Наверное, есть смысл разные либы всегда по разным маршрутам.
Уже отвечал в комментах. Перспектива создать либу таких мини приложений и из них конструрировать новые в разы быстрее
Но ведь такой подход сильно бьет по производительности и скорости загрузки?
франкенштейн - это .Надеюсь бог есть и он меня спасёт от микро - говна этого:)
А интересно, главные компоненты с ID React и Vue (index.html), может быть один или можно несколько и если несколько, то как это указать в react.app.js и vue.app.js? Это бы позволило обойти вот это вот представление глубокого дерева после написания всего приложения.
Владилен прошу написать видео по tensorflowjs. Плюсуйте кто поддерживает идею...
Если раньше даже при использовании одно фронтенд фреймворка собиралось "полмира". Теперь собираться будет вообще "весь мир". А потом удивляются почему на "сяоми тыщ за 10" приложение чуть сложнее hello_world безбожно тормозит (либо вообще не работает).
Контент интересен, спасибо.
Один только вопрос зачем, а самое главное нахрена?)) давайте один проект будет лепить команда по вью, команда по ангуляр и команда реакщиков) раньше мы плавали в фекалиях индусского кода, почему бы теперь не добавить ещё сюда и микро-фронтенд на разных фреймворках и соединять их йух пойми чем)
Ну как вариант сделать библиотеку приложений и из них составлять намного быстрее новые
@@VladilenMinin Спасибо за ответ. Конечно можно, но все же я думаю лучше взять один фреймворк и разбить его как Module Federation или в Angular вообще есть возможность разбивать по проектам приложение. За контент отдельное спасибо, меня спрашивали вопросы по микрофронтендам на собеседовании
Можно к JS подключить С++, С#, go, php и сверху как вишенку на торт движок Unity он сегодня модный.)
если ты с головой не дружишь то можно
Всем привет, я учу vue и столкнулся с проблемой при передаче объекта через props
например:
В родителе пишу
data: () => ({
person: {
name: 'Ivan"
}
})
В файле компонента пытаюсь вывести имя
{{person.name}}
props: ['person']
Но получают ошибку Cannot read properties of undefined (reading 'name')
но если отдельно передавать не person а person.name в родителе, то все работает
Мб кто-то подскажет где я ошибаюсь?
Ох уж эти модные словечки: микрофронтенд 😀
Ну как если оно будет грузить сайт жёстко
Я про память и сайт же медленно будет загружаться если слабы интернет
Было интересно узнать конкретные примеры, когда надо применять такую архитектуру.
никогда
если у тебя мега большой крупный проект, над которым работает много людей
@@ЕгорЛетов-т8м а по-моему дрочь какая-то
здрасте бро про flex flexLayout про библиотеке можеш как то подсветит пожалуйста
А общий store только в window можно хранить или есть еще способы?
Я думаю через сингл спа можно прикидывать глобальную переменную для приложений не вынося в виндоу
вижу тут многим не нравится использования window .
Можете пожалуйста объяснить что с ним не так?
может и document и localStorage нельзя юзать ?
Можно микросервисы на бэкенде? На русском мало инфы
Серьезно?)) Может просто не искал. Мы 300лет делаем уже эти микросервисы
Здравствуйте Владилен . Можете сделать видео про "как создать категории в react redux" будет очень полезно и интересно
Странно, что стор делает что-то с данными, а не просто хранит их. Если нажатие кнопки обрабатывается во VUE, то пусть там будут методы для этого. Иначе у нас еще 3 слой появляется.
Какие могут быть use кейсы этого паттерна?
В команду разработки кнопки "подробнее" требуется бэкэнд разработчик
Приходиться обращаться к window получается, что не очень хорошо, есть какой то другой вариант ?
Думаю можно придумать глобальную переменную только для разных приложений
Никогда не понимал, в чем проблема обращаться к window?
@@AlexStep глобальный объект, малоли там что то еще навешано будет и тд, конфликты и прочее
было интересно не столько про микрофронтенды послушать, сколько про то, как создаются хранилища для vuex или redux
Круто
Молодец, продолжай в таком же духе 👍🏾
жесть.
Гайд по превращению винегрета в винегрет из винегретов:
спасибо
Видео про single-spa
3 просмотра - 11 лайков?! Как всегда классное видео.
Ютуб не сразу обновляет просмотры)
Расскажи про параллельный режим React. Это реально прорыв.
Реакт + Вью? Такое бывает?
Для ознакомления с темой микросервисов - ок. В реальности их спользование под большим вопросом. Не, не так... под ОГРОМНЫМ вопросом (даже целой серией вопросов) - а надо ли оно вам действительно?
Да, в работе с таким не столкнешься
@@max_mgtow не только поэтому. Вот, на примере, который был рассмотрен. Разделил ты на блоки, у каждого свой микросервис. И ты такой: "О господи! Как же я охренителен!". А потом так - ЧИК! - и тебе надо сынтегрировать взаимодействие 2 микросервисов, потому как у каждого своя отдельная база и надо как-то синхронизировать состояния и обеспечивать транзакционность и т.д. и т.п. А ещё это не приносящий тонну бабок проект, а очень даже пилотный, а тебе надо уйма времени для поддержки твоего хитрого набора микросервисов. И ты такой уже тонешь в болоте этих проблем: "Оу... вечно я во что-то вступлю... то в дерьмо, то в пионеры...".
Така фигня, малята.
С точки зрения программирования - это просто интересно, но нежиснеспособно.
А вот с точки зрения бизнеса, к сожалению, очень даже реальный кейс. Например, есть две команды разрабов, одна знает vue, другая - react. Бизнес давно ждёт фич и по отдельности ресурсов каждой команды не хватает. Дальше начинается веселье.
У меня как-то был опыт по встраиванию angular приложения во vue приложение, которое, в свою очередь, работало на рельсах. В принципе, все работало и задачи бизнеса решало, а на производительность все клали.
У меня был опыт когда мы ангуляр 5 вставляли в ангуляр жс 😁
@@horusak4232 я вот думаю, а что если в качестве стейта использовать например эфектор, там же проблем не будет таких
А кто может объяснить зачем это нужно? Что это нам даёт? Потому что это как минимум странно.... Писать приложение на вью и реакт одновременно и пытаться это связать...
Ревью ? Или вьюакт ?