React'а тред

[kobezzza]

jsx шаблоны кажуться сущим адом

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

Но всеравно это лишь шаблонизатор

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

[l-liava-l]

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

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

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

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

[Gozar]

Ещё

vk.com/reactjs

[kobezzza]

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

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

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

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

[Gozar]

Но всеравно это лишь шаблонизатор

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

напоминающее ангуляр.

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

не сам двиг, а решаемые задачи

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

[melky]

jsx шаблоны кажуться сущим адом, та же фигня что можно делать и в jq, но с биндингами. А вот riot.js уже поприятнее.

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

Но всеравно это лишь шаблонизатор, добавим к этому архитектурный паттерн (нативный flux например) + AMD для модулей и вырисовывается нечто чем-то напоминающее ангуляр. (не сам двиг, а решаемые задачи)

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

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

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

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

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

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

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

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

Даешь холливар?

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

React, Angular - это биндинг движки с элементами шаблонов

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

не сам двиг, а решаемые задачи

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

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

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



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

[kobezzza]

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

Это всё понятно. Я же бывший Яндексоид, поэтому я всегда мыслю в категориях: модуль, класс, компонент. Мне 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, чтобы использование было очевидно и чисто.

[Erolast]

JSX is optional and not required to use React. Try clicking on "Compiled JS" to see the raw JavaScript code produced by the JSX compiler.

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

[melky]

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

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

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

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

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

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

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

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

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

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

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

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

.. в методе шаблона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не хочется HTML - ноль проблем.

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

[kobezzza]

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

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

или это просто сахар над библиотечным вызовом?

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

для этого есть кастомные методы с префиксом "render%Something%"

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

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

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

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

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

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