Cruzo — минималистичный UI-фреймворк без лишней сложности

А я-то в кои-то веки думал цивилизованную дискуссию вести... Глупый, глупый я 😔

А всего-то стоило немного погуглить и найти пост Дэна Абрамова. Который TL;DR: "Мы подумали, что так будет лучше, а когда поняли, что не будет, было уже слишком геморно всё менять".

Учитесь гуглить, уважаемый.

Cruzo — минималистичный UI-фреймворк без лишней сложности

Вы в комментариях выше доказывали мне что частичный всегда, а оказалось нет…

Ээ, простите, вы о чём? Не вижу связи

Cruzo — минималистичный UI-фреймворк без лишней сложности

Это не так, иначе бы JSX не могли использовать другие фреймворки. А оно спокойно существует и в SolidJS, и в Stencil, и в Vue, кстати говоря (по крайней мере, можно было в той версии, с которой я знакомился). И если мне память не изменяет, из всех них только реакт использует className. И да, даже если вы в реакте напишете class, он не умрёт на этапе компиляции, а честно создаст объект с полем class.

Примеры:

• BabelJS

• TypeScript

• Esbuild

Cruzo — минималистичный UI-фреймворк без лишней сложности

Функции в шаблон Lit передавать не рекомендуют. Для реакции на события есть @-поле, оно там отдельно оптимизировано (там используется объект { handleEvent }, который заведует подпиской на событие, и у которого просто заменяется функция, так что на слушателей shallow check не распространяется).

Обход по всем значениям это не круто

Это уже экономия на спичках. Цикл — одна из самых оптимизированных операций в JS, тем более тот, который не использует итераторы. Вряд ли вы будете создавать шаблон с миллионом значений, а с таким объёмом JS справляется за миллисекунды.

Cruzo — минималистичный UI-фреймворк без лишней сложности

Не задавались вопросом почему вместо class в JSX className?

Потому что разрабам реакта было влом переименовать переменную. Все остальные фреймворки спокойно пользуются class и в ус не дуют, это только реакт такой особенный.

Cruzo — минималистичный UI-фреймворк без лишней сложности

Ммм, вы говорите про shallow check, что ли? Если сильно (очень сильно!) упрощать, то он выглядит как-то так:

const registry = new WeakMap<TemplateStringsArray, TemplateResult>();

function html(strings: TemplateStringsArray, values: readonly unknown[]): TemplateResult {
    if (registry.has(strings)) {
        const result = registry.get(strings)!;

        for (let i = 0; i < strings.length; i++) {
            if (result.get(i).value !== values[i]) {
                result.update(values[i]);
            }
        }
    } else {
        // Init code
    }
}

function exec(txt: string) {
  render(html`<div>${txt}</div>`, document.getElementById('root'));
}

Что тут может нагружать CPU, да ещё и неимоверно?

Cruzo — минималистичный UI-фреймворк без лишней сложности

Он там частичный абсолютно всегда. Любое изменение дёргает только конткретные атрибуты/поля/ивенты. Изначальный код HTML заворачивается в template, далее в местах разрыва tag literal регистрируются "дырки" (holes или values), которые при повторном рендере обновляются по изменению value по конкретному индексу. В общем, все преимущества Virtual DOM без его недостатков. Свои caveats там, конечно, тоже есть (например, нельзя вдруг поменять имя тэга, это требует пересчёта всего элемента и теряет все преимущества), но по сравнению с virtual dom они гораздо менее существенны. И работает безо всякой транспиляции, прямо в браузере.

Я написал extension для visual studio code

А если я пользкюсь Intellij IDEA? )

Cruzo — минималистичный UI-фреймворк без лишней сложности

Критическая проблема данного подхода — это неподсвечиваемые, невалидируемые (через линт) и неформатируемые выражения внутри строк. Собственно, для решения этой проблемы и появился JSX. Он позволяет использовать все возможности JS без ограничений, и при этом всё ещё иметь выразительный язык шаблонов. Ангуляр, кстати, тоже от этой проблемы страдает, но это уже просто наследие ранних подходов.

