Ractive.js - Next-generation DOM manipulation
 

Привет

В связи с неоднократным упоминанием на форуме Ractive.js, решил завести под него тему.

Было бы не плохо, если кто-нибудь запостил его сравнение с другими клиентскими mvc-фреймворками.

Если кто-нибудь уже писал на нем, делитесь ощущениями :)

Это не MVC-фреймворк

Проще показать:

<p>Hello {{user}}! You have
    <strong>{{messages.unread}} new messages</strong>.
</p>

var ractive = new Ractive({
     el: result,
     template: html,
     data: {
          user: 'Dave',
          messages: { total: 11, unread: 4 }
     }
});

ractive.set( 'messages.unread', 5 );

Демки тут

У него в коробке нет модулей, роутера, локализации, все это нужно писать самому или использовать сторонние решения (также есть ряд плагинов).

Иными словами его суть в том чтобы предоставить простую и удобную работу с data-binding вокруг вашей архитектуры, а не наоборот как в Angular

К примеру у меня в проекте это выглядит так:

new toolkit.template({
	template: 'template:default/index',
	data: {
		foo: 'Hello',
		bar: 'world'
	}
});

спасибо. Скорее всего я видел этот пример в tutorial.

теперь яснее

видимо, ты давно читал про ангуляр. Большинство из вышеперечисленного вынесено в модули (т.е. можно подключать, можно не подключать.), но сама концепций модулей/модульности осталась в ядре. На мой взгляд удобно.

Т.е. в ractive нет того же $q (deferred/promises), кот. иногда очень нужен :)
Еще чаще требуется $http (ajax)
Про другие плюшки молчу.

Читаю тут про reactive, вижу
по факту
- reactive.min.js (v0.3.9) 116,8 kb
- angular.min.js (v1.2.7) 98,0 kb
т.е. не очень "slim". И тот же ангуляр с "лишним" весит меньше, чем реактив "без лишнего".
Кроме того, для поддержки IE<9 "реактивцы" предлагают подключить еще скрит "совместимости". Сколько он весит, не смотрел.

А еще я лазил в сорцы реактива, и вроде как он работает через геттеры-сеттеры. Т.е., если я в цикле добавлю 1000 элементов в массив, то страница перерисуется 1000 раз, в ангуляре 1 (могу ошибаться).

Лично я на данный момент с большими сомнениями отношусь к реактиву. Буду смотреть дальше.

Тогда это уже не data-binding :)

если я в цикле добавлю 1000 элементов в массив, то страница перерисуется 1000 раз, в ангуляре 1 (могу ошибаться).

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

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

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

Так как с данными в памяти работы быстрее чем с реальным думом то у reactjs хороший профит по производительности.
http://jsperf.com/angular-vs-knockout-vs-ember/302

Еще большой плюс в том что у реакта ниже порог вхождения тобишь он ощутимо проще ангуляра. Но реакт заточен только под UI в то время как ангуляр предлагает функционал для построения всего приложения.

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

DjDiablo,
Ты перепутал Ractive с React :)

... а на чём её делать? backbone ?

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

получается,у React и Ractive одинаковый подход к этому - через виртуальный дом?

http://blog.ractivejs.org/posts/what...t-and-ractive/

У меня своя архитектура, не вижу смысла подключать backbone, который тащит еще jquery

Бля, в натуре. Чо еще за реактив (ПУРГЕН) такой в сраку :blink:

о! новое имя для семейства фреймворков с виртуальным домом)

React старше Ractive всего на один месяц.
Просто денег нет на PR как в случае с Angular и React.

Там походу и декомпозиции нету, и реактивного программирования как такового, это помимо денег на рекламу:)
Если в реакт я могу разбить компонент на подкомпоненты каждый из которых будет иметь свое состояние, дергать функции родительского компонента переданныее через prop и сплавлять в детей инфу через атрибуты то в реактиве мне такой пример не попался. Вообще любопытно что они появились в одно время и так похожи в плане виртуального дума. Но в один ряд ставить react и reactor я бы все равно не стал.

Ну я правда бегло просмотрел, могу ошибиться.