Интересная табличка совместимости современных JavaScript рантаймов с JavaScript (сорри за мой рязанский французский)

https://runtime-compat.unjs.io

#jsre

Case study о вреде Nuxt и ошибках в архитектуре

VueStorefront, предлагавший услуги Frontend-as-a-Service, а именно, фронтенд для онлайн магазинов для подключения к headless e-commerce решениям, так и не смог за 4 года апгрейднуть Nuxt со второй на третью версию и в расстроенных чувствах решил переехать на React и Next.js, попутно сменив название на Alokai

При выборе технологий для магазина Arty-Crafty я долго изучал VueStorefront, но так и не понял, что это за зверь и с чем его едят. Теперь это проблема реактовцев.

#nuxt #ecommerce #vuestorefront

Основные функции фронтенд фреймворков

Фреймворки для веб-разработки - это, по сути, пресобранные библиотеки кода, которые обеспечивают структурированную основу для создания веб-приложений. Они предлагают целый ряд возможностей, таких как:

Компонентная архитектура: Фреймворки часто разбивают пользовательские интерфейсы на многократно используемые компоненты, что способствует модульности и удобству сопровождения.

Связывание данных (data binding): Эта функция автоматически синхронизирует данные между пользовательским интерфейсом и базовой моделью, упрощая логику и сокращая ручные манипуляции с DOM.

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

Управление состоянием: Сложные приложения иногда требуют управления состоянием различных компонентов. Фреймворки часто предоставляют встроенные или совместимые решения для этого.

Инструменты разработки (devtools): Многие фреймворки предлагают такие инструменты для разработчиков, как отладчики, горячая перезагрузка и профилирование производительности, что повышает удобство разработки.

Эти функции значительно сокращают количество шаблонизированного кода, упрощают процесс разработки и обеспечивают последовательность действий при разработке.

#frontend

В CSS есть правило color-scheme для реализации цветовых тем на сайте. Не очень удобное, по сравнению с использованием для этой цели CSS переменных.

В последнем Хроме появилась экспериментальная функция light-dark, с которой это делать проще. Но, опять же, для серьезных проектов лучше использовать CSS переменные.

:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

В Firefox она уже была реализована

#css #tip

Одна из самых серьезных проблем в разработке программных средств — их тучность, или раздутость. Программы просто становятся слишком большими. Это может быть связано с неразумным выбором функций, но чаще всего становится следствием плохой архитектуры. Популярное средство повторного использования кода — наследование, но его работа оставляет желать лучшего, поэтому вместо него зачастую применяются копирование и вставка кода. Не следует сбрасывать со счетов и чрезмерную зависимость от библиотек, платформ и пакетов, тесно связанных со многими другими библиотеками, платформами и пакетами. Раздутость может быть побочным эффектом приемов гибкой разработки. Чтобы справиться с ней, увеличивают численность команды разработчиков, но это порождает еще большую раздутость.
…
Лучший способ справиться с раздуванием программ — не допускать его. Приоритетом при разработке и реализации программы нужно сделать ее «худобу». Следует избегать внедрения в практику раздутых пакетов и инструментов, способствующих раздуванию. Обходитесь без классов. Нанимайте небольшие квалифицированные команды разработчиков. И активно практикуйте удаление кода. Создайте резерв из нескольких циклов разработки с целью удаления ненужного кода и избавления от проблемных пакетов. Радуйтесь, когда количество строк кода в проекте уменьшается. Придерживайтесь принципа наименьшей раздутости.

(с) Дуглас Крокфорд, программист, автор формата JSON и книги "How JavaScript Works"

#quote

Автор Volar Johnson Chu собирается покинуть open source. Стресс и слабое финансирование.

Volar (language-tools) один из основных проектов Vue экосистемы с точки зрения Evan You.

Mucho trabajo, poco dinero...

p.s.: кстати, бетта-тестирование volar 2.0 оказывается было, и показало ошибки, которые потом вылезли и после релиза

#volar

Evan You нанял Johnson Chu на full time позицию фьючерсом.

Viva Volar

#volar

Уже писал про esm.sh, который позволяет работать с npm ES модулями в скрипте HTML страницы. Вот его аналог - esm.run

Вот как с помощью него можно легко отрендерить markdown файл безо всяких фреймворков и генераторов:

<!doctype html>
<script type="module">
  import { marked } from 'https://esm.run/marked';

  document.body.innerHTML = marked(
    await fetch('./README.md').then(r => r.text())
  );
</script>

#markdown #lib

Перевел статью Artem Zakharchenko "Темная сторона Open Source"

#opensource #article #habr

Рабочее место на ближайшую неделю.
+17°С, если что.

А вы помните эмблемку Vue 3.0?

#vuejs #logo

Сегодня в 27.03.24 в 4pm CET состоится голосовой чат в Дискорде с командой Vite
Тема - Vite 5.3
Ссылка

#vite #chat

Pinia cheatsheet (Option stores)

#pinia #cheatsheet

Если всё идет гладко, то ты самый медленный

#video #motivation

Довольно приятная для глаз малоизвестная библиотека UI компонент - Equal UI
Использует Tailwind

#ui #lib

Порядок свойств в js объекте важен для оптимизации js движком, и лучше его сохранять

Такая функция:

function add(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  }
}

на таких объектах:

const o1 = { a: 1, b: 2};
const o2 = { a: 3, b: 4};

будет выполняться в 7-10 раз быстрее, чем на таких:

const o1 = { a: 1, b: 2};
const o2 = { b: 4, a: 3};

#js #optimization

Отрывок из интервью Дуглаcа Крокфорда, изобретателя JSON, где он рассуждает о современных фронтенд фреймворках и TypeScript

#crockfold #interview #video #typescript

На CSS тоже можно писать полифилы

Не забываем, что :has() - относительно ресурсо-затратная функция, и всегда лучше её ограничивать родительским селектором

#tip #css

SVG тоже могут иметь реактивные свойства

<template>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
defineProps<{
  color: string
}>();
</script>

#tip #svg

Известно, что несколько пропсов можно передать как объект через v-bind

<template>
  <UserAccount
    :name="user.name"
    :profile="user.profile"
    :location="user.location"
  />
</template>

// равносильно

<template>
  <UserAccount v-bind="user"/>
</template>

Но это же верно и для событий:

<template>
  <UserAccount v-on="userEventHandlers"/>
</template>

<script setup>
const userEventHandlers = {
  updateName(newName) { ... },
  deleteUser() { ... },
  addFriend(friend) { ... }
};
</script>

Названия функций должны совпадать с названиями событий.

#tip #events