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 03:03

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

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

nerv_ 03.05.2015 12: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 12: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 12: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 12: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 13: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 13:25

Цитата:

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

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

Gozar 03.05.2015 13:35

Цитата:

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

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

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

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

Gozar 03.05.2015 13:39

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

Gozar 03.05.2015 13:42

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

nerv_ 03.05.2015 14:25

Цитата:

Сообщение от Gozar
Заставлять людей молчать и подчиняться твоим требованиям на общем форуме в оффтопике тоже неадекватно.

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

Gozar 03.05.2015 15:53

Цитата:

Сообщение от nerv_
всего лишь попросил предоставить адекватные на твой взгляд тесты производительности фреймворков

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

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

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

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

nerv_ 03.05.2015 21:26

Цитата:

Сообщение от Gozar
Для того, чтобы предоставить адекватные тесты, нужно адекватно сравнивать, для начала

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

Цитата:

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

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

Gozar 03.05.2015 22:00

Цитата:

Сообщение от nerv_
времени на обзор у меня сейчас нету

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

Цитата:

Сообщение от nerv_
тесты писал не я

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

Цитата:

Сообщение от nerv_
еще как минимум два фреймворка (описанных мною выше) используют виртуальный дум.

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

Gozar 03.05.2015 22:06

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

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

l-liava-l 04.05.2015 00:42

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

https://muut.com/riotjs/

Gozar 04.05.2015 00:58

Цитата:

Сообщение от l-liava-l
https://muut.com/riotjs/

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

Erolast 04.05.2015 09:53

Цитата:

кому не нравится jsx, а тобишь reactjs
JSX для реакта опционален, вообще-то.

l-liava-l 04.05.2015 13:46

Цитата:

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

Gozar 04.05.2015 13:52

Цитата:

Сообщение от l-liava-l
меня корробит от того что нужно связывать модель и представление в js

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

Gozar 04.05.2015 13:53

Цитата:

Сообщение от l-liava-l
можно еще на ванили писать

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

Gozar 04.05.2015 13:57

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

l-liava-l 04.05.2015 14:17

Цитата:

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

Цитата:

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

Gozar 04.05.2015 14:22

Цитата:

Сообщение от l-liava-l
Это неудобно делать всегда.

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

Цитата:

Сообщение от l-liava-l
именно в ней стоит указывать взаимосвязь

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

l-liava-l 04.05.2015 14:31

Цитата:

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

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

Цитата:

В чём в ней? В тегах(разметке), в DOM, в чём?
Цитата:

хтмл страничку
В разметке.

nerv_ 04.05.2015 15:05

Цитата:

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

проблема в том, что ты, как разработчик, вынужден писать много кода, для того, чтобы делать простые вещи
В случае с архитектурой MVVM код прост, понятен, очевиден:
<div if="layer.isOpen"></div>
layer.isOpen = true;

Цитата:

Сообщение от l-liava-l
https://muut.com/riotjs/

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

Gozar 04.05.2015 15:10

Цитата:

Сообщение от l-liava-l
Ты абсолютно всегда и везде делаешь document.getElementById?

Да, делаю.

Повторяю вопрос:
Цитата:

Сообщение от Gozar
В чём неудобство?

Цитата:

Сообщение от l-liava-l
В разметке стоит указывать взаимосвязь ее состояния от модели

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

Gozar 04.05.2015 15:12

Цитата:

Сообщение от nerv_
В случае с архитектурой MVVM код прост, понятен, очевиден:
<div if="layer.isOpen"></div>
layer.isOpen = true;

Для меня в этом коде ничего понятного нет. Я его вижу как: кусок разметки и в него запихана какая-то неясная хрень. И что, когда напишешь
layer.isOpen = true;
див откроется? Что произойти то должно?

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

Gozar 04.05.2015 15:16

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

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

И ещё:
Цитата:

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


nerv_ 04.05.2015 15:25

Цитата:

Сообщение от Gozar
Вы два веселых "клоуна". Один не договаривает, другой думает, что все понимают о чём он говорит т.к. все знаю ангуляр.

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

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

l-liava-l 04.05.2015 15:29

Цитата:

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

Цитата:

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

Цитата:

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

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

Я офф

Gozar 04.05.2015 15:32

Цитата:

Сообщение от l-liava-l
Издеваешься что-ли?

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

Цитата:

Сообщение от l-liava-l
говорим о преимуществах декларативного синтаксиса.

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

Gozar 04.05.2015 15:38

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

Это сложно?

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

Erolast 04.05.2015 15:45

Цитата:

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

nerv_ 04.05.2015 16:54

Цитата:

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

Это сложно?

Гозар, такой Гозар :D Я же через пост об этом пишу:
Цитата:

Сообщение от nerv_ url=http://javascript.ru/forum/offtopic/55538-obzory-frejjmvorkov-bibliotek-komponentov-i-prochego-3.html#post369378
проблема в том, что ты, как разработчик, вынужден писать много кода, для того, чтобы делать простые вещи
В случае с архитектурой MVVM код прост, понятен, очевиден

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

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

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

Допустим, есть у меня декларативный код
<div if="layer.isOpen"></div>

в ходе работы программы он будет преобразован в императивный - так вами любимый и единственно правильный код
if (layer.isOpen) {
    // div show (псевдокод)
}

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

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

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

Цитата:

Сообщение от Gozar
Для меня в этом коде ничего понятного нет. Я его вижу как: кусок разметки и в него запихана какая-то неясная хрень. И что, когда напишешь
layer.isOpen = true;
див откроется? Что произойти то должно?

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

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

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

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

Gozar 04.05.2015 17:16

Цитата:

Сообщение от nerv_
зачем писать больше? Потому, что императивность это круто? Потому, что вам нравиться набирать буквы на клавиатуре? Еще 100500 псевдо-причин?

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

Цитата:

Сообщение от nerv_
Ты же не читал? Вообще ничего. Верно?

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

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

Сообщение от Gozar
Хотелось бы увидеть сравнение riotjs vs fluxxor

Цитата:

Сообщение от Gozar
я перейду на Fluxxor или riot

Не пора заканчивать гнать? Ты везде видишь только сарказм и неприятие?

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

Erolast 04.05.2015 19:08

Цитата:

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

Цитата:

Но, в отличии от реакта эти фреймворки (многие из них) поддерживают не только однонаправленный но и двухнаправленный
Реакт вполне себе поддерживает двунаправленный биндинг - https://facebook.github.io/react/doc...g-helpers.html

l-liava-l 04.05.2015 19:15

Цитата:

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

Gozar 04.05.2015 20:16

Цитата:

Сообщение от l-liava-l
Чем больше кода тем он сложнее

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

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

И ещё.

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

Gozar 05.05.2015 22:31

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

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

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


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