>>60988
Новый перспективный веб-фреймворк Cample.js. Реактивность без VDOM

На сегодняшний момент (версия 3.0.1), фреймворк является активно поддерживаемым в разработке нового функционала. Есть поддержка работы с данными, которые благодаря реактивности без виртуального DOM отображаются крайне быстро:

Тесты быстродействия фреймворка(js-framework-benchmark)
Тесты быстродействия фреймворка
(js-framework-benchmark)
Это не самый быстрый результат из всех, которые существуют на данный момент среди фреймворков. Но, поэтому речь идёт о перспективности.

К примеру, у Vue скорость создания 1000 строк составляет 42 секунды, а у Svelte 48.4 секунды (на момент написания статьи).

Конечно, эти фреймворки во много раз превосходят Cample.js по функционалу и сравнение недостаточно полное. Но, в данном сравнении берётся лишь такой пункт как скорость.

Сама разработка фреймворка началась около года назад. Тогда, была выбрана модель создания компонентов через экземпляры классов. То-есть, компоненты создаются следующим путём:

const component = new Component("new-component",
`<div class="component">
{{component_text}}
</div>`)
На мой взгляд, данная структура является удобной и достаточно практичной. Чтобы не писать постоянно большие конструкции из new Component, была введена также функция, с которой компоненты обрабатываются таким-же образом, но при этом сам код существенно уменьшается.

const newComponent = component("new-component",
`<div class="component">
{{component_text}}
</div>`)
Также, была выбрана модель обработки данных через функцию, возвращающую объект с данными. Сами данные отображаются в HTML template благодаря интерполяции строк.

const newComponent = component("new-component",
`<div class="component">
{{component_text}}
</div>`),
{
data: () => {
return {
component_text: "Text",
};
},
})
Эта конструкция позволяет обрабатывать данные гораздо лучше, чем если бы просто передавался объект.

Также, для изменения данных используются функции, которые передаются через свойство script. Сами функции объявляются в объекте functions.

const newComponent = component("new-component",
`<div class="component" id="el">
{{component_text}}
</div>`),
{
data: () => {
return {
component_text: "Text",
};
},
script: [
({ elements, functions }) => {
const setText = (e) => {
functions?.setText((data) => {
return "NewText";
});
};
elements?.el?.addEventListener("click", setText);
},
{
start: "afterLoad",
el: [{ el: "#el" }],
},
],
functions: {
setText: "component_text",
},
})
Также, у фреймворка присутствует объект each, который повторяет HTML разметку в зависимости от данных.

const newEach = each("new-each",
()=>["val"],
"<div>{{data}}</div>",
{
valueName:"data"
}
);
Все эти компоненты обрабатываются через экземпляр объекта Cample следующим способом.

cample("#example", {
trimHTML: true,
}).render(
`
<div class="example_page">
{{newComponent}}
{{newEach}}
</div>
`,
{
newComponent,
newEach
}
);
Конечно, большинство функций, которые необходимы сегодня для создания prod сайта пока не поддерживаются, но работа над фреймворком идёт.

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

Если у вас есть мнение по данному фреймворку, будет очень интересно почитать о нём в комментариях! Спасибо большое за прочтение статьи.

Ссылки:

https://github.com/Camplejs/Cample.js

>>61289
Люди перестали изучать возможности, а учат ограничения. Почти все программисты современности обладают магическим мышлением и мало того, что понятия не имею как устроены вещи и инструменты которыми они пользуются. Они даже не интересуются этим.

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

То же самое в программирование. То же самое в жс. То же самое в любом языке или сфере.

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

Ну, а кто-то быть может погрузиться еще глубже и узнает о вещах, вроде того, что код
some(123) = 456

валидный жс-код, и почему именно.

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

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

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

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

Сап, двач. Помоги мне понять реакт ибо я заебался. Работал я работу на крупном энтерпрайзе с кучей легаси на knockout.js и вот меня в жопу ужалило выучить что-то новое. Выбор пал на реакт, почитал, пописал, сделал на нем даже один маленький проектик, но в процессе изучения меня выморозило по полной
Практика на нем для меня похожа на старую игру и вылезающими из дырок сусликов и молотком где ты забиваешь одного суслика, а из другой дырки появляется новый
Для примера могу привести задачу, очень простую, нужно сделать список с пагинацией, фильтрами и чтением/записью query string - а для того чтобы манагеры могли удобно копипастить друг другу ссылки
Список я сделал, пагинацию прикрутил, пробросил api, но с пробросом параметров в строку запроса я поел говна
В императивном нокауте подобная фигня решается на раз - два, при инициализации компонента ты читаешь строку, парсишь ее, забрасываешь значения в обсервабл откуда их подхватывают поля формы, а при изменении этих полей берешь и подставляешь строку в зад, как это делать с реактом я так до сих пор не могу понять
Окей, подзадача 1 - вытащить парамы и засунуть их в стейт, отвечающий за значение инпутов фильтров. Казалось бы официальная дока говорит нам что нужно вызывть useEffect с пустым массивом зависимостей и тогда это отработает только один раз при создании компонента как мне и нужно, но вот проблема, если сделать так то линтер начинает ругаться на то что отсутствует зависимость от searchParams из react-router-dom, который я использую для получения параметров. Хорошо, а как тогда? Я не хочу чтобы состояние строки отслеживалось в процессе жизни компонента, но если я засуну searchParams в зависимости то произойдет именно это. Ладно решил я, хочет линтер зависимость пока поставлю, даст бог не полезет боль
Но боль полезла и полезла она при обратной передаче параметров в строку. Строка ставится через тот же useSearchParams, useEffect отслеживает изменение стейта и передает этот стейт в строку поиска. Как только я закодил эту часть я получил циркулярку выевшую всю память выделенную под вкладку. Я понял механизм, изменение читает юзэффект из п.1, обновляет стейт, юзэффект стейта обновляет строку, изменение читает юзэффект из п.1 и так по новой, но ссссуууука Где я не догоняю и как сделать правильно? Попробовал переделать тот же функционал на ангуляре с внятными классами и жизненным циклом компонента - управился за пол часа, а с реактом я бьюсь как обезьяны держащая пучок проводов и не понимающая в какую дырку их воткнуть
Проблему можно даже обобщить, потому что я не в первый раз сталкиваюсь с тем, что мне нужно что-бы в useEffect что-то делалось с чем-то, но я блядь не хочу что-бы это "чем-то" отслеживалось в реалтайме. Как такое решается? Или это тот случай когда нужно использовать классовые компоненты без ебли с useWhatever и всем вот этим реактивом? Как в общем случае решаются подобные проблемы? Есть конечно всякие хаки типа объявить какой нибудь useRef с флагом и взводить его при первом проходе, но неужели это подход самого популярного фреймворка в вебе?) Я как будто что-то концептуально не догоняю и бьюсь об стену, не хочется дропать и уходить в тот же ангуляр, мне очень нравится богатый выбор либ под реакт и синтаксис jsx, но мне вот просто некомфортно постоянно продираться через зависимости переменных друг от друга и неявные вызовы коллбэков, а главное от ощущения что я бы тот же функционал сделал на порядок быстрее и качественнее если бы мне дали нормальные классы с нормальными методами и нормальным жизненным циклом компонента. Что рекомендуете почитать/поделать? Хочется втянуться, но пока не получается, и это вызывает подобные крики души
PS: знаю про классовый подход в реакте и мне понравилось писать на классах, но почему-то все знакомые фронты говорят что классы фу и устаревший шлак, надо обязательно писать на функциональных