Доклад Дениса Чернова про композаблы с митапа MskVue.js #13

#event

📦 Vue Language Tools 3.0 was released

... but with regressions. Waiting for version 3.0.1

Changelog: https://github.com/vuejs/language-tools/releases/tag/v3.0.0

Прерываюсь с отпуска с очень грустной новостью: NuxtLabs де-факто на зарплате у Vercel теперь. Я не буду тут описывать почему это плохо. Кто понял тот понял. Но на зарплате Vercel-я теперь все основные Nuxt мейнтейнеры: Энтони, Пуя, Себастьян и Даниель.

https://github.com/nuxt/nuxt/discussions/32559
#iwanttocry

Вышла Vue v3.6.0-alpha в которой уже есть Vapor mode

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

Основная идея Vapor Mode - работать с DOM в браузере напрямую, а не через VDOM, что теоретически должно дать ускорение и меньший размер бандла. На большинстве Vue приложений ни то ни то, наверно, особо заметно не будет, даже с бенчмарками

Тем не менее, наш ответ Solid.js и Svelte.
С маркетинговой точки зрения абсолютно верный шаг.

#vapor #vue

Отпуск завершен. Возвращаюсь в рабочий ритм. Но сейчас самое главное то о чем многие меня спрашивали и ждали.
Я собираюсь сделать новый цикл интенсива по вкату во Vue. Сейчас это не объявление набора, но ждите его примерно с 10-ых чисел августа.

Для кого:
1) Те кто уже умеют писать на других фреймворках, но ему любопытно познакомиться со Vue.
2) Вы уже имеете неплохую базу JS/HTML (уровень умение пояснить за стрелочную и обычную функцию, а также знание основных HTML-тегов).
3) Вы уже пишете на Vue, но недавно или боитесь что у вас много пробелов (будем прорабатывать базу).

Формат: звонок с группой, но стрим будет и общедоступный
Домашняя работа: будет, но проверка по желанию
Протяженность: 2 недели, +- каждый день по 2-3 часа по вечерам.

Что узнаем:
1) Получим основную и прочную базу по Vue
2) Получим набор бестпрактисов для проектов
3) Ознакомимся с основной окружающей экосистемой

Чего не будет:
1) Тестирования (это заслуживает отдельной работы)
2) То что полезно при написании своих библиотек/ui либ (Storybook, tsup и тд, потребует слишком много специфичных моментов для сжатого интенсива)
3) Глубокой подкапотной работы механизмов Vue (однако база будет дана достаточная для применения на практике)

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

Прошлая неделя оказалась знаковой

#vite #webpack

Дорогие участники чата!

Мы открываем набор новых спикеров и докладов или попросту CFP❤️‍🔥

Оставить свои заявки можно

👉🏻 ЗДЕСЬ 👈🏻

Мы будем очень рады видеть новые лица и новые темы!

Команда Msk Vue.js обнимает вас❤️‍🔥

Думаю многие уже слышали про Vue Vapor (режим работы без VDOM) и он уже проделал неплохой путь:
1) был в закрытой репе и мы ждали хоть каких-то деталей
2) открыли отдельный репозиторий частично
3) дополнили этот репозиторий всеми фичами (компайлер и рантайм)
4) мучительно долго ждали пока репозиторий сольют в главный и это происходило в отдельной ветке
5) ждали каких-то вестей, когда он наконец-то войдет в минор...
6) и вот мы имеем Vapor в альфе
— вы здесь —
7) Vapor выходит в бета версию, а после и релиз в экспериментальны состоянии

Что же нас отделяет от 7ого пункта? Стабилизация. Но как за ней следить?
А вот об этом и пост: пару дней назад появился публичный роадмап по стабилизации Vapor. В нем и можно будет отследить состояние дел.
Ну и в целом сейчас в ишьюсах репозитория целая россыпь вещей связанных непосредственно с Vapor режимом.

Ждем и надеямся, что все пройдет без затыков

Небольшой лайфхак с лайфсайклом

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

Наверное вы периодически могли видеть что-то подобное

const onScroll = () => { /* ... */ }
onMounted(() => {
  window.addEventListener('scroll', onScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', onMounted)
})

И данный код кажется слегка изыточным, а порой это бывает и с запросами и тд. И есть ощущение что немного лишнего вываливается в общий скоуп компонента. Однако можно сделать код чуть более семантичным и собранным:

onMounted(() => {
  const onScroll = () => { /* ... */ }
  window.addEventListener('scroll', onScroll)
  onUnmounted(() => {
    window.removeEventListener('scroll', onMounted)
  })
})

Да. Теперь связанные сущности чуть лучше упакованы и да это работает. А если у вас несколько листенеров (такое бывает при обработке форм в ручную или D'n'D) можно доработать до

onMounted(() => {
  controller = new AbortController();
  window.addEventListener('scroll',  () => { /* ... */ }, { signal: controller.signal })
  window.addEventListener('resize',  () => { /* ... */ }. { signal: controller.signal })
  window.addEventListener('click',  () => { /* ... */ }. { signal: controller.signal })
  onUnmounted(() => {
    controller.abort()
  })
})

это позволит вам разом отключать всех подписчиков разом без нужды давать каждому отдельное имя (работает и с запросами и прочими браузерными API)

Надеюсь это поможет сделать вашу кодовую базу чуточку лучше

#лайфхак #composition