Но если так хочется совместить строки и pure JS, почему не воспользоваться Lit? (точнее, lit-html, веб компоненты тянуть не обязательно). Lit как раз отлично решает проблему: это прямые строки, никакой компиляции, и в то же время можно свободно пользоваться возможностями языка

Baseline: февраль 2026 или самый скучный выпуск

Ааа, вон оно как! Спасибо за объяснение, паззл сложился 😊

Baseline: февраль 2026 или самый скучный выпуск

В августе? 2023? 🧐

Убийцы иммутабельной производительности — Zustand/Redux в связке с React

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

Пхпх, а чего мне на вас время тратить-то 🤭 Что вообще можно сказать лягушке, которая не интересуется ничем, кроме своего колодца?

Убийцы иммутабельной производительности — Zustand/Redux в связке с React

Вы там под корягой прогаете, если про сигналы не слышали, или да?

А вообще смешно, конечно, смотреть на ваши потуги доказать, что вы правы.

Но меж тем реальность, увы, не на вашей стороне.

• Preact изобрёл сигналы (ну, не то чтобы это новая технология, но именно их реализация запустила хайп)

• React принял сигналы по умолчанию (в смысле, они ничего не делали, Preact изначательно реализовывал сигналы и для реакта тоже).

• Ангуляр внедрил у себя сигналы, который заменяют (барабанная дробь) rxjs.

• У Vue они теперь тоже есть, как Alien Signals.

• Solid с сигналами работает ещё до Preact.

• Svelte втащили себе сигналы.

• И даже в TC39 появился пропозал на включение нативных сигналов в платформу.

Если это не популярность, то вы попросту отрицаете реальность, пытаясь основываться на ничего не значащих циферках.

Убийцы иммутабельной производительности — Zustand/Redux в связке с React

В случае с популярностью это доказывается именно так.

Вот как? Тогда самый популярный стейт-менеджер это rxjs. Ни редакс, ни ваш зустанд рядом даже чихнуть не смеют. Всё верно?

Убийцы иммутабельной производительности — Zustand/Redux в связке с React

И что вы этим докажете? Что много легаси на редаксе работает? Ну так на jQuery 90% веба до сих пор крутится.

А вот предложение на включение в JS редакс точно не получал.

Убийцы иммутабельной производительности — Zustand/Redux в связке с React

Иммутабельные паттерны разработки UI-приложений в последние годы стали одними из самых популярных

Я даже пошёл календарь перепроверить, не оказался ли я случайно в 2018. Иммутабельные паттерны разработки при том, что у нас уже много лет есть сигналы? `Immutable.js` в 2026? И я, конечно, догадывался, что Redux всё ещё где-то рядом с нами, но назвать его популярным?

В общем, статья вызывает большие вопросы о релевантности (и ностальгию!)

Обработчики событий в JavaScript

Анонимную функцию, созданную прямо в addEventListener, удалить невозможно.

AbortController: ну да, ну да, пошёл я нафиг

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Ну, maintenance mode же. Конечно что-то фиксят. Но вот Material Expressive уже не дождёмся, как и бо́льшей части компонентов оригинальной спеки

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Уже не пилит, увы

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Разработчики сафари наотрез отказались поддерживать эту спеку. Так что её можно не ждать. Плюс многие инструменты для веб-компонентов нарочито игнорируют её. У меня есть смутное подозрение, что рано или поздно её выпилят за ненадобностью.

Вообще вначале я был очень "за" эту спеку, но после нескольких попыток её использовать я понял, что по сути она мне не нужна. Для веб компонентов я чаще всего использую ShadowDOM, а custom built-in elements мне такой возможности не дают. В результате я так ни разу ею и не воспользовался, хотя у ungap project есть хороший полифилл для этого (а ещё я сам такой полифилл писал).

Как всплывающее окно в WebView съело мои два дня (viewport и с чем его кушать)

Фактически мы не словили баг,

мы словили предсказуемое поведение всё того же веб-компонента, который внезапно начал видеть реальную геометрию окружающего мира

Привет, ChatGPT, мой старый друг 🤭