TL;DR: существует несколько способов интеграции Rails с React, и я обнаружил, что наиболее успешным является webpack-rails. Это первая статья из серии, объясняющей, как можно комбинировать эти инструменты. Здесь — репозиторий (в процессе!) с примером приложения для проверки концепции.

В последнее время я работал над тем, чтобы приложение Rails (сайт, g ithub) интегрировалось с современными инструментами Javascript, такими как Webpack, React и Redux. Проблемы и компромиссы, с которыми я столкнулся в этом опыте, заставляют меня задуматься о вождении в ненастную погоду. Позвольте мне объяснить.

Когда я сажусь писать эту статью, здесь, в Портленде, штат Орегон, идет дождь с дождем. На навесе за моим окном сосульки, каждая ветка в моем дворе скрипит под тяжестью обледенелых листьев, и я чуть не поскользнулся и не упал, когда выносил мусор на бордюр. Если бы я хотел поехать на восток, в Маунт-Худ, чтобы покататься на беговых лыжах, мой бедный Приус (которого с любовью назвали Сильвия) просто не смог бы этого сделать. Это отличная универсальная машина для большей части года, но она не подходит для более сложных условий вождения. И поэтому я зимую в помещении.

Но допустим, мне должен попасть в Маунт-Худ на день рождения друга. Какие у меня будут варианты? Я мог бы пойти и купить большую, более безопасную машину с полным приводом, но у меня нет ни времени на исследования, ни денег на покупку новой машины. И даже если бы я мог, я бы хотел освоиться за рулем своей новой машины, прежде чем ехать на ней по более сложной местности — может быть, у меня нет такой роскоши.

В качестве альтернативы, я мог бы попытаться заставить это работать с Сильвией, дополнив ее несколькими новыми элементами снаряжения — цепями противоскольжения, новыми дворниками и новым комплектом шин — и я мог бы попрактиковаться в вождении ее по холмам в моем районе, прежде чем рискнуть подняться. гора. Хотя этот последний подход не идеален на 100%, он более осуществим в моем бюджете с точки зрения времени, денег и навыков. Учитывая мои ограничения, компромиссы того стоят.

Таков был мой опыт работы с Rails и современным Javascript. Сначала я создал простое приложение на Rails, похожее на мой Prius: оно соответствовало моим ожиданиям как API и хорошо работало в менее требовательных условиях, но вскоре я обнаружил, что его стандартная реализация взаимодействия с интерфейсом не работает. недостаточно для достижения моих целей пользовательского интерфейса. Я знал, что хочу использовать React во внешнем интерфейсе, и я экспериментировал с несколькими инструментами, чтобы это произошло, а именно с драгоценными камнями react-rails и react-on-rails, но ни один из них не был правильным.

По аналогии с автомобилем react-rails был, возможно, более новой моделью Prius: он не настолько сильно отличался от моего текущего автомобиля, чтобы доставить меня к месту назначения (т. е. он прекрасно отображал базовые компоненты React, но не мог использовать некоторые зависимости npm, которые я необходимо для Redux, что было обязательным). А `react-on-rails` был похож на Humvee: он мог бы поднять меня в гору, но его было бы дорого покупать и поддерживать (т. е. это довольно громоздкая зависимость, и у него есть уникальная кривая обучения, чтобы заставить его внутреннюю логику работать). правильно). Чтобы еще раз взглянуть на компромиссы использования этих инструментов для интеграции Rails с React, я предлагаю вам просмотреть эти слайды из доклада React in Hostile Environments Alan Smith.

Подход, который я в конечном итоге выбрал, сродни настройке моего текущего автомобиля с помощью достаточного количества инструментов, чтобы добраться туда, куда я иду. Инструмент, который сделал это возможным для меня, — webpack-rails. Точно так же, как вождение обновленного Prius по скользким горным дорогам, использование Webpack для обслуживания внешнего интерфейса приложения Rails может работать, с той оговоркой, что все еще существуют некоторые риски. Чтобы назвать несколько компромиссов:

  • PRO: основная логика Rails и ActiveRecord не повреждена, поэтому потребовалась минимальная перенастройка моего API Rails для создания объектов JSON, которые хорошо взаимодействуют с React + Redux.
  • ПРОТИВ: переписывание логики моего контроллера для работы с React/Redux означает, что куча моих кропотливо написанных спецификаций контроллера больше не работает. Еще не переписав спецификации для фронтенда (знаю, знаю), я чувствую себя опасно незащищенным, так же, как чувствовал бы себя за рулем на обледенелой трассе.
  • PRO: основные шаблоны Rails MVC для простых представлений, не управляемых данными, все еще в силе, поэтому любая часть приложения может быть настолько простой или сложной, насколько это необходимо.
  • ПРОТИВ. Потребовалось много перенастройки всего приложения только для того, чтобы включить инструменты для взаимодействия, которые могут возникать только на небольших участках сайта и могут стать менее важными по мере развития потребностей продукта.
  • PRO: webpack-rails позволяет вам продолжать использовать конвейер ресурсов в любое время. А именно: я использую Webpack для обслуживания более сложных представлений, обрабатывающих данные с помощью React/Redux, но мои более статические ресурсы, такие как SASS, доставляются через конвейер. Это был приятный сюрприз, когда я установил свою архитектуру SASS, и она просто работала вместе с существующей иерархией компонентов React.
  • ПРОТИВ: делегируя управление активами двум совершенно разным утилитам, я рискую использовать несогласованные архитектурные шаблоны и, возможно, упускаю возможность оптимизировать свою конфигурацию доставки этих активов. Пока это работает, но кто знает, какие непредвиденные последствия могут возникнуть по мере усложнения приложения.

Это много высокоуровневых вещей, и я также хочу обязательно изложить основные моменты того, как эти технологии сочетаются друг с другом. Классический учебник вот что я хотел бы знать, когда начинал — смотрите Часть 2 этой серии.