Есть ли альтернатива React?

Question

[sergealmazov]

Кейс:
Есть сложный компонент. Таблица с кастомными элементами. Берем React, берем Redux. Сейчас же так модно.

И получаем набор абстракций
Action
ActionCreator
Reducer
CombineReducer
Store

Нам нужно использовать connect, чтобы подружить React и Redux. Еще не забывайте про вложенность компонентов и вам тоже нужен.

В итоге приходим к тому, что один компонент состоит из 10-ти слоев абстракций и чтобы сделать простой Handler, скажем на отправку данных на сервер или на клик, нам нужно пройти 10-12 функций...

Для простых компонентов React сгодится, но неужели огромный пласт разработчиков сошел с ума и считает, что все эти абстракции - это нормально?!

Растет сложность, растет стоимость изменений. И вот уже ты правишь Handler у родителя, а до дочернего элемента тебя отделяют 5 слоев абстракций + обвязки в виде Provider, Connect и других страшных слов.

Неужели нет других фреймворков для JS, например с Message-like системой, где есть объекты и каждый друг другу отправляет сообщения на изменения состояния?

И не нужно ходить кругами через ActionCreator -> Action -> ActionDispatcher -> CombineReducer -> Reducer -> State -> и с самого верхнего уровня добираться до ребенка еще слоев 5-6.

Comments

[Islam Ibakaev]

чё-то ты замудрил "пройти 10-12 функции, чтобы отправить данные на сервер..."
покажи пример что-ли

[Иван]

ХЗ, пишу на чистом React без Redux. Все просто и понятно.

[abberati]

react, alt вместо redux + typescript

всё приложение на кончиках пальцев

[sergealmazov]

abberati: можете порекомендовать как typescript и react подружить. Что такое alt?

[abberati]

sergealmazov:

typescript и react

пишете как на обычном es6, только с типами. типы спасают жизни.
вот немного точной информации
alt - лёгонький вариант redux'а без мидлвейров и прочего серпантина

[Евгений Воронин]

В итоге приходим к тому, что один компонент состоит из 10-ти слоев абстракций и чтобы сделать простой Handler, скажем на отправку данных на сервер или на клик, нам нужно пройти 10-12 функций...

Для того чтобы сделать handler для отправки сообщения на сервер, сделайте асинхронный экшен, например при помощи redux-thunk. А после этого пробросьте этот экшен в тот компонент, в котором он нужен при помощи connect. Если вы передаете экшены по цепочке, от родительского в дочерние, и длина цепочки больше 2-х - поздравляю, с организацией кода у вас проблемы.

Хотите писать меньше кода? Посмотрите redux-actions

[Евгений Воронин]

sergealmazov: подключаете typescript-loader к webpack и пишете :) В отличии от бабеля, в ts все плюшки из коробки - decorators, async/await, class properties и много еще чего.

Код станет читаемей, да и рефакторить станет приятней.

Answer 1

[Владимир Кашутин]

https://ru.vuejs.org/v2/guide/
Вот сравнение с react https://ru.vuejs.org/v2/guide/comparison.html

Comments

[sergealmazov]

Спасибо

[Иван]

ХЗ почему, но когда я вижу дефолтные примеры на Vue (в доке), то у меня появляется стойкое ощущение JQuery, вид сбоку.

[sergealmazov]

Иван: может быть. Не хватает системы отправки сообщений, как в ООП-языках.

[Владимир Кашутин]

Иван: с jquery там ничего общего, просто наваждение ) Фреймвок перспективный, советую присмотреться

[Иван]

Владимир Кашутин: "JQuery" в данном случае я имел в виду в кавычках. ИМХО просто сейчас он в тренде, но я вижу много проблем, в часности возможность плодить непонятный говнокод тоннами. React хорошо структурирован и "все на своих местах". Если же у тебя начинается какой-то ад как у ТС, то время задуматься что ты делаешь не так. Ладно, попахивает холиваром ... :)

[dom1n1k]

Иван: anyonecanlearntocode.com/blog_posts/why-vue-not-re...
Русский перевод, кажется, где-то был, но так сходу не найду.

[Растишка]

Иван: Как будто это плохо. jQuery захватил мир потому что простой, лаконичный и решает проблемы. С vue.js то же самое.

Answer 2

[Vlad Feninets]

Порадовала формулировка "Сейчас же так модно." - никто не заставляет вас использовать Ридакс сразу же.
Ден Абрамов (автор Redux) об этом писал - https://medium.com/@dan_abramov/you-might-not-need...

Если у вас достаточно простое приложение, вы можете использовать state, props и коллбэки и все будет ок.

Redux нужен вам, если ваше приложение разрастается и управлять потоком данных становится сложнее:
- допустим вам нужно вызвать коллбэк и обработать его в чайлде, который стоит на том же уровне но через N-детей, в ридаксе же вы вызываете dispatcher и не беспокоитесь о том как же передать этот коллбек туда.
- или если у вас есть данные, которые используются в разных компонентах, редублицировать их? (ноу вэй), удобнее вытаскивать их из одного большущего объекта в таком случае.
- плюс ридакс хорошо решает проблему гонки состояний (иначе вы не сможете наверняка знать, что и в каком порядке у вас происходит на страничке).
- ну и плюс миддлвары

поэтому такое кол-во абстракций вполне оправдано, если конечно у вас есть потребность в них.
А если вам просто нужно по клику на кнопочку что-то перерисовать на страничке, то берете Vue и радуетесь.
Не нужно выбирать технологии только потому, что сейчас они "хайповые".

Comments

[Дмитрий Евграфович]

Redux нужен вам, если ваше приложение разрастается и управлять потоком данных становится сложнее:
- допустим вам нужно вызвать коллбэк и обработать его в чайлде, который стоит на том же уровне но через N-детей, в ридаксе же вы вызываете dispatcher и не беспокоитесь о том как же передать этот коллбек туда.

- это есть в vue.

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

- для этого есть vuex.

- ну и плюс миддлвары

- подозреваю, что задачи ,которые вы решаете мидлварами также решаются в vue

Допускаю, что я просто не встречал задач той сложности, когда vue не справляется и нужен react, просто описанные вами случаи не говорят о том, что здесь нужен именно react, а не какой-нибудь другой фреймворк (в данном случае vue). Хотя с гонкой состояний на фронте пока не сталкивался и в vue этой проблемы не решал.

[ummahusla]

Тоже хотел дать линк на You might not need a redux :)

[sergealmazov]

Дмитрий Евграфович: похоже, что vue - вещь.

Answer 3

[Евгений]

Возможно вы выбрали немного сложную архитектуру, раз у вас возникают такие проблемы. Пользуюсь реактом уже порядка полу года +-, очень удобно работается. Спустя какое-то время при правках никаких проблем не возникает, большая реиспользуемость опять же при правильном подходе.
По поводу вопроса, возможно вам стоит посмотреть в сторону mobx, где тоже реактивный подход. Кода там нужно писать на порядок меньше из-за большой абстракции, но опять же это влечет за собой сложность в понимании происходящего. В redux же все на чистых функциях, никакой магии, все компоненты\редьюсеры\экшены легко покрываются тестами.

Comments

[sergealmazov]

Неудобно, когда до меня написали stateless-компоненты, приходится использовать connect, getWrapperInstance и refs, сюда же ActionCreator, Reducer-ы и Connect.

И все это для отображения простой таблицы. Вот и думаешь - можно ли было проще сделать. А тут 10 шагов (в буквальном смысле) нужно сделать, чтобы изменить какое-то значение. и 5 уровней props-ов прокинуть.

[Олег Лустенко]

sergealmazov: зачем прокидывать пропсы если есть redux. А если нужно прокидывать пропсы, то это уже Реакт.

И чтобы не прокидывать 5 уровней props можно сделать JSX логику проще

render(){
return (
<Somecomponent>
  <AnotherComponent>
    <ComponenWhichNeedProps megaprop={this.state.XXX} />
  </AnotherComponent>
</Somecomponent>
)
}

Somecomponent, AnotherComponent - метод рендер реализует свою слой лейаута + { this.props.children }

Нужно больше конкретики и вам с радостью помогут ответят

Answer 4

[kodwi]

Angular 2 / Vue.js

Comments

[sergealmazov]

Чем Angular лучше React? В React чувствую себя графоманом. А если каждый чих через Redux делать, то это же ппц?!

Answer 5

[ozknemoy]

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