Evan You на Vue.js Live конференции рассказал, что в его планах сделать Vapor mode режимом по умолчанию. Отказ от Virtual DOM при этом будет поэтапный, и на это должно уйти несколько лет. Основные трудности будет предоставлять перевод таких компонент, как Transition, KeepAlive и др.

Если это произойдет, Vue.js будет, наверное, единственным фронтенд фреймворком, позволяющим работать как с Virtual DOM, так и без него.

Ранее Эван также заявлял, что API фреймворка для разработчиков при этом не изменится.

#evanyou #vapor #event

После прочтения первой книжки из списка выше

#humor #video

Пример использования CSS Layers, а также нового псевдокласса popover-open

Модалка

#css

Следующая большая офлайновая конференция Vueconf US пройдет 15-17 мая 2024 года в Новом Орлеане, США

Перед этим 1 мая Эван выступит на более именитой Accel Open Source конференции

#event #vuejs

Git - это распределенная система контроля версий, которая позволяет нескольким разработчикам сотрудничать над проектом.

Git Flow - это модель ветвления, которая обеспечивает структурированный подход к управлению и совместной разработке кода.

Git Flow состоит из двух основных ветвей: main (бывшая master) branch и develop branch. main ветка представляет собой стабильную, выпущенную версию кодовой базы, а develop служит интеграционной веткой, в которой разрабатываются новые функции и исправления ошибок.

Git Flow также может включать несколько других веток, таких как feature, release и hotfix. Ветви feature создаются для каждой новой разрабатываемой функции или улучшения и после завершения работы сливаются в ветвь develop. Ветви release создаются, когда готовится новый релиз, и сливаются в ветви main и develop, когда релиз готов. Ветки hotfix создаются, когда необходимо внести критическое исправление в main ветку, и сливаются обратно в ветки main и develop.

#git #gitflow

Фронтенд неисчерпаем

React взял для своего логотипа модель строения атома Розерфорда, предложенную им в начале 20 века. На ней показаны орбиты электронов вокруг ядра атома.

Однако данная модель довольно быстро была признана физиками недостоверной, противоречащей основным положениям электродинамики, подверглась корректировке и была полностью заменена с развитием квантовой физики, которая показала, что электроны вовсе не "шарики" и у них в принципе не может быть орбит (траекторий)

Таким образом, лого Реакта символизирует собой устаревшие и ошибочные знания и представления.

#react #logo

Volar 2 продолжает колбасить улучшаться

#volar

Кстати, Vue 1 и petite-vue не использовали/не используют Virtual DOM

petite-vue - альтернативный сильно урезанный вариант Vue (занимает 6Kb), предоставляющий тот же синтаксис шаблонов и модель реактивности, что и стандартный Vue, но специально оптимизированый для "внедрения" небольшого количества интерактивности на существующую HTML-страницу, полученную с сервера.

#petitvue #virtualdom

Где лучше всего в компоненте обращаться за данными на backend API - в теле script setup, или в хуке жизненного цикла onMounted?

В onMounted.

Потому что:

1. Нельзя просто так использовать await в корне сетапа, это требует наличия Suspense и делает компонент асинхронным и ненужно усложняет приложение. Поэтому приходится использовать промисный then или IIFE , что может нарушить общий code style, хуже читается и менее удобно.

2. Если в запросе будет непойманная ошибка, то в script setup её не обработать, в отличие от хука.

3. С точки зрения системного дизайна, script setup - это конструктор компонента. Запрашивать в нем данные из внешних источников нелогично.

4. Были неоднократные свидетельства, что сетевой запрос в script setup не работал правильно, а при переносе в onMounted - работал. Зависит от контекста, но тем не менее.

Источник: vue-faq

#tip #api #hooks #scriptsetup #mounted

Две версии происхождения порта 5173 у Vite dev сервера:

1. SITE
2. VITE (с V = римская "5")

#vite

Vite обогнал по числу GitHub звезд Webpack

Сравнение данной популярности различных JS сборщиков

#vite #webpack #bundler

Если вы хотите у некоторых страниц сделать свой title (и meta description), то это органично делается через routes и router navigation guard безо всяких useHead-ов

export const routes = [{
  name: 'about',
  path: '/about',
  meta: {
    title: 'My name is Bond',
    description: 'James Bond',
  }
}];

router.beforeEach((to) => {
  const { title, description } = to.meta;

  document.title = title || 'Default Title';

  document
    .querySelector('head meta[name="description"]')
    .setAttribute('content', description || 'Default Description')
})

#router #tip

Еще один пример функциональности современного CSS

Мы уже рассказывали, как избежать дерганий экрана из-за появляющегося/исчезающего скроллбара при открытии модального окна. Вот еще один вариант по условию влиять на глобальные свойства через :has()

#css #tip