Использовать <script setup> во Vue 3 можно вместе с обычным блоком <script>

<script setup>
  // Composition API
  import { ref } from 'vue';
  console.log('Setting up new component instance');
  const count = ref(0);
</script>

<script>
  // ...and the options API too!
  export default {
    name: 'DoubleScript',
  };
</script>

Это работает потому, что блок <script setup> компилируется в функцию setup() компонента.

Есть несколько причин, по которым вы можете захотеть сделать это:

- Использование Options API - не всё имеет эквивалент в Composition API, например inheritAttrs. Для этого можно использовать defineOptions.
- Выполнить код один раз - поскольку setup() выполняется для каждого компонента, если у вас есть код, который должен быть выполнен только один раз, вы не можете включать его в <script setup>. Однако вы можете поместить его в обычный блок <script>
- Именованный экспорт - иногда удобно экспортировать несколько объектов из одного файла, но это можно сделать только с помощью обычного блока <script>.

#tip

Развитие в GitHub звездах Vue экосистемы за 2023 год.

Vue Element Admin - китайский продукт на Vue 2.6

#ecosystem #rating

Документалка, как создавался Vue.js, довольно интересно.
Есть русские субтитры

https://youtu.be/OrxmtDw4pVI

#vuejs #evanyou

Сегодня опубликован перевод официальной документации VitePress на русский язык

https://vitepress.dev/ru/

Перевод выполнен @dragomano

#vitepress #translation

Не так давно Antony Fu создал eslint-flat-config-viewer, который официально теперь часть ESLint 9 - ESlint Config Inspector

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

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

#antfu #eslint

Один из крупнейших облачных хостеров серверных JavaScript приложений Render добавил поддержку Bun в добавок к Node.js

#bun #render

Proxy - объект, появившийся в JavaScript начиная с ES6, и позволяющий сделать над объектом "обертку" для перехвата операций get, set, defineProperty и некоторых других.

Именно он используется во Vue 3 Reactivity API для реализации Reactive (и Ref на объектах).

Однако за это приходится платить производительностью. Доступ к свойству объекта через Proxy примерно в 30 раз медленней, чем просто к свойству объекта.

let sum = 0

// 1. proxy access
const point = new Proxy({ x: 10, y: 20 }, { get: (t, k) => t[k] })
 
for (let i = 0; i < 100_000; i++) { sum += point.x }

// 2. direct access
const point = { x: 10, y: 20 }
 
for (let i = 0; i < 100_000; i++) { sum += point.x }

Это из-за того, что Proxy плохо поддаётся JIT оптимизации.

Разница в производительности простого объекта с Reactive будет еще больше.

Поэтому использовать ref/reactive на статичных данных или данных, которым не нужна реактивность (например, для хранения JWT токена в сторе) - не очень разумно.

#tip #performance #benchmark #proxy #reactive

Тем временем работа над Rolldown идет своим чередом.

По замерам билд с sourcemaps на Rolldown идёт уже быстрее, чем на esbuild

Также перевел и опубликовал интересный твит создателя FormKit Джастина Шрёдера по теме. Кстати, это первая статья о Rolldown на Хабре.

#esbuild #rolldown #vite #article

Во всех браузерах кроме Firefox реализован Fetch Priority API

Это атрибут fetchpriority на тэгах img, script, link, который указывает, насколько приоритетен данный ресурс для загрузки.

Это важно в первую очередь для метрик Core Web Vitals, а именно - LCP. Если элемент LCP - картинка, имеет смысл указать ей fetchpriority="high".

Учитывая, что ресурсов на странице может быть много, а браузеры выделяют на сетевые соединения около 5 потоков на один домен, то может образоваться очередь, и ваша LCP картинка появится не сразу.

Также можно указать fetchpriority="low" для картинок вне области видимости, - в том числе, в слайдере.

#tip #optimization #webvitals

Только недавно вышел Vite 5.0, как вот опять пошел отсчет.

Как обещал Patak, в шестой версии Vite частично и опционально может появиться Rolldown

#vite

Что такое многопоточность, и что такое асинхронность?

Многопоточность - это когда программист может создать отдельный поток и запустить в нем свой определенный код. Например, можно создать два потока, один в бесконечном цикле выводит в консоль "Поток А", а второй - "Поток В". Эти строки будут чередоваться в выводе. Можно задать приоритеты потокам, и тогда поток в приоритетом 3 будет выводить сообщения в 3 раза чаще, чем поток с приоритетом 1.

Данные два потока должны выполняться одновременно, но это условно. Потому что если потоков 10, а процессор двухядерный с двумя своими потоками на ядро, то чисто физически больше 4 одновременных потоков выполнять нельзя. Поэтому потоки делятся на кусочки кода, и они выполняются по очереди - это называется конкурентностью.

В мире JavaScript cтановиться в одну очередь потоки могут на уровне JS рантайма, OS, CPU. Обычные десктопные приложения (например, IDE) тоже бывают с хорошей поддержкой распараллеливания на многоядерные процессоры - и тогда они используют CPU максимально эффективно, или нагружающие только одно ядро. В последнем случае апгрейд процессора на более современный многоядерный почти ничего не даст, если у старого и нового примерно одна частота.

Асинхронность - это когда есть некая неблокирующая функция, точное время исполнения которой неизвестно. И программист может указать код, который должен выполниться после исполнения данной функции (передать callback). Промисы и async/await это нетривиальные, но всё же просто удобные обертки над данной логикой.

Итак, при асинхронности обычно есть некая пограничная функция, зависящая от внешних обстоятельств (fetch, nextTick, fs.readdir, setTimeout). Её "псевдопараллельное" исполнение в одном потоке вместе с основным кодом обеспечивается механизмом Event Loop.

Таким образом, это абсолютно разные вещи как по целевому назначению, так и по использованию. Асинхронность в JavaScript реализована через callbacks, промисы и async/await, многопоточность или её подобие реализуется райнтаймом (Web workers, worker_threads).

Асинхронность нужна для общения с "внешним миром", включая отрисовку браузером. Многопоточность позволяет выделить ресурсоемкие вычисления (а также сетевые запросы) в отдельные потоки (Web workers), что снижает нагрузку на основной поток, который отвечает и за рендеринг. Это благоприятно сказывается на отзывчивости вашего UI.

(vue-faq.org)

#async #js #threads

Предложение добавить Signals в JavaScript перешло в Stage 1 процесса комитета TC39
Это означает, что члены комитета соблаговолили взглянуть на пропозал. Заняло это у них 8 месяцев.

Signals - аналог реактивных переменных и операций над ними (computed, watcher) во Vue 3, только сильно урезанный по сравнению с Reactivity API. Evan You говорил, что если они появятся в языке, реактивность Vue может быть переписана на них.

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

Так же не сильно поможет это и для Web components догнать фронтенд фреймворки, потому что там нет связывания js переменных с шаблоном.

#signals #reactive #js

Мудрые мысли в конце рабочей недели

#humor #video

Интересное исследование по производительности CSS в scoped областях в браузерах.

Vue использует HTML уникальные атрибуты для обозначения скоупа, Svelte - классы. В статье показаны результаты бенчмарков для различных вариантов скоупинга. Конкретно сравнение подходов разных фреймворков - в самом конце.

Выводы: Shadow DOM самый быстрый, подход Vue с data-v- атрибутом тоже вполне эффективен

#css #benchmark