#illustration #cookie

У каких фреймворков есть реактивный state management из коробки.

Внутри компонента, и за пределами компонентов.

#illustration #benchmark #state #react #solidjs #svelte #angular

Моя крайняя критика VueUse была довольно болезненно принята в рунете, и очень агрессивно на Reddit-e, что удивительно - обычно всё наоборот в силу различий в уровнях толерантности. Ощутил себя нечто средним между Гринчем и г-ном Карловским. В связи с чем вспомнилась история.

Много лет назад сидел в горах на нестабильном мобильном EDGE интернете со средней скоростью 3-4Кб/с, хотя бывало и по 0.5Кб/с. Чтобы как-то выжить, написал расширение к браузеру MainPage, даже набравшее свою небольшую популярность в Google Web Store, которое блокировало загрузку любых ресурсов, кроме страницы, на которую обратились.

Потом сделал локальный вебсайт, соответственно, его пользователи примерно на таком же интернете. Начал оптимизировать и дошел до того, что кэшировал статику - css, js, - в localStorage. Получилось очень эффективно. Эра сервис воркеров тогда только занималась.

Ну, вылез на Хабр и написал про это статью. Тут на меня полилось в комментариях - да ты не умеешь Apache настраивать, надо кэширующими заголовками, выкинь свои самоделки, да не будет там пустых запросов, да ты вообще не знаешь как Интернет работает...

Дня через 3-4, когда меня почти убедили, что я дурак, выходит явно не маленький дядька из Яндекса, и говорит: да нормальный метод, мы сами так много лет делали. И начинает рассказывать в подробных технических деталях, как они пробовали разные способы оптимизации трафика, что они давали, и почему выбрали этот. И это про свою главную поисковую страницу, которая ya.ru одной строкой, не про сервис какой-то. А Яндекс в то время ещё был авторитет.

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

#story #vueuse

Замените буквы разными ненулевыми цифрами, чтобы получилось верное равенство

#math

Пару слов об эффективности и качестве некоторых очень популярных библиотек и кода на их основе.

Tanstack - собрание универсальных пакетов и утилит, Суммарно более 70K GitHub звезд, 1000+ контрибьютеров.

Пакет vurtual, 4.8K звезд, предназначен для реализации бесконечного скрола

Файл examples/vue/infinite-scroll/src/App.vue, строка 108

Получение последнего элемента массива virtualRows:

watchEffect(() => {
  const [lastItem] = [...virtualRows.value].reverse()

  if (!lastItem) {
    return
  }
  // ...
});

Этот файл не сама библиотека, а образец ее использования в пользовательском коде, но, тем не менее, хороший показатель уровня.

#performance #tanstack

Общеполезная информация об интернет технологиях
Уровень: medium

#learning #video

Статья, описывающая как работает Hot Module Replacement в Vite

#vite #hmr

Библиотека Google Translate предоставлял веб-разработчикам JavaScript SDK для установка переключателя языков и перевода своего сайта "на лету" с одного языка на другой. Качество было хуже кастомного перевода, но позволяло быстро сделать хоть какую-то поддержку нескольких языков на сайте. Четыре года назад Google от поддержки этой своей библиотеки отказался.

Тем не менее, остались пакеты, которые позволяют это делать через Google Translate API. Один из них с поддержкой Vue - google-translate-select.

#tip #google #i18n

Vite 6 собираются выпустить в этом году.

Rolldown как замена esbuild может быть готов для экспериментального использования, но планируется всё же на седьмую версию сборщика.

На GitHub открыта дискуссия для жалоб и предложений касательно функционала Vite 6.

#vite

Существует ли четырехугольник, который можно разрезать двумя прямыми на 6 кусков?

#math

Vue.js релизнула v3.4.19

Опять не очень удачно - были добавлены предупреждения пользователям, если computed имеет side effect-ы, однако в соответствующем PR-e сразу посыпались жалобы, что из предупреждения не видно, в каком computed-e проблемы, и даже что чистые computed-ы дают такие предупреждения.

#vue

Принцип инверсии зависимостей

Буква D в аббревиатуре принципов объектно-ориентированного программирования SOLID означает Dependency inversion principle - Принцип инверсии зависимостей, который очень хорошо применим и во фронтенд разработке.

Он гласит: "Завись от абстракций. Не завись от конкретной реализации".

Другими словами, если у вас есть некая сущность, которая что-то использует, то возможно она должна это делать через интерфейс.

Пример: в ваших компонентах вам надо форматировать дату и время. Вы можете сразу подключить какой-нибудь dayjs и использовать его везде. В какой-то момент вы обнаруживаете, что функционала dayjs не хватает, и подключаете date-fns, попутно меняя весь предыдущий код.

Согласно Принципу инверсии зависимостей вам следует создать интерфейс для функций работы с датой - например, dates.ts, в котором прописать свои функции, которые являются обертками над date-fns функциями. В коде вы обращаетесь к этим своим функциям, а их реализация уже лежит в этом файле. Это даёт ту самую loose coupling - слабую связанность.

В ООП языках между конкретной реализацией dates.ts и кода, её использующего, нужно бы было создать промежуточный абстрактный класс DateUtilities - именно его называют в объяснении принципа "абстракцией". В JavaScript он не создается, dates.ts выполняет и его роль.

Таким образом вы можете спокойно работать над проектом с самого начала, не задумываясь, кто именно будет реализовывать логику работы с датами. Вполне возможно, к концу проекта вы увидите, что используете только 3 функции из date-fns, и они вполне могут быть реализованы самостоятельно. Вы избавляетесь от зависимости, делаете бандл легче, приложение - быстрее, и не надо ничего менять в коде, кроме самого dates.ts. Возможно будет иная причина поменять одну зависимость на другую - вы снова это делаете, не меняя основного кода.

То же самое относится к компонентам - обертки BaseButton, BaseIcon, BaseDropdown и т.п. служат этой же цели - значительно облегчить разработку, поддержку и дальнейшее развитие проекта путем снижения привязанности основного кода к конкретным зависимостям.

#architecture #solid

Забавный твит

Моя жена только что сказала мне, что сайт по покупке билетов не работает. Оказывается, она просто нажимала кнопку до того, как JS закончил гидратацию, поэтому ничего не происходило 🙈. Спасибо, SSR...

#ssr #nuxt

Сайт, который показывает что может современный PWA на мобильных устройствах.

whatpwacando.today

#pwa

FormKit выпустила библиотеку `tempo`, для работы с датой и временем

Tempo - это новая библиотека в ряду библиотек работы с датой и временем JavaScript. Вдохновленная такими библиотеками, как moment.js, day.js и date-fns, Tempo создана с нуля, чтобы быть как можно более маленькой и простой в использовании.

Tempo лучше всего рассматривать как набор утилит для работы с объектами Date - важное отличие от других библиотек, предоставляющих пользовательские примитивы даты. Под капотом Tempo использует JavaScript's Intl.DateTimeFormat для извлечения сложных данных, таких как смещение часовых поясов и форматы дат с учетом локали, предоставляя вам простой API для форматирования, разбора и манипулирования датами.

В коде под капотом действительно все чистенько и tree-shakable.
Но, повторюсь, если вам нужно немного каких-то особенных функции для работы с датами, например, addHour(), попросите Codeium или другой чат-бот сгенерировать их и, возможно, этого вкупе с Intl.DateTimeFormat вполне хватит

#formkit #tempo #dates