Обзоры фреймворков, библиотек, компонентов и прочего
 

Предлагаю в этой теме постить:

• обзоры на интересные/интересующие вас фреймворки, библиотеки, компоненты
• а также ссылки на те ресурсы, обзор на который вы хотели бы увидеть в этой теме

Тесты производительности фреймворков

• Angular VS Knockout VS Ember VS React VS Mithril VS Vue
• TodoMVC Benchmark (который забраковали)

Ractive.js. The diamond age of web development
 

Ractive.js

• реализует паттерн MVVM, декларативный
• простой и понятный на первый взгляд
• размер ractive-0.7.3.min.js ~ 163kb
• одно/двухсторонний датабиндинг (есть флаг переключения режима)
• использует виртуальный дум
• есть "магический" режим, который позволяет использовать обычные объекты в качестве данных, меняя свойства которых вызывается рендер
• использует язык шаблонов Mustache. Удобно. Есть if/elseif/else, each,
• неплохая документация, обучалка
• когда то его советовал monolithed :)
• поддерживает концепцию компонент

Пример кода

<!--
   1. This is the element we'll render our Ractive to.
-->
<div id='container'></div>

<!--
   2. You can load a template in many ways. For convenience, we'll include it in
   a script tag so that we don't need to mess around with AJAX or multiline strings.
   Note that we've set the type attribute to 'text/ractive' - though it can be
   just about anything except 'text/javascript'
-->
<script id='template' type='text/ractive'>
    <p>Hello, {{name}}!</p>
</script>

var ractive = new Ractive({
  // The `el` option can be a node, an ID, or a CSS selector.
  el: '#container',

  // We could pass in a string, but for the sake of convenience
  // we're passing the ID of the <script> tag above.
  template: '#template',

  // Here, we're passing in some initial data
  data: { name: 'world' }
});

Mithril. A client-side MVC framework
 

Mithril

• реализует паттерн MVC, императивный
• очень простой фреймворк
• размер mithril-0.2.0.min.js ~ 18kb
• использует виртуальный дум
• не из коробки, но поддерживает jsx-like syntax
• хвастается своей высокой производительностью в тестах
• есть роутинг из коробки
• апи помещается на ладони :)
• поддерживает концепцию компонент

Пример кода

//model
var Page = {
	list: function() {
		return m.request({method: "GET", url: "pages.json"});
	}
};

var Demo = {
	//controller
	controller: function() {
		var pages = Page.list();
		return {
			pages: pages,
			rotate: function() {
				pages().push(pages().shift());
			}
		}
	},

	//view
	view: function(ctrl) {
		return m("div", [
			ctrl.pages().map(function(page) {
				return m("a", {href: page.url}, page.title);
			}),
			m("button", {onclick: ctrl.rotate}, "Rotate links")
		]);
	};
};


//initialize
m.mount(document.getElementById("example"), Demo);

Vue.js

• реализует паттерн MVVM, декларативный
• на первый взгляд простой
• размер vue-0.11.8.min.js ~ 58kb
• на втором месте по производительности после Mithril в тестах
• одно/двухсторонний датабиндинг
• реализует ангуляр-подобные упрощенные директивы, модификаторы/фильтры
  

  <span>{{message | lowercase | reverse}}</span>
  

• из коробки директивы: v-text, v-html, v-show, v-class, v-attr, v-style, v-on, v-model, v-if, v-repeat, v-with, v-events, etc
• асинхронный/синхронный вотчинг изменений
• поддерживает асинхронный рендер
• также, как и реакт, накапливает изменения, пакует их, а затем применяет
• приятные плюшки вида debounce
  

  <input v-model="msg" debounce="500">
  

• поддерживает концепцию компонент
• неплохая документация, обучалка
• css/js анимации из коробки

Пример кода

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn Vue.js'
      }
    ]
  }
})

sandbox

rivetsjs

• реализует паттерн MVVM, декларативный
• на первый взгляд простой
• размер rivets-0.8.1.min.js ~ 24kb
• из коробки одно/двухсторонний датабиндинг
• из коробки директивы: text, html, show, hide, enabled, disabled, if, unless, value, checked, unchecked ,on-[event], each-[item], class-[classname], [attribute], фильтры
• поддерживает концепцию компонент

Пример кода

<section id="auction">
  <h3>{ auction.product.name }</h3>
  <p>Current bid: { auction.currentBid | money }</p>

  <aside rv-if="auction.timeLeft | lt 120">
    Hurry up! There is { auction.timeLeft | time } left.
  </aside>
</section>

rivets.bind($('#auction'), {auction: auction})

Ты верно шутишь? Я очень сильно сомневаюсь в хоть какой-то адекватности этого теста.

Почему у React-а бегут цифры? Там таймаут? Разве вставка происходит не 1 раз? Разве тест не нарушает основной принцип React? Чем больше вирт-DOM тем быстрее должен работать React.

Почему для вставки используется $('#reactMountNode')[0]
В то время как document.getElementById("mithrilMountNode")
?

