Я прикрутил Snakeskin и мне норм :)

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

Имеешь ввиду что при сборке твои Snakeskin шаблоны превращаются в jsx? или нет?

Как это не шаблонизатор если мы динамично генерим html?

vk.com/reactjs

Угу, я сейчас играюсь с этим, чтобы разработать наиболее удобный подход и реализовать его в SS 7.

Ну, я имел ввиду, что классических средств шаблонизации там почти нет (впрочем как и в Angular). Т.е., например, SS, Jade - это шаблонизаторы, а React, Angular - это биндинг движки с элементами шаблонов :)

Задрали уже компоненты шаблонизатором называть. По сути реакт - классы с однонаправленным потоком.

Ну дык разгони его до скорости реакта.

Все задачи похожи и решаются тоже похожими способами потому, что они похожи!

в nodejs ты свою верстку на жуквери не отрисуешь (да и ангуляра тоже)
имеется в виду - без тулз типа jsdom и prerender

unix way - Пишите программы, которые делают что-то одно и делают это хорошо.
пасаны, которые написали это, построили огромнейшую систему - ну вы в курсе
кстати, сами компоненты реакта - хороший пример реализации модуля(частицы функционала, грубо говоря) из largescalejs от Османи

SEO и тормознутость. эти же проблемы у Polymer ... насчет riot - хз, не юзал

а так - отлично всё. мне он нравится тем, что большинство работы делается автоматически

ангуляр с виджетами типа kendo или бутстрапа (ngStrap) - идеальный тулкит для админок :Р

правда, встроенные велосипеды типа модулей (DI) и промисов меня вгоняют в грусть... почему я должен, без права выбора, использовать AMD (я хочу ES6 modules) и недообещания (я хочу полный фич bluebird)?
тогда и жуквери и ангуляры - это шаблонизаторы, потому что динамично генерят хтмл)

советую ознакомиться с темой прежде чем пытаться травить ;)

компонент - это не биндинг с шаблоном, это модуль

ну нифига себе ты зарядил
в реакте царит композиция (компонентов) и чистые функции, иммутабельность и реактивность
в ангуляре - mvc и мутабельность(модели), функции со сторонними эффектами (в контроллерах)

в mvc царит мутабельность и связи (двунаправленные), изоляция
во flux - реактивность, иммутабельность и глобализация

angular, react \ mvc, flux - это совсем разные вещи. их нельзя сравнивать "лучше\хуже".



l-liava-l, у тебя сегодня ДР ? с днём рождения)

Это всё понятно. Я же бывший Яндексоид, поэтому я всегда мыслю в категориях: модуль, класс, компонент. Мне React понравился сразу именно своей простотой и гибкостью, но его "шаблоны" - это шаг назад, поэтому я сразу же выкинул их :)

Что я имею ввиду, разложу по полочкам:

1) В терминах БЭМ каждый компонент можно описать как папочку:

b-button
  .. b-button.js (бизнес логика)
  .. b-button.styl (я использую Stylus)
  .. b-button.ss (я использую SS)
  .. b-button.json (тут описано от кого наследуется наш компонент и от кого зависит, чтобы не описывать это отдельно в каждом файле)

Поэтому первая задача SS в JSX - это вынесение шаблона в отдельный файл/ы.

2) Думаю многие из вас юзают АНБ при именование классов в CSS и используют Stylus для удобной работы с ним:

.b-input {
  &_style_warning {
    ...
  }

  &__wraper {
    ...
  }

  &__input {
    ...

    &_focused_true {
       ...
    }
  }
}

.b-select {
  @extend .b-input;
  ...
}

И SS полностью переносит концепцию Stylus в шаблоны:

- template bInput(@params)
   < .b-input[.&_style_warning]
     < .&__wrapper
       < .&__input[.&_focused_true]

- template bSelect(params) extends bInput
   ...

3) В SS встроены средства локализации на уровне синтаксиса, т.е. чтобы локализовать строку, то её достаточно взять в апострофы

- template foo()
  < h1.warning
     `Привет мир!`

