- Видео 10
- Просмотров 35 327
Мастерская разработчика
Россия
Добавлен 17 окт 2015
Веб разработка, проектирование приложений и систем, самоделки, электроника и немного 3д печати
Около web'a #1. Максим Ульянов. Про Api gw, ab тесты, feature toggle
Этим видео я запускаю новый формат для этого канала.
Около web'а формат, в котором я обсуждаю какие-либо проблемы и задачи, связанные с веб технологиями. Чаще всего это будут стримы и их записи без обработки.
В данной серии мы обсудим api gateway, feature toggle сервис и ab тесты. У нас на стриме Максим Ульянов!
⚡ Ссылки ⚡
Мой канал в телеграмме - t.me/developers_workshop
Канал Максима в телеге - t.me/ulyanov_life
Около web'а формат, в котором я обсуждаю какие-либо проблемы и задачи, связанные с веб технологиями. Чаще всего это будут стримы и их записи без обработки.
В данной серии мы обсудим api gateway, feature toggle сервис и ab тесты. У нас на стриме Максим Ульянов!
⚡ Ссылки ⚡
Мой канал в телеграмме - t.me/developers_workshop
Канал Максима в телеге - t.me/ulyanov_life
Просмотров: 370
Видео
🙅♂️🙆♀️ VUE 3 Ролевая модель, ограничения доступов
Просмотров 11 тыс.2 года назад
Видео о том, как организовать ролевую модель в веб приложении, в частности на фронте. Как настроить доступ по ролям или возможностям. Как прикрутить это красиво и удобно в spa приложения на VUE 3 ⚡ Ссылки ⚡ Мой канал в телеграмме - t.me/developers_workshop Видео про supabase - ruclips.net/video/g5dUVbCd90Y/видео.html Github - gitlab.com/Sticker0ne/vue-scope-access
🔍 VUE 3 публикуем компоненты в NPM
Просмотров 1,6 тыс.2 года назад
Видео о том, как подготовить проект и опубликовать npm пакет с компонентами, написанными для vue 3 Про конкурс: скоро на youtube канале будет 100 подписчиков, и по этому я решил устроить розыгрыш. Но розыгрыш будет происходить среди подписчиков моего телеграм канала t.me/developers_workshop , да вот такой я странный:) Для того, чтобы принять участие достаточно подписаться в телеге, для того, чт...
🔍 VUE 3 + бесплатный хостинг + бекенд + сокеты = ♥️
Просмотров 2,3 тыс.2 года назад
В этом видео я рассказываю про разработку statefull SPA приложения на Vue 3 с бесплатным хостингом на github pages и netlify, с бесплатным облачным бекендом на supabase и синхронизацией через websocket ⚡ Ссылки ⚡ Мой канал в телеграмме - t.me/developers_workshop Видео про шаблоны страниц - ruclips.net/video/C5VIL2yyzVQ/видео.html Репа - github.com/sticker0ne/vue3-click-counter Github pages host...
🐞🔍 VUE 3 hacks to improve debug
Просмотров 1,3 тыс.2 года назад
Видео посвящено лайфхакам для упрощения отладки во Vue 3 ⌛ Таймкоды ⌛ 0:00 - Вступление 0:12 - Доступ до $console в шаблонах 1:46 - Доступ до роутера в консоли браузера 3:11 - Composable логгер lifecycle хуков 4:00 - Время подписаться на канал (и телеграм), нажать на колокольчик ⚡ Ссылки ⚡ Мой канал в телеграмме - t.me/developers_workshop Репа - gitlab.com/Sticker0ne/vue-spinner/-/tree/debug-hacks
VUE3 Лучший аккордеон🪗
Просмотров 3 тыс.2 года назад
Видео посвящено проектированию и разработке компонента аккордеона с анимацией, SSR, отсутствием зависимостей во Vue 3 ⌛ Таймкоды ⌛ 0:00 - Про аккордион 1:09 - Заставка 1:14 - Ссылки на гитхаб и гитхаб пейджс 1:52 - State flow and v-model control presentation 3:51 - State flow and v-model control code 5:42 - Animation presentation 8:23 - Animation code 10:53 - SSR and reactivity presentation 13:...
Vue3 крутейший лоадер/спиннер
Просмотров 3,2 тыс.2 года назад
Видео посвящено анализу и разработке компонента лоадера/спиннера во Vue3 ⌛ Таймкоды ⌛ 0:00 - Вступление 0:30 - Для чего будем использовать? 0:49 - Чего хотим от компонента? 1:38 - Базовая реализация 2:44 - Фулскрин отображение 4:27 - Телепортация 8:04 - Перехват и удержание фокуса 12:40 - Выводы ⚡ Ссылки ⚡ Презентация - slides.com/sticker0ne/vue-spinner Репа гитлаба - gitlab.com/Sticker0ne/vue-...
Правильные page layouts во Vue
Просмотров 10 тыс.2 года назад
Видео посвящено анализу и разработке системы page layouts во Vue 3 ⌛ Таймкоды ⌛ 0:00 - Введение 0:10 - Обзор видео 1:01 - Что такое шаблоны? 2:17 - Требования к системе шаблонов 3:41 - ПРОСТО СЛОТЫ обзор подхода 4:19 - ПРОСТО СЛОТЫ реализация подхода 4:58 - ПРОСТО СЛОТЫ демонстрация, проблемы 6:18 - ВОТЧЕРЫ, КОМПЬЮТЕДЫ обзор подхода 8:00 - ВОТЧЕРЫ, КОМПЬЮТЕДЫ реализация подхода 9:12 - ВОТЧЕРЫ, ...
Как здорово, что вы живой, я думал что-то случилось. Вы замечательный преподователь, желаю вам успехов и по-больше баловать нас видосами, у вас талант.
Спасибо большое, мне очень приятно! С видосами напряженка, да :) Иногда постики в телеграм канал попадают, по ним проще определять, жив я или нет :)
якби українською... но круто дякую тобі
Если бы я знал... Спасибо и тебе за комментарий!
Вместо объекта со значениями true надо использовать Set
@@RomanDawydkin до определенной версии у вью были проблемы с реактивностью в сетах
Пора выпускать ролик 😁
Написал комментарий) где видео с кастомной директивоЙ?
такое себе объяснять просто написанный код - думал с нуля будем делать поэтапно смотреть что получается
Ну во первых этот код написал я Во вторых это обзор на нпм пакет в третьих очень долго делать поэтамно, такие штуки, обычно на стримах в четвертых - сделай лучше, я верю, что у тебя получится так, как хочешь ты
@@dev-workshop есть ребята которые crm создают и видосы по 7 часов )) а тут мы говорим про компонент аккордеона ) Мне было интересно, как ты сделаешь по шагам, чтобы видеть всю картину, но ты поленился)
@@eg0ist_665 А давай теперь посмотрим, пользуется ли кто-то этими crm? а пользуется ли кто-то библиотекой компонента? Если бы я поленился, то ни видео ни компонента не существовало бы
@@dev-workshop дело не в этом вообще, я тебе высказал свое мнение о том, что показывать просто готовый результат и его комментировать не интересно смотреть, особенно новичкам. Кому интересно пусть смотрят)
@@eg0ist_665 Спасибо за твое мнение
Слишком всё усложнено. Можно сделать телепорт спиннера сразу в корень body и он будет поверх всего контента. Далее назначаем переменную: let isSpinner = ref(false); - тип можно не указывать, т.к. явно задано начальное значение. Таким образом, в исходном состоянии спиннер не виден. <teleport to="body"> <AppSpinner v-if="isSpinner" /> </teleport> Следующий шаг. Меняем значение isSpinner в функции получающей данные. const getSomeData = () => { // показываем спиннер isSpinner.value = true; try { // Далее код получающий и обрабатывающий некие данные с сервера или из стора } catch (err) { console.log(err) } finally { // теперь убираем спиннер isSpinner.value = false; } } Вызов компонента спиннера можно разместить в основном HTML-файле. А чтобы доступ к isSpinner был из любого компонента или лейаута, можно добавить isSpinner в store. Тогда не нужно будет усложнять код провайдами и инжектами. Можно сделать точку назначения переменной <teleport :to="destination"> и в переменной destination указывать, в корень какого элемента хотите переместить спиннер.
Самый имбовый способ разделить роли - разные url для разных ролей. Все остальное (в том числе то, о чем говорит автор) для очень простых приложух.
Ну вот здесь я бы поспорил) Возьмем TeamCity, явно не очень простое приложение или гитлаб В зависимости от разных доступов на одной странице в интерфейсе, даже в одной менюшке есть разный набор кнопок
@@dev-workshop я тут не прав в том смысле что слово "простые" тут не подходит. Ща попробую сформулировать точнее: если у вас интерфейс админа и юзера отличается целиком а не только лишь парой кнопок и менюшкой, то имеет смысл опереться о url ролевую модель. Это не подойдет лишь в случае если религия не позволяет наблюдать "/userRole/dashboard" в адресной строке. В остальном композиция компонент позволяет прекрасно переиспользовать код и не париться по поводу прав. Я не говорю что та модель которую вы рассмотрели не жизнеспособна, нет, она прекрасно работает но только в ряде случаев.
@@ESTechnonet Дополнив текущую реализацию можно сделать ограничения и по урлам, такми образом будет комбинированная система для накста очень удобно через pageMeta ограничивать доступы и мидлваркой их отлавливать
Я мб не внимательно смотрел, а чем не устраивает стандартная реализация vue-router ? ``` { path: '/', component: LayoutDefault, name: 'Layout Default', children: [ { path: '/', component: ViewHome, name: 'Home' }, { path: '/example/:id', component: ViewExample, name: 'Example' }, ] }, ```
Вопрос, при такой системе лейаутов, если обновлять страницу то прокрутка страницы возвращается в самое начало. В других проектах, если ты прокрутил допустим до середины, то после F5 страница туда же возвратится. Как можно исправить?
@@mster_r воспользоваться другими системами лейаутов, про которые вы написали?)
@@dev-workshop но мне нравится эта система, да и нет других на примете) Я имел ввиду обычное поведение браузера, под другими проектами. Просто неожиданное неудобство такое тут возникло, думал может известно решение. Или может подскажешь как бы решил, в какую сторону подумать?
@@dev-workshop А может вообще я сам где напортачил, и проблема не от лейаутов. Встречалось ли тебе такое?
@@mster_r все очень индивидуально, нужно смотреть проект и его код) всегда можно что-нибудь придумать, например хранить в sessionStorage последнее значение позиции скролла и потом при маунте заставлять браузер скролиться на эту позицию)
@@dev-workshop понял, спасибо, тоже думал в эту сторону. Для меня показательно уже то, что с проблемой скроллинга столкнулся только я)
на сколько обоснован динамичесикй импорт? прочему не обычный?
на столько же, на сколько обоснован code splitting
Что то всёравно плохо работает этот метод, dts у меня так и не собрался. Видимо, придётся отложить напотом эту задачку.
Сергей, большое спасибо вам за данное видео, оно прекрасно! Показана проблема, показаны разные варианты решения, их плюсы и минусы, разобрана реализация каждого подхода, идеально! Жаль, что вы делаете так мало контента, у вас определено талант!
Большое спасибо, мне очень приятно!) Проблемы с распределением времени, нужны помощники в монтаже)
Интересное видео, спасибо
Шикарно!! Спасибо
Пожалуйста)
Видео полезное, для новичком будет очень здорово, но есть пара нюансов: 1. Глобальный скоуп работает только в рамках шаблона. В скрипте все равно придется доставать хуком или еще как-либо. 2. В данном случае, хоть сама задача авторизации и является глобальной, все таки стоит еще задуматься о том, чтобы сделать хуки импортить от туда хук + енам. Тем более, если делать директиву или компонент обертку, то это уже не выглядит таким накладным)
1. Полностью согласен, это была распространенная практика со 2 вью, в третьем она почти забыта 2. Такой задачи не стояло, видео и так объемное)
Информативные видео для новичков! Спасибо!
Пожалуйста) Подписывайся на канал в телеге)
Здравствуйте, можете сделать пожалуйста видео про авторизацию.
Здравствуйте, может быть ближе к лету, если найду редактора для видео
Привет! Очень жаль, что видео перестали выходить довольно продолжительное время😢 Надеюсь, еще появится тут новый, полезный контент!❤
Привет! Может быть если я найду того, кто будет монтировать видосы, тогда наладится регулярность ))
Ты мне открыл глаза. 😳🥹 Но я нифига не понял, но к этому иду. Я начинающий. 😅 Пойду посмотрю все видео. Надеюсь есть где пишешь все это..
Эх, где это видео было раньше. Столько времени убил чтоб самому допереть до этого)) спасибо. Ещё удобно добавить группы скоупов, особенно если из много и юзеры сами будут рулить доступами
группы скоупов это уже роли) но мы тоже делали группы, но только чтобы отобразить группой в интерфейсе, а у пользователя связи были только со скоупами)
@@dev-workshop думаю все зависит от сценария. Я пилю щас crud saas и там например у каждого аккаунта рожаются роли и дефолтные пермишены. и если взять скажем роль админа который имеет доступ везде то там без групп получится что надо назначать простыню доступов на пару экранов) а если таких ролей будет несколько то все резко станет сложно) а так я завел группы и если юзер может все с crud сущностью то просто вешаю на нее группу. но в конце концов с бека оно конечно выпрямляется все и фронту прилетают только пермишены.
@@Dikodance интересное решение. Да, я скорее к тому, что с бека прилетал один тип сущностей, по которому определяются доступы. Для единообразия
Полезное видео, спасибо! Жаль, не так много контента на канале
Привет! Спасибо, в связи с работой сложно выделить время на видосики
Ну такой себе спиннер, скорей как у деда старого
Что именно тебе не нравится в данной реализации?
🔥🔥🔥
А нужна ли вообще директива для доступов? По моему получится велосипед в виде кастомного v-if
Скорее философский вопрос) Да, это будет кастомный v-if. Да, можно использовать просто v-if. Но идея директивы для доступов разделить условное отображение связанное с бизнес логикой и условное отображение связанное с ролевыми доступами Плюс по такой директиве легко прочитать доступы прям в шаблоне, тогда как условия v-if часто заворачиваются в компьютед свойства, для которых нужно лезть в код
Посмотрев это видео, понял сколько мне еще учиться xDD
А если допустим это ui-kit в котором сборник компонентов, то как их экспортировать? И есть такие случаи когда компоненты сборные, состоящие из нескольких из этой же библиотеки.
Можно докрутить файлик buildLibrary.ts Для публикации библиотеки компонентов я бы пользовался этим видео в ознакомительных целях, и докручивал бы под себя
@@dev-workshopтам просто когда экспортируем компонент в котором есть зависимости от других компонентов. То при импорте в другом проекте такого компонента вылезает предупреждение ('[Vue warn]: resolveComponent can only be used in render() or setup().') и получается что сборный компонент нормально не отрабатывает.
@@stanislav_ovv очевидно, что для компонентов с зависимостями нужны каки-то изменения
@@dev-workshop Проблема решилась, что в том проекте где импортировали ui-kit в конфигурации вебпака надо было прописать алиас, resolve:{ alias:{ vue: path.resolve('./node_modules/vue') } }
@@dev-workshop А так сделали первую версию UI-KIT по тому же принципу, что описан в видео, только на JS. Следующий шаг наверно будет Storybook и TS
Крутая тема , давай продолжение , видео понравилось !!!
Динамические группы/роли/скоупы то еще зло на деле, хоть и звучит красиво и как бы логично))
Я согласен, но иногда от этого никуда не уйти)
Спасибо автору! Круто когда люди делятся открытиями с обществом) Мне интересна тема для следующего видео) если конечно вопрос стоящий: насколько успешно поисковик считывает контент с SPA приложений и как лучше подавать контент для поисковика в vuejs?
Привет! Спасибо!) Практически не на сколько. Хоть все и говорят, что вот вот индексаторы научатся в спа - это все не правда Все, что должно попасть в индексацию должно быть ssr
Классный контент, помогает, продолжение этой части с тайпскриптом нужно!
С этим лайоут системой столкнулся на такое когда меняется хэш (window.location.hash) загружает снова лейоут и страница фризится
Надо смотреть, что в этот момент происходит с роутером вьюшным
@@dev-workshop Страница состоит из двух блоков ЛЕВАЯ часть просто список линков по клику вызывается функция которая ищет в DOM element(ПРАВАЯ часть) если находит делает scroll ПРАВУЮ часть и потом добавляет в адрес localtion.hash = '#somehash' (пробывал и $router.push({hash:''})
ты лучший ❤
Скажи пожалуйста, а во "Vue" отладки сродни той что есть для js не существует? В случае с js в браузере зашел в devtools -> источники -> выбрал файл и вперед, можно по шагам смотреть как где чего работает. Как в случае с vue такие вещи смотреть? Просмотра состояния переменных vue через Vue Devtools несколько недостаточно как по мне..
Эта отладка никуда и не ушла) пропиши в нужном тебе vue файлике "debugger;" и открой devtools в хроме и будет тебе счастье
сделаешь подробнее уроки с vue laravel по этой теме?
Привет! Я не особо умею в PHP :( по этому скорее нет. Плюч видео сейчас временно не выходят
Видос очень классный и суперский! Хотелось бы видеть такое же видео, только про модалок (как в видео). Как по мне они очень нужны в любом проекте, и важно чтобы была такая же крутая реализация модалок, которую можно использовать в vue 3 или vue 2
с модалками интересно, да) Рад что понравилось!) Сейчас есть некоторые сложности со временем, но я добавлю в список)
Привет! Пытаюсь применить указанный 3-ий способ с воем проекте. <Component :is="route.meta.layoutComponent"> <slot /> </Component> Тут TS ругается на "route.meta.layoutComponent": Type VueElement | undefined is not assignable to type string | ComponentDefinition Буду благодарен за комментарий.)
Привет! А ты не забыл? declare module "vue-router" { interface RouteMeta { layout?: AppLayoutsEnum; layoutComponent?: VueElement; } }
Топич, спасибо большое за ролик
Рад, что понравилось)
Огонь!
Рад, что понравилось)
Есть лайот шапка внутри инпут с выпадающию меню и у каждой страницы выпадающию меню свой. Как реализовать такое отношение?
либо через внешний стор, либо сделать композабл с замыканием состояния и на каждой странице обновлять данные для выпадашки
@@dev-workshop замыкание состояние страницы?
@@HalauLilau нет, пишешь замыкание внутри которого используешь, грубый пример const dropdownData = useRef(); export function useLayoutDropdown() { function updateData(newValue) { dropdownData.value = newValue; } return reactive( { dropdownData, updateData }) } затем в лейауте вызываешь useLayoutDropdown и используешь из него данные и на страницы используешь useLayoutDropdown и обновляешь данные. Но это очень грубый пример, здесь получается синглтон, который нельзя использовать, если у тебя ssr Но никто не мешает создать такое замыкание в контексте запроса
@@HalauLilau еще можно рулить данными для выпадашки на уровне роутера
@@dev-workshop у меня ssr нет. Оказывается не только данные и иинпуты и селекты разные. Например страница клиент там в дропдауне фильтр поле дата, город, номер. А проектах другие поля в дродауне
офигенный контент, пожалуйста не забрасывай канал, очень полезные видео, а не просто пересказ доков или объяснения как через v-for список вывести !
Привет! Спасибо за отклик! Я постараюсь, но со временем очень большая напряженка
Не пойму к чему такие сложности. Можно же проще написать и принцип mount/unmount лайота с компонентами такой же будет: в App.vue <router-view /> в router.js (все компоненты пихаем в children нужного layout) const routes = [ { path: '/', name: 'baselayout', component: BaseLayout, meta:{ layout: BaseLayout }, children: [ { path: '/page1/', name: 'page1', component: () => import('@/views/Page1.vue') }, { path: '/page2', name: 'page2', component: () => import('@/views/Page2.vue') }, ] }, { path: '/guard', name: 'guard', component: () => import('@/views/guard/GuardIndex.vue'), meta:{ layout: AdminLayout }, children: [ { path: '/page3.', name: 'page3', component: () => import('@/views/Page2.vue') }, ] }, ]; в BaseLayout.vue (transition конечно здесь лишний. просто допом оставил) <Header /> <router-view v-slot="{Component, route}"> <transition name="slide" mode="out-in" > <keep-alive> <component :is="Component" :key="route.path" /> </keep-alive> </transition> </router-view> <Footer /> И все работает и при хождении по дочерним вьюшкам layout не размонтируется каждый раз, а только тогда пока перехожу на дочернюю вьюшку другого layout. Глюков с переходами при таком подходе пока не увидел. Автор, поправьте, если что-то не так с таким подходом, так как не очень хорошо шарю за vue. Спасибо за видео
Интересненько!!! Спасибо, тебе, добрый человек!
Рад, что понравилось!
Спасибо!
Пожалуйста:)
Спасибо! Очень круто!!!!
Рад, что понравилось)
Вопрос (оффтоп): у меня есть layout (шапка и футер) В котором есть компонент (страница с данными). В шапке тоже есть свои данные, все прекрасно работает. Но я хочу передать некоторые данные из чайлд компонента в layout, дабы отобразить инфу про страницу в layout. Не хочу лезть в vuex. Как можно передать данные из чайлда в layout?
Это плохая практика, лучше делать это каким-то отдельным инструментом. Но как вариант, можно воспользоваться либо ивентбасом Либо сделать синглтон композобл и воспользоваться им в шапке и на странице. Но это плохая практика, столкнетесь со многими проблемами :)
@@dev-workshop ок спасибо
зря перестал видосы выпускать реально кайфовые
Спасибо! Скоро будут еще
а почему в последнем подходе сперва маунтится шаблон страницы, а потом после него шаблон леяута, если страница - это дочерний компонент леяута?
Потому что сначала маунтятся самые глубокие дети и потом всплывает наверх) medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f
Привет. Классный контент пилишь). А можешь про модульную архитектуру запилить видос? Заранее пасяб)
Привет! Спасибо! А что ты имеешь в виду под модульной архитекторой? Разделение приложения на модули?
@@dev-workshop ага
Спасибо! полезные знания
Пожалуйста!)