С каких это пор результаты работы jquery и ванилы приравняли?

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

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

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

Хочешь чистую тему, не пиши неадекватную отсебятину.

Хочешь тесты, сделай тему с тестами.

nerv_,
Кстати, это форум, а не блог. Если хочешь держать тему чистой, то создай страницу в интернете, а сюда дай ссылку. Заставлять людей молчать и подчиняться твоим требованиям на общем форуме в оффтопике тоже неадекватно.

я никого ни к чему не принуждаю :)
всего лишь попросил предоставить адекватные на твой взгляд тесты производительности фреймворков

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

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

Пример: В реакте есть приложение, которое обновляется с помощью потока. Одновременно нужно на странице сделать изменения в разных частях. Вставка(изменение) будет мгновенное. Во ф-ах где нет распределительного диспетчера и оптимизатора дом, вставка будет последовательной. Исходя из этого любой тест абсурден. Больная фантазия автора теста!

Исходя из Reconciliation, тестировать циклическую вставку очень тупая идея! Вставка всегда мгновенна, там нечего тестировать, можно во всех фреймворках её прировнять.

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

1. получится, т.к. в конечном счете все сводится к "лагает или не лагает у пользователя интерфейс"
2. понимаю, что тебя очень задело, что реакт не на первом месте, но тесты писал не я. Напиши свои в кот, он будет демонстрировать себя с лучшей стороны.
3. если ты не заметил, то помимо реакта еще как минимум два фреймворка (описанных мною выше) используют виртуальный дум. Есть еще фреймворки, кот. его используют, например, изоморфный Cycle.js. Но времени на обзор у меня сейчас нету. Если хочешь, сам пиши, я не против, даже наоборот :)

Времени писать тест у меня тоже нет, но почему я должен поддерживать кривой?

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

Я говорю о том, что понимаю. Я не писал на других ф-ах, поэтому мне нечего о них сказать.

nerv_,
Объясни мне пожалуйста почему у меня на странице при подключенном React-е вставляется 500 компонентов(картинка+оберт ка+описание) менее чем за 1 секунду, а в тесте я должен ждать 10 секунд когда вставится 10 - 100 простейших спанов?

И не нужно стрелки переводить на то, что тест писал не ты. Если ты не сможешь объяснить то убери тест, если объяснишь то я с удовольствием послушаю. А иначе я буду считать, что ты просто впадаешь в неадекват.

Вот это вкусность с теневым dom для тех кому не нравится jsx, а тобишь reactjs, но нравится flux.

https://muut.com/riotjs/

Хотелось бы увидеть сравнение riotjs vs fluxxor ;)

JSX для реакта опционален, вообще-то.

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

А меня не коробит и не парит. Каким-то способом всё равно нужно связывать модель и представление, почему не таким?

Я иногда пишу document.getElementById, это плохо? почему?

l-liava-l,
У react-а гораздо большая сложность в применении flux и разруливании(routing), нежели в простом и понятном jsx. Если я перейду на Fluxxor или riot, то не потому, что мне jsx не нравится, а потому, что всем этим зоопарком в виде flux, dispetcher, router тяжело управлять, т.к. ванилаРеактФлюксРоутинг совершенно неочевиден!

В конечном итоге нужно сделать хтмл страничку динмичной, а значит именно в ней стоит указывать взаимосвязь ее состояния от модели. А получается генерится еще одна сущность для указания этой логики. Не хочется делать лишнего. :)

Это неудобно делать всегда.

В чём неудобство?

В чём в ней? В тегах(разметке), в DOM, в чём? Я не понимаю о чем ты говоришь.

Ты абсолютно всегда и везде делаешь document.getElementById? :)
Если нет, то думаю сам знаешь ответ на вопрос.

Зы
под "всегда" я имел ввиду постоянно, а не утверждал что этот метод всегда неудобен.

В разметке.

проблема в том, что ты, как разработчик, вынужден писать много кода, для того, чтобы делать простые вещи
В случае с архитектурой MVVM код прост, понятен, очевиден:

<div if="layer.isOpen"></div>

layer.isOpen = true;

симпотичная вещь :) Может обзор запилю :)

Да, делаю.

Повторяю вопрос:
Это слишком размытое определение. Под реакт jsx это определение тоже прекрасно подходит. Уточни, что конкретно ты имеешь в виду с примером кода.

Для меня в этом коде ничего понятного нет. Я его вижу как: кусок разметки и в него запихана какая-то неясная хрень. И что, когда напишешь

layer.isOpen = true;

див откроется? Что произойти то должно?

А если мне нужно гораздо больше заложить логики, 1000 строк кода например реализуют множественную замену представлений внутри этого див. Что я должен сделать, написать в разметку всю эту кашу?

l-liava-l,
nerv_,
Вы два веселых "клоуна". Один не договаривает, другой думает, что все понимают о чём он говорит т.к. все знаю ангуляр.

Я не понимаю, что вы хотите сказать.

