Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Обзоры фреймворков, библиотек, компонентов и прочего (https://javascript.ru/forum/offtopic/55538-obzory-frejjmvorkov-bibliotek-komponentov-i-prochego.html)

nerv_ 03.05.2015 02:03

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

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

nerv_ 03.05.2015 11:19

Ractive.js. The diamond age of web development
 
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_ 03.05.2015 11:21

Mithril. A client-side MVC framework
 
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_ 03.05.2015 11:23

Vue.js

Цитата:

A library for building interactive web interfaces

Пример кода
<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_ 03.05.2015 11:26

rivetsjs

Цитата:

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

Пример кода
<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 03.05.2015 12:15

Цитата:

Сообщение от nerv_
Angular VS Knockout VS Ember VS React VS Mithril VS Vue

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

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

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

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

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

nerv_ 03.05.2015 12:25

Цитата:

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

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

Gozar 03.05.2015 12:35

Цитата:

Сообщение от nerv_
не надо холивара

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

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

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

Gozar 03.05.2015 12:39

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

Gozar 03.05.2015 12:42

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


Часовой пояс GMT +3, время: 14:20.