React.js — Руководство для Rails разработчиков

[@Dreyk]

Статья интересная, но лучше пойду почитаю в оригинале. Перевод не очень качественный, читать тяжело

Другая настройка могла бы запустить скаффолд и тогда продолжила бы удалять неиспользуемые файлы/методы но наш проект может стать в таком случае немного грязным

Это вообще машинный перевод, вы что, гугл-транслейтом переводили?

[@markosipenko]

Спасибо за замечание, недочёты буду исправлять.

[@sovetnik]

Есть хороший перевод этой же статьи:
http://doam.ru/react-js-for-rails-developers-part-1/

[@Fedcomp]

Пробовал react-rails и react-on-rails. Таким образом полноценное SPA без перезагрузки приложения не напишешь. Более того, в react-rails даже npm модули нормально на подключишь, а в react-on-rails придется потратить время на переписывание стурктуры приложения под себя, и то, все настроить не получится.

[@addicted2sounds]

Это хорошо, если планируется достаточно немного реакта. В противном случае лучше использовать
github.com/shakacode/react_on_rails

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

[@printercu]

Спасибо за перевод! Понравилось то, что на кофе пишет.

Кто-нибудь пробовал react_on_rails с hot-reload и redux? Там по-сложнее все выглядит (отдельно собирать, webpack поднимать), но redux впечатляюще смотрится. Или оно того не стоит и эти фичи редко используются?

P.s. Странно, что он пробелы не вставлял между кнопками и инпутами — так бы они не слипались. Это особенность бутстрэпа, о которой надо помнить, работая с шаблонизаторами, убирающими пробелы.

[@printercu]

Упс. Не увидел, что про react_on_rails уже писали в других комментариях.

[@eld0727]

imho react часть должна идти отдельной приложухой, и никак не завязываться за другие языки и фреймворки

[@printercu]

Мне кажется, так будет удобно, только если реакт будет рисовать всё полностью, а бэк только жсон отдавать.
У меня пока сомнения насчёт таких SPA.

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

[@eld0727]

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

[@railsfun]

имхо мода на spa сомнительна сама по себе.
Но статья отличнейшая! Автору спасибо.

[@Loremaster]

Можно ли узнать, почему spa — это сомнительно?

[@railsfun]

как ниже вот отписал dgstudio мне даже нечего добавить — манипуляция с данными для серьезных приложений это наиболее важный слой.
И наиболее часто подвергается изменениям из требований бизнеса.
Все это в SPA засунуть с кучей промежуточных слоев, бэкенда, частично порезанного, пусть даже api (теряем всю силу бэкенда если он дает нормальный v-слой) потом архитектура фронтенда… И React еще в рамках view держится. А взгляните на Ember и иже с ними ангуляры.
Да, это способ разработки.
Да, это работает и создаются такие проекты.
Нет, это не окончательный вид интернета или не супер-панацея, мода и серебряная пуля.

[@Apathetic]

Новый tinkoff.ru — SPA на react. Предыдущий тоже был SPA, только на Angular. И знаете, работает.

[@railsfun]

Да, это работает и создаются такие проекты.

[@Apathetic]

И? Какая-то странная позиция. Типа, «это хорошо, но вообще плохо». Почему плохо-то?

[@printercu]

Пример странный вы привели. Сайт довольно простой (вщзможно, я не всё видел), каких-то сложных манипуляций с элементами на странице нет, в основном текстовый контент с картинками. При этом сервер выдает весь этот контент в своей кастомной разметке в json. Соответственно, под это у них еще 2 слоя: тот который на серве рендерит жсон, и тот который это парсит и рендерит в реакт. Вопрос: зачем так усложнять? pjax или turbolinks для этих целей вроде вполне бы хватило.

[@Apathetic]

Интернет-банк — довольно простой сайт? Да, вы не всё видели.
Кастомная разметка в json? Мы точно про один сайт говорим?

[@printercu]

Открыл адрес, который вы указали. При переходе по ссылкам во вкладке "Сеть" в ответах вижу

{"resultCode":"OK","payload":[{"id":"platformCardsCreditPlatinum","type":"credit","benefits":[{"icon":{"text":"300K"},"text":"Кредитный лимит до 300 000 ₽"}...

[@Apathetic]

Ну? Да, АПИ отдаёт жсон. Но что такое кастомная разметка?

под это у них еще 2 слоя

Так можно сказать вообще про любой сайт, который работает через АПИ.

[@railsfun]

Доктор, ну успокойтесь Бога ради дорогой друг. Никто ведь не воюет с SPA. Вы давали клятву врача в конце концов.
Мы уважаем Ваш выбор фронтенда как основы.

[@railsfun]

а кто говорит что «плохо»? Это мое отдельно взятое имхо, причем допускающее что для каких-то проектов и разработок удается использовать SPA как основу и проблем с этим нет.
Но, такой подход не всем подходит.
А слишком черно-бело смотреть на это (или это хорошо, или плохо) я не могу. Промежуточные градации тоже должны быть.
Сам я бекендщик, сужу со своей колокольни. Спросили «почему плохо?» — ответил еще в первом комментарии.

[@Apathetic]

Так вы определитесь, SPA — это сомнительно или всё же некоторым подходит?

[@railsfun]

Некоторым-подходит.

[@Apathetic]

И как определить, кому подходит, а кому — нет?

[@railsfun]

Вам заняться нечем? Не хватает внимания?

[@Apathetic]

Я пытаюсь помочь вам разобраться.

[@railsfun]

мне не нужна ваша помощь.

[@Apathetic]

Вам нет, а вот людям, которые прочитали «SPA — это сомнительно» и «Да — это работает» в одном комментарии, она может потребоваться.

[@railsfun]

ну вот им и помогайте. По мере сил. Несите свет разума в массы.

[@Apathetic]

Где же еще им не помогать, как не в этой ветке?
И вообще, знаете, я клятву врача давал, она обязывает всем помогать — и даже тем, кто считает, что ему не нужна помощь.

[@railsfun]

Для того, чтобы понять — моя фраза «сомнительно» звучала недосказанно как «сомнительно лично для меня, но для других подходит» — не требуется давать клятву врача.

[@dgstudio]

Собственно главная беда реакта озвучена в самом начале: это не MVC, а только view-слой.
Поэтому, как только перед адептами реакта встаёт задача хоть немного манипулировать данными на фронтенде — они начинают ныть и плакать. Элементарные действия вроде сортировки или фильтрации коллекции по набору параметров превращаются в нелепый стыд и боль. Эй, парни! Разработка веб-приложений это на 99% работа с данными, и 1% с визуальным представлением, ау!

А так-то да, виртуальный дом, всё такое.

[@eld0727]

А в чем собственна проблема работы с данными в реакте, если у нас данные и отображение разделены, мы просто меняем данные и отображение рефлектирует эти данные. По мне это один самых простых подходов в работе с данными на клиенте.
P.S. Ну вообще конечно делать подобные манипуляции на клиенте вообще сомнительно, ибо это должно делаться на сервере

[@Envek]

Для полноценных приложений конечно нужно использовать Ember.js, но когда нужен информационный сайт, то самое главное — это Server-side rendering, остальное — вторично. Ибо поисковики, микроразметка и не только.

Именно поэтому я присматриваюсь к React, но в этой статье ничего про рендер на сервере не увидел. Он есть или его нет? Как настроить?

[@printercu]

В ридми к гему написано, что есть.

[@eboyko]

Это, конечно, весело, но блин. 2016 год, рендерить SPA на сервере. Мне кажется, или тут уже начинается анекдот про слона и «вечный кайф»?

[@Envek]

Нет, речь не про SPA. Речь про веб-сайт, каждый URL которого должен отдавать готовый HTML с данными, специфичной микроразметкой и прочими штуками, понятными самописным ботам (т.е. не только движкам популярных поисковых систем). Но при этом сайт должен быть «динамишным».

[@eld0727]

И еще помимо микроразметки рендер spa на сервере уменьшает трафик и количество запросов для первого рендера страницы, так как все возможные запросы для получения данных не покидают сервера.