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

[nerv_]

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

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

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

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

[nerv_]

Ractive.js

The diamond age of web development

• реализует паттерн 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' }
});

[nerv_]

Mithril

A client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain

• реализует паттерн 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);

[nerv_]

Vue.js

A library for building interactive web interfaces

• реализует паттерн 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

[nerv_]

rivetsjs

Lightweight and powerful data binding + templating solution for building modern web applications.

• реализует паттерн 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})

[Gozar]

Angular VS Knockout VS Ember VS React VS Mithril VS Vue

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

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

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

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

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

[nerv_]

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

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

[Gozar]

не надо холивара

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

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

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

[Gozar]

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

[Gozar]

Что такое форум