Ractive.js - Next-generation DOM manipulation

[nerv_]

Привет

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

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

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

[monolithed]

с другими клиентскими 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'
	}
});

[nerv_]

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

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

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

теперь яснее

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

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

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

Читаю тут про reactive, вижу

Ractive.js is slim

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

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

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

[monolithed]

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

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

[DjDiablo]

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

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

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

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

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

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

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

[monolithed]

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

[melky]

вашей архитектуры

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

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

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

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

[monolithed]

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

The most striking similarity was the use of a virtual DOM. Like Ractive, React had discovered that creating an abstract representation of the DOM allows for lightning-fast operations by minimising the amount of DOM manipulation (the bottleneck in most webapps) that needs to take place. It also facilitates server-side rendering without some of the crazy hacks users of other tools have had to employ.

Another was the focus on reactive programming. This is one of those phrases that threatens to become meaningless with overuse, but it's a useful concept. Put simply, in a reactive system where the value of b depends on the value of a, if a changes then b will also change. Applied to user interfaces, that means that when your application state changes, your view also changes. With traditional MVC libraries you typically have to implement all your render logic manually and wire it up with a web of publish/subscribe events; with React and Ractive you're spared that (tedious, error-prone, hard-to-optimise) step when building your apps.

Finally, both libraries believe that the way to help developers build complex apps is to give them tools that encourage simplicity and composability and then get out of their way.

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

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

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

[DjDiablo]

Ты перепутал Ractive с React

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

[melky]

реактив

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