4) Частый кейз, когда нам нужно определить ряд методов для шаблона, например, для генерации иконок (например, Font-Awesome)

- proto base->icon(name, opt_title)
  < i.fa.&-${name} title = ${opt_title}

- placeholder base()

И потом просто наследуемся от базового класса и юзаем эти методы.

5) Опциональный Jade-like синтаксис (синтаксис хоть и похож местами на Jade, но в целом другой, просто я хз как было его назвать)

Тупо меньше пишем :)


***

Теперь пример с React: реализуем 3 компонента:

1) i-base -- базовый компонент, где определяем общие методы и т.д.

i-base
  .. i-base.js
  .. i-base.styl
  .. i-base.ss
  .. i-base.json

class iBase extends React.Component {
  someMethod() {
    ...
  }
}

.i-base {
   ...
}

- template iBase.prototype.render()
  - proto icon(name, title)
    ...

  - proto logo(style)
   ...

2) b-input -- поле ввода

b-input
  .. b-input.js
  .. b-input.styl
  .. b-input.ss
  .. b-input.json

class bInput extends iBase {
   ...
}

.b-input {
   @extend .i-base
}

- template bInput.prototype.render() extends iBase.prototype.render

3) b-select - выпадающий список, естественный наследник b-input

Тут логика ясна.


***

Ну и напоследок пример компонента, который вызывает другие компоненты

b-upload

- template bUpload.prototype.render() extends iBase.prototype.render
  - block root
    < b-input value = { this.state.value }
    < b-button value = Отправить!

***

По сути я просто взял БЭМ (кто не в курсе, то читать немедленно) и натянул на реакт, и полученная архитектура очень удобна и управляема.

Сейчас я работаю над максимально бесшовной интеграцией SS с React, чтобы использование было очевидно и чисто.

http://facebook.github.io/react/#examples
Не хочется HTML - ноль проблем.

kobezzza, а не потеряем ли мы VDOM (и серверную отрисовку) при использовании SS ?

webpack дал возможность создавать таки папочки :)
папочки даже с картинками, если нужно (я так не делаю)

палец вверх. это круто :)

имхо, это лишнее - взял и включил движок локализации в шаблонизатор

или это просто сахар над библиотечным вызовом? если так, то опять таки, палец вверх :)

для этого есть кастомные методы с префиксом "render%Something%"
пример: http://jsbin.com/rejicofuvu/1/edit?js

хотя, я был бы не против засахарить это :

const linksToPages = this.props.pages.map(this.renderPageLink)

.. в методе шаблона
нечего сказать, это классно :) я устал от этих <ДИВЧИК></ДИВЧИК> (знаки "<", ">", "/" находятся справа снизу... чертов левша, да :) )

сейчас для этого есть mixin'ы

наследование классов ... вроде с 0.13 версией добавили фишки для ES6 классов (+наследования?), так что должно получиться круто

я не вникал в 0.13 и новые классы ES6 , так что промолчу. но чувствуется, что это тоже круто)

наследование шаблонов. ня
не знаю, правда, кейса для этого (реального кейса, а не вымышленные наследования Animal и Cat)

угумс. я использую в работе БЭМ, но не как методологию, а как идею:

http://jsbin.com/zehurojinu/1/edit?js

обрати внимание на классы - это просто пздц.

удачи в этом нелегком деле :) сторонние шаблоны для реакта - этого не хватает (по крайней мере, мне)

да ну нафиг. обменял jsx на уродливые вызовы div(fuck, this, i, hate, that!)

Конечно нет, результатом работы SS будет "шаблон" React, т.е. с точки зрения React он ничего не заметит.

Да это сахар, SS может либо заменить строку по заданному хешу, либо обернуть вызовом указанной функции (которую можно задать вручную), а также может вернуть объект всех найденных строк локализации.

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

Это мега круто, ты просто не проникся, я же привёл реальный пример:

Базовый шаблон->Input->Select->MultiSelect и т.д.

Да там делов не так много, сам SS то написан уже, просто ща времени нет, но через 2 недели сажусь плотно.