Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.01.2014, 15:27
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Ractive.js - Next-generation DOM manipulation
Привет

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

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

Если кто-нибудь уже писал на нем, делитесь ощущениями
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #2 (permalink)  
Старый 04.01.2014, 15:47
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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

Последний раз редактировалось monolithed, 04.01.2014 в 15:53.
Ответить с цитированием
  #3 (permalink)  
Старый 04.01.2014, 16:04
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от monolithed
Проще показать
спасибо. Скорее всего я видел этот пример в tutorial.

Сообщение от monolithed
Это не MVC-фреймворк
теперь яснее

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

Т.е. в 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 (могу ошибаться).

Лично я на данный момент с большими сомнениями отношусь к реактиву. Буду смотреть дальше.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 04.01.2014 в 16:06.
Ответить с цитированием
  #4 (permalink)  
Старый 04.01.2014, 16:10
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от nerv_
Т.е., если я в цикле добавлю 1000 элементов в массив, то страница перерисуется 1000 раз, в ангуляре 1 (могу ошибаться).
Тогда это уже не data-binding
Ответить с цитированием
  #5 (permalink)  
Старый 14.06.2014, 15:40
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

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

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

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

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

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

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

Последний раз редактировалось DjDiablo, 14.06.2014 в 17:04.
Ответить с цитированием
  #6 (permalink)  
Старый 14.06.2014, 15:50
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

DjDiablo,
Ты перепутал Ractive с React
Ответить с цитированием
  #7 (permalink)  
Старый 14.06.2014, 15:55
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от monolithed
вашей архитектуры
... а на чём её делать? backbone ?

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

Сообщение от DjDiablo
То есть в отличии от ангуляра reactjs не имеет дела с реальным dom а выполняет все операции на виртуальном, реальный дум reactjs мочит не заботясь о нем ни как все что ему интересно он хранит в виртуальном.
получается,у React и Ractive одинаковый подход к этому - через виртуальный дом?
Ответить с цитированием
  #8 (permalink)  
Старый 14.06.2014, 16:12
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от melky
получается,у 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/

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

Последний раз редактировалось monolithed, 14.06.2014 в 16:14.
Ответить с цитированием
  #9 (permalink)  
Старый 14.06.2014, 16:46
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Цитата:
Ты перепутал Ractive с React
Бля, в натуре. Чо еще за реактив (ПУРГЕН) такой в сраку
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 14.06.2014 в 17:26.
Ответить с цитированием
  #10 (permalink)  
Старый 14.06.2014, 17:07
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от DjDiablo
реактив
о! новое имя для семейства фреймворков с виртуальным домом)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
IE баг со скоростью обработки DOM Rootpassword Events/DOM/Window 2 13.02.2012 17:16
Новый элемент отсутствует в DOM модели StrSprut jQuery 4 19.09.2011 12:50
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26