И ещё:

не вижу смысла продолжать с тобой обсуждение :)
ты, как обычно, свел все к холивару
нравиться писать много на реакте? Пожалуйста, я не против. Я никого ни к чему не принуждаю. Об этом упоминал выше.
если оглянуться на 3 страницы назад, можно заметить, что ты в эту тему не привнес абсолютно ничего, кроме "ла-ла-ла, я Гозар, а вы все говно"
l-liava-l, например, дал ссылку на интересную либу/фреймворк.

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

Про ангуляр и речи небыло, говорим о преимуществах декларативного синтаксиса.

Каши не будет, ты ведь бьешь js на модули? вот и тут нужно разбивать.

Издеваешься что-ли? :-/

Я офф

Нет, я не издеваюсь. Ты спросил, я ответил. У тебя проблема с моим ответом или ты не в состоянии ответить, т.к. это "прогон" и ответа нет?

Я не увидел преимущества.

Я хочу, чтобы вы подтвердили свои слова чем-то существенным, а не только заявлениями, - "это не я писал" и "неудобно" без объяснений. Почему вы так думаете?

Это сложно?

Не, ну если вы не хотите говорить, я из вас вытягивать заколебался.

Базово компонент реакта - ни разу ни модель, ни представление. Если ты используешь его таким образом - значит, что-то делаешь неправильно.

Гозар, такой Гозар :D Я же через пост об этом пишу:
в теме про реакт, я тебе показал наглядный пример того, сколько кода придется писать для реализации простых вещей
что при однонаправленном потоке данных, много рутинной работы ложиться на плечи программиста и что эту работу может и должен брать на себя фреймворк

Я осознаю, что тем, кто не работал с MVVM это сложно понять.
Вы, те, кто работает с реактом, пишите код для синхронизации модели с представлением и наоборот. Зачем? Это рутина. Это может делать фреймворк.

Можно сколько угодно кричать, что декларативность отстой, но она экономит время. А время это невозобновляемый ресурс)

Допустим, есть у меня декларативный код

<div if="layer.isOpen"></div>

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

if (layer.isOpen) {
    // div show (псевдокод)
}

А если нет разницы, зачем писать больше? Потому, что императивность это круто? Потому, что вам нравиться набирать буквы на клавиатуре? Еще 100500 псевдо-причин?
Повторяю в сотый раз: я не против, пишите. Я никого не тяну на свою сторону. Меня попросили объяснить, я попытался.

Но я уже устал говорить об одном и том же :)

Открываете первую страницу данного треда, выбираете любой MVVM и пробуете.
У некоторых есть песочницы, вообще красота.

можешь написать 3000 (минимум) строк императивной логики на реакте, если тебе нужно 1000 ифов, или не писать ее вовсе используя дерективы. Есть разница между 3000 и 0?) Что больше? Или... что круче?)))

Эта непонятная тебе хрень в html называется директивы. Но (самое интересное), фреймворки, о кот. я писал на первой странице, также реализуют и компоненты. Это же слово вам знакомо? Очень на это надеюсь) Не нравятся директивы? Не используй. Описывай все компонентами. ОНИ ТАМ ТОЖЕ ЕСТЬ. Привык к однонаправленному потоку данных? ПОЖАЛУЙСТА. Но, в отличии от реакта эти фреймворки (многие из них) поддерживают не только однонаправленный но и двухнаправленный, и согласно ужасным тестам производительности стоят рядом с реактом.

Если бы ты, Гозар, прошел по ссылкам на данные фреймворкт или хотя бы почитал описания, которые я давал на первой странице, подобных вопросов не возникало. Ты же не читал? Вообще ничего. Верно?
А у тебя, как у быка красная тряпка перед глазами "реакт не самый быстрый" и подсознательное "я же столько еб*сь, чтобы завести простое туду, так какого лешего и т.п." :)

Надеюсь ты будешь счастлив в своих заблуждениях.

Я сначала прочитал всю тему, и только потом увидел тесты. И как ни странно они после твоих объяснений адекватнее не стали ;)

Ты читаешь только то, что хочешь видеть, игнорируя все что не подходит под "Gozar бычит":
Не пора заканчивать гнать? Ты везде видишь только сарказм и неприятие?

Спасибо за разъяснение стилей :)

Разница есть - код бережется от превращения в кашу при усложнении.

Реакт вполне себе поддерживает двунаправленный биндинг - https://facebook.github.io/react/doc...g-helpers.html

Чем больше кода тем он сложнее :)

Тебе это покажется странным, но у меня как раз наоборот.

Чем больше кода, тем он становится проще.

И ещё.

Чем больше кода, тем меньше кода. ;)

nerv_,
А ты сейчас на что хочешь перейти? Или хочешь остаться на ангуляр. Я для админки хочу подобрать что-нибудь, пусть тяжелое, но чтобы быстро разрабатывалось.

Админка будет большая. Возможно со временем очень большая(много компонентов, SPA).

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