Что сочитать с ReactJS чтобы собрать из него аналог AngularJS?

Question

[vasIvas]

Когда узнал что ReactJS, это не аналог angularjs не очень-то и расстроился.
Но сейчас, после прочтения кучи статей, я начал собирать среду и первым
что меня испугало - нет поддержки ts у текущей версии. Но это ладно, можно
заменить babel от которого меня отпугивает только отсутствия свойств уровня класса.
Не красиво, когда все в конструкторе, вид как у индюка на кислородном баллоне.

Но это к делу не относится. Мне посоветовали использовать redux, но комментарии
меня немного разочаровали и я присмотрелся к reflux, который позиционируется,
как младший и усовершенствованный брат flux собранный командой faceboock.

И получилось так что клиентский боекомплект собран, но нет понимания роутинга.
С AngularJS я не задумывался вообще не о чем. А тут получилось что с роутингом и
всякими хистори и прочем пробел.

Что можете посоветовать из проверенного и как вообще быть?

Comments

[Никита Гущин]

vasIvas чем это вам redux не понравился?

[vasIvas]

Никита Гущин: я не говорю что мне он не понравился. Просто я сначала прочел о reflux и все что было написано, понял. Ещё в коментах не было пошлятины и все соответствовало желаемому. А вот прежде чем читать о reduxe я решил почитать коменты и оказалось что в нескольких из всех, то есть почти во всех, присутствует нотка, говорящая что это не совсем правильное решение. Да еще reflux это от создателей того же react, что сыграло не малую роль. Они же должны были сделать работу над ошибками и воплотили это в виде reflux. Плюс у него нет жестких зависимостей. Например у него реализованы промисы, но их можно заменить на родные одной строчкой кода.
Для ViewModel вполне подходит. Чья-то реализация Model (не знаю реализована ли она как-то в reduxe) мне не нужна. Вот так приблизительно.. а там дальше будет видно. Но по сути мне осталось только роутер, который Вы посоветовали, спасибо. И с хистори ещё пробел.

[Никита Гущин]

vasIvas: что вам нужно от хистори? В роутере используется https://github.com/rackt/history

[Никита Гущин]

vasIvas: базовая идея reduxa в 100 строчек влезет. Там нету не боже упаси промисов, не ViewModel ни чего-то другого. Вообще никаких зависимостей

[Никита Гущин]

vasIvas: cs625527.vk.me/v625527783/4c6a5/nsa1fHpOMQc.jpg вот что 10 минут назад писали о рефлюксе) "not reflux. reflux almost encourages antipatterns, and requires you add some boilerplate to do things in a way that won't cause problems in the future"

[Никита Гущин]

vasIvas: посмотрите видео от создателя redux - качество отстой, но содержание - https://www.youtube.com/watch?v=nwtQMSFikUk

Answer 1

[Сергей Протько]

Когда узнал что ReactJS, это не аналог angularjs не очень-то и расстроился.

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

нет поддержки ts у текущей версии

blog.mgechev.com/2015/07/05/using-jsx-react-with-t...
https://github.com/Asana/typed-react/

отсутствия свойств уровня класса.

ну грубо говоря классов в JS как небыло так и нет...

но нет понимания роутинга.

Так же как и в angular - https://github.com/strml/react-router-component

Никаких пробелов. Для ангуляра к слову такая же примерно штука есть, официальная замена всяким там uiRouter-ам.

С AngularJS я не задумывался вообще не о чем

Это главная проблема angular, люди не думают что делают....

p.s. Реакт в отличии от ангуляра это библиотека. Flux - тоже можно назвать библиотекой. Ангуляр (если мы берем 1.x ветку) - монолитный фреймворк. Вот и вся разница. С реактом вы берете только то что вам нужно.

Comments

[vasIvas]

ts не для актуальной версии. Для 0.14.0 нет.
А вот по поводу "официальная замена всяким там uiRouter-ам", ведь офф замена, если я не ошибаюсь, хуже? И тогда получается что Ваша ссылка на худшею реализацию, а есть лучшая?

[Никита Гущин]

https://github.com/rackt/react-router - более распространенное решение для роутинга в реакте.

[vasIvas]

А Flux и Reflux, это наверное библиотека выполняющая роль посредника между моделью и представлением - ViewModel. При чем второй по описанию кажется удобней и перспективней.

[Никита Гущин]

vasIvas: flux - это архитектура, это паттерн. Есть много его реализаций

[Никита Гущин]

vasIvas: официального роутера (от фейсбука) у реакта нету. Я выше привел ближайшего кандидата)

[vasIvas]

Никита Гущин: а чтобы все "сайтовые дела" с хистори были.. есть что-нибудь? Или это не нужно и сегодня браузеры все сами делают?

[vasIvas]

Никита Гущин: и существует ли reactjs 0.14.0 для babel? Чтобы для новичка подсветка и комплит был? Не могу почему-то найти.

[Никита Гущин]

@vaslvas вот сравнение реализаций: https://github.com/voronianski/flux-comparison . Если смотреть по звездочкам на гитхабе - 1) FLUX от фесбука [8к] 2) Redux [7к] 3) reflux [4к]

[Никита Гущин]

vasIvas: что значит "сайтовые дела" ? В реакт-роутере все что надо есть)

А вот вопроса про babel не понял. babel отдельно, react отдельно. Берете самый свежий babel и все должно работать. А подсветка синтаксиса - это уже вопрос к IDE. У меня WebStorm все подсвечивает (кроме ES7)

[Никита Гущин]

vasIvas: возьмите какой-нибудь starter-kit и от него уже пляшите

[Никита Гущин]

vasIvas: https://github.com/kriasoft/react-starter-kit - например

[Никита Гущин]

vasIvas: вот попалась статья как раз - jamesknelson.com/which-flux-implementation-should-...

[Александр Таратин]

vasIvas: Для подсветки хорош https://github.com/voronianski/oceanic-next-color-... + https://github.com/babel/babel-sublime

[vasIvas]

Никита Гущин: давно хочу спросить и вот он знаменательный момент - у меня phpstorm у которого нет шаблонов создания frontend проектов. Где взять, куда установить?

[vasIvas]

Александр Таратин: цвет действительно замечательный, но у меня phpstorm и нет возможности поменять только цвет синтаксиса, как например в sublime. А смену фонового цвета я не хочу.

[vasIvas]

Никита Гущин: а это видео о чем? В названии reflux не указан и посмотрев бегло я не нашел.

[Сергей Протько]

vasIvas: есть такая возможность, покапайтесь в настройках. Все там есть.

Никита Гущин: да да, я просто ближайший аналог того что в ангуляре смотрел только)

[vasIvas]

Сергей Протько: Вы о цветовой теме? У меня просто в планах было уже сидеть и писать, а я ещё разобраться не могу и меня только это и утомляет:)

[Сергей Протько]

vasIvas: хз, мне норм на дефолтной. А расцветку подсветки синтаксиса поменять можно + есть много готовых.

[vasIvas]

Сергей Протько: я не в подсветке разобраться не могу, а в redux и reflux :) Не хочу обидеть помогающих, но такое ощущение, что вэб программисты не любят и не понимают событий и для них redux и reflux что-то не очень простое. По этому я не могу из них вытянуть того что мне нужно понять. Вот такое чувство, что redux и reflux, это самый обычный контроллер, но почему-то все об этом молчат.

[Сергей Протько]

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

[vasIvas]

Такое чувство что это вообще чья-то шутка. "Создатели facebook придумали новый паттерн flux, который подписан на события представления, получает данные и передает их в модель. А модель потом шлет события представлению, чтобы представление забрало их из модели". Это шутка? Я вроде первый свой спор о mvc начал именно с такой концепции и ярый её сторонник. И не facebook её придумали, а придумали её сорок лет назад и на as3 так минимум с 2007 года пишут. Вообще мозг выносит этот реакт..

[Сергей Протько]

vasIvas: не спроста же в гейм деве используется CES вместо так любимых в разработке приложений MVC/HMVC/MVVM. Задумайтесь.

[Сергей Протько]

vasIvas: это называется "маркетинг". Вообще то что вы описали это классическое MVC, где вью и модель связано обзервабл связью (не совсем события в контексте реакта, в ангуляре эту задачу обрабатывают байндинги, за реакт говорить не берусь). И да, этой штуке уже 35 лет.

[vasIvas]

Сергей Протько: вот ссылка в которой описан подход "революционный" подход "придуманный facebook - habrahabr.ru/post/249279 чтения на пять минут. и я ошибся, это не они придумали, это они так событийную модель назвали. Если точнее, то -

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

А что такое ces?

[Сергей Протько]

vasIvas: https://en.wikipedia.org/wiki/Entity_component_system

[vasIvas]

Сергей Протько: и в ректе события это eventemitter. То есть, тот же диспетчер, только немного разбавлен дополнительными методами.

[Сергей Протько]

vasIvas: я не читаю всякий пиар-бред. Ангуляр как по мне намного больше революционных идей нес на момент своего появления. Сейчас реакт идеологически более правильная концепция, но angular2 должен это дело уровнять.

[Сергей Протько]

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

Answer 2

[Александр Таратин]

от которого меня отпугивает только отсутствия свойств уровня класса.

https://babeljs.io/blog/2015/06/07/react-on-es6-plus/

// The ES6+ way
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

Answer 3

[Александр]

Для двухсторонней связанности данных есть официальный mixin https://facebook.github.io/react/docs/two-way-bind...
reflux многие критикуют за отказа от диспетчера, если выбирать между ним и redux то redux.
Поможет определится видео www.youtube.com/watch?v=Uyk_8WWna6s

Comments

[vasIvas]

Я хотел было написать что в reflux есть диспатчер и даже есть возможность, но потом вновь пробежал статью и вот что -

Диспетчера событий (dispatcher), который в Flux был синглтоном, в RefluxJS нет. Вместо этого каждое событие (экшен) является своим собственным диспетчером.

И теперь я понимаю, что я так быстро читал, что в моем сознании сложилось мнение что "вместо синглтона теперь все пасибо всем кто участвовал в склонении меня в сторону redux. Сейчас о нем почитаю. Но если не сложно, то очень коротко, что этот redux делает?

[Александр]

vasIvas: Если коротко: flux изначально делали для клинской части и для сервера он не предназначен, redux может где угодно работать, в редукс очень легко сдлеать историю событий и шагать по дейсвиям, отменять и повторять их, это позволяет сделать горячую перезагрузку кода без потери текущих введеных данных, то есть допустим мы что-то тестируем и ввели данные в список дел, нашли баг, исправил и наши данные не куда не делись, это очень удобно при отладке, и насколько знаю есть только в redux, так же там есть redux-dev-tools небольшая панель которая показывается в режиме отладке позволяющая в 1 клик отменить любое действие или посмотреть состояния компонентов. в redux то же нет диспетчера, но и сам redux не говорит что это flux, некоторые разработчики оригинального flux написали в своем твитере что им очень понравился redux. И естесвенно это все лучше использовать вместе с webpack.

[Александр]

Для начала рекомендую изучить https://github.com/davezuko/react-redux-starter-kit (только клинесткая часть без сервера) или https://github.com/erikras/react-redux-universal-h... (псведо изоморфный варинт со встроенным сервером) и встроенные примеры, демонстрация redux dev tools https://github.com/gaearon/redux-devtools

[vasIvas]

OneFive: как нет деспатчера? А как же события существуют без деспатчера? Стоп. Вот сейчас я вспомнил настоящие мысли на момент прочтения статьи. Пойду ещё раз пробегу, чтобы подтвердить.

[Александр]

Тут автор сам расказывает про redux radiojs.ru/2015/07/radiojs-28

[Александр]

vasIvas: Подобие диспетчера в redux - это store, но выполняет немного другую роль.

[vasIvas]

OneFive: нет, не то я подумал. Но я решил не гадать и залез в reflux и там в первых строчках описывается EventEmitter, что по сути и есть тот же диспетчер. Вот, взгляните - https://github.com/reflux/refluxjs/blob/master/dis...

[Александр]

vasIvas: Случайно пропустил слово "глобального", хотел написать "глобального диспетчера"

[Александр]

vasIvas: Можно ещё посмотреть fluxible от yahoo, он то же весьма неплох и является одним из новых flux реализаций.

[Никита Гущин]

vasIvas: посмотри это видео https://www.youtube.com/watch?v=nwtQMSFikUk и большинство вопросов отпадут. Создатель redux рассказывает о идеях, которые в нем заложены.

[vasIvas]

OneFive: Вы производите впечатление понимающего пользователя reactjs. скажите - что вообще делает этот reflux и redux? Я понял так. У меня есть reflux который слушает события от представления. Вот он получил события и передал данные от переданные с этим событием в модель, которую создаю ведь я? Ведь reflux и redux не имеют своих моделей клиентских? Вот и следующий момент, что они reflux и redux делают после, как они обновляют представление?

Я это к чему спрашиваю. Я просто уже целый вечер потратил, а чувство такое, что сам бы сделал за несколько минут. Ведь суть в том, чтобы представление передавало данные вместе с событием "куда-то". Это "куда-то" "что-то" делало с этими данными и по окончанию посылало событие "change" этому представлению. Точнее посылает событие не сам этот "куда-то", а "куда-то" инициирует вызов события в том объекте на который подписано то представление, которое все и начало. Ведь на этом работа reflux и redux заканчивается?

[Александр]

vasIvas: Вместо моделей используются состояния которые содержат данные. Можно все это сделать и самому, но тогда могут быть проблемы с архитектурой и интегрированием в уже готовые для redux,reflux модулей, например панель отладки для redux, система отмены состояний, горячая замена. Если пропустить настройки redux то что-бы нам сделать приложение на нём нужно добавить файл actionTypes с константами экшенов, файл *action где будет указано соответствие экшенов с редусерами и файл сам редусер, не так много и не так сложно. В будущем когда придет новый человек он будет уже знать redux или научится по докам, а с самописным решением будут проблемы.