Как мы перестали бояться тикетов на UI

[r_zaycev]

В какой момент мир сошел с ума и вот такое:

module DirectCrm {
export class CustomFieldKindComponentBase extends React.Component {
render() {
return



/* so much shitty html… */

стало нормальным?

[timramone]

Да уже несколько лет как :)
Примерно в тот момент, когда ребята из facebook поняли, что всё это время мы отделяли представление от логики неправильно, и гораздо естественнее создавать компоненты, а не разделять «вёрстку» и «логику» просто потому что так принято.
У Александра Соловьёва на эту тему просто шикарнейший доклад, обожаю его, можете посмотреть.

[timramone]

Ой, это только какая-то не та версия. Вот оригинальное видео, а то, что выше — уже какая-то другая версия того же доклада, не та, которую я хотел скинуть
Вообще у этого чувака много очень смешных выступлений, например вот это про FRP и ClojureScript.

[sshikov]

>Я увидел что реакт — в продакшене на куче крутых сайтов. FB
Вы не представляете, как это местами смешно выглядит. Не, правда.

Я не про ваш выбор вовсе — я про аргументы типа, что «это в продакшн у FB». Я с трудом могу вспомнить более глючное, плохо продуманное, менее предсказуемое приложение, чем FB. И да, я не про компоненты вовсе, а просто о том, что FB в качестве примера для других — это мягко говоря не довод.

Кроме всего прочего, у вас действительно достаточно сложный UI, какого у FB не встретишь. И другие технологии в основе.

[timramone]

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

[sshikov]

Ну, согласитесь, что это лишь один фактор из многих. Причем непонятно какой по важности — зависит от жизненного цикла вашего проекта. И чрезвычайно сложно оцениваемый.

Ну вот вам реальный пример — был у меня проект, лет пять назад. UI — где-то на уровне вашего по сложности. Огромные формы, сложные зависимости, нетривиальные компоненты. В качестве одного из инструментов предлагался Flex. Аргументы против были именно в этом духе — технология мол не будет поддерживаться. Пять лет прошло. Тот проект давно в могиле — в том числе потому, что на выбранной другой технологии его просто не получилось сделать. Flex никуда не делся. А сколько javascript фреймворков за эти пять лет померли и были забыты?

[heilage]

Скажем так, решение ребят из fb вряд ли было серьезно обоснованным, скорее оно выросло в результате поиска наименее болезненного варианта записи многословных и многочисленных React.createComponent()-выражений. Какое может получиться месиво из js и jsx для более-менее сложного компонента — можно представить. При этом возможности реакта никак не ограничивают эту потенциальную сложность, и даже поощряют ее, например предлагая писать условные конструкции внутри jsx на js. Это всё оправдывается необходимостью постройки virtualdom, но смешивание разметки и логики не кажется необходимым.
Впрочем, для небольших компонентов, где мало разметки и мало кода (привет счетчику людей онлайн в fb), все же проще смешать все воедино. Основной вопрос как всегда в том, где граница между небольшим и большим :)

[u_story]

Здравствуйте, а вы не смотрели на ExtJs как альтернативу для интерфейсов?
Мне кажется это ускорило бы разработку в разы.

[timramone]

Мы не рассматривали ExtJs

[RouR]

Большая просьба — напишите todo-list по аналогии с http://todomvc.com/ Со всеми вашими хэлперами и выложите проект на гитхаб. Так легче сравнить ваш способ с другими.

[RomanPavlov]

Присоединяюсь к реквесту.

[i360u]

Люди моляться на Реакт просто потому, что не умеют работать с DOM, с данными в SPA не знают о веб-компонентах и не в курсе современных стандартов. Что вообще вам дает Реакт, кроме декомпозиции?

[rosko]

Правильную декомпозицию

[i360u]

А "неправильная" — это какая? Я, как человек работавший с Реактом, хорошо представляю как там этот впорос решен. Я не против Реакта, но совершенно не вижу в нем панацеи и знаю о его недостатках и альтернативных решениях. Так в чем правильность?

[rosko]

А я и не говорю, что реакт — это панацея. Но декомпозиция реакта (для view-слоя) на порядок удобнее и практичнее, чем в AngularJS, Backbone и тем более jQuery.

[timramone]

Как-то так:

• Сильно уменьшает сложность за счёт именно правильной декомпозиции.
• Имеет очень низкий порог вхождения: практически любой разработчик может за разумное время поправить баг в UI и не разломает при этом всё.
• Даёт возможности для статической типизации всего UI. Не думаю, что какой-то другой фреймворк даст возможность проверить, что в "<a hrea" нет опечатки. Какой-нибудь статический анализатор html может это сделать, но это тривиальный случай, статическая типизация даёт на много больше, чем это, но я тут не хочу углубляться. Для нас это очень важно, как можно было понять из статьи.

[i360u]

По двум первым пунктам — это только в сравнении с адом легаси-кода. Третий пункт частично принимается. Однако это не преимущество именно Реакта. Я прекрасно могу писать на TypeScript и использовать веб-компоненты для декомпозиции.

[DmitryOlkhovoi]

Окей, веб компоненты сырые, те полифилы, что есть на подобие ShadyDOM далеко не идеальное решение. Собственно я еще не видел изоморфные апп с подобными компонентами? Более того, чем не нравятся компоненты реакта? В чем профит использования веб-компонентов по вашему? У вас есть проект в продакшене с веб-компонентами?
И в конце концов, никто не молится на реакт. Это просто кейс, а вы холивар разводите

[i360u]

Да, у меня есть проект с весьма сложным интерфейсом на веб-компонентах. И если кто-то описывает свой "кейс" публично, то видимо это подразумевает какое-то последующее обсуждение, тем более что затронут вопрос выбора стека. Но, пожалуй, не буду больше "холивар разводить", раз это так всех нервирует.

[osharper]

а напишите тоже статью по мотивам вашего проекта? мне вот нравится тайпскрипт и не нравятся существующие системы декомпозиции UI (имею ввиду Angular и React). К веб-компонентам присматривался, но я был бы очень рад этакой jumpStart-статье, где был бы знакомый мне typescript в связке с веб-компонентами.

[i360u]

Давно хочу это сделать. И обязательно постараюсь сделать это в ближайшее время.

[osharper]

вот тут нашел штуку, в которой все и сразу :)

[SamVimes]

• А это точно правильная декомпозиция? Выглядит немного адово по-сравнению с ангуляром=)
• Согласен на все 100%
• Второй ангуляр на тайпскрипте

[Youkai]

Насколько я понимаю, html-шаблон у Angular все равно будет не строго типизированным. Эту проблему, к сожалению, никто кроме разработчиков tsx не решил.

[vintage]

tsx тоже не решил. Вы можете передавать компоненту любые атрибуты и компилятор не ругнётся. Или там нужны какие-то особые флаги компиляции?

[timramone]

Разумеется, вы не можете. Никаких особых флагов, кроме --jsx (кажется, он так называется) не нужны.
Компонент — generic от его props. Всё, что не указано в generic типе, передавать, разумеется, нельзя.

[vintage]

Вы правы, меня ввело в заблуждение, что этот код компилируется:

namespace React {
    export function createElement(){}
}

class Foo {
}

class Bar {
    render() { return <Foo foo={()=>5} /> }
}

[krekerov]

Видно, что интерфейс писали fullstask, не в обиду оным.