Использование функций на массивах, типа filter, map и других, очень удобно и даёт красивый код, но может создавать проблемы в производительности из-за:

1. Выделения и потом уничтожения промежуточных массивов
2. Cоздавания циклов в циклах ( сложность O(N^2) ), хотя весь код можно разместить в одном цикле ( O(N) )

Например, код 1. ниже выполняется в 2-3 раза дольше, чем код 2.

// setup:
const numbers = Array.from({ length: 10000 }).map(() => Math.random())

// 1. functional
const result =
  numbers
    .map(n => Math.round(n * 10))
    .filter(n => n % 2 === 0)
    .reduce((a, n) => a + n, 0)

// 2. imperative
let result = 0
for (let i = 0; i < numbers.length; i++) {
  let n = Math.round(numbers[i] * 10)
  if (n % 2 !== 0) continue
  result = result + n
}

#js #optimization

Интересно, если у такой конторы как VueSchool месяцами висит объявление о найме Vue/Nuxt мидл-левел фронтендера, то это что значит?

#vueschool

Толстосумы тоже решили подкинуть немножко на Volar.

Интересно, сколько денег они потратили на свою заброшенную реализацию?

#jetbrains #webstorm #volar

Рейтинг фронтенд фреймворков по количеству набранных в 2023 году GitHub звезд

Забавно, что Vue 2 набрал не сильно меньше Vue 3. По общему числу звезд Vue 2 уже отстал от React.

Также интересно, что у Svelte и Vue примерно одинаковое количество звезд каждый месяц (что может коррелировать с вливанием новых разработчиков в фреймворк), но число реальных проектов в коммерческой сфере отличается на порядок (или порядки)

#rating #benchmark #framework

Забавный генератор типовой документации произвольного пакета - tsdocs.dev

Наверно написан на Node.js - очень сложно поймать момент, когда сайт не лежит или не перегружен. Но возможно.

#tsdoc #ts #docs

Завтра должен выйти ESLint v9.0.0

Flat config формат конфигурационных файлов станет форматом по умолчанию

#eslint

Использовать <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