Pull to refresh

Как мы год живем без sprockets и с react

Reading time 3 min
Views 9.3K
Привет!

Мы в taaasty.ru уже полтора года живем на react-е и почти год без sprockets. Это так здорово, хочу поделиться. За одно расскажу как работает react с рельсами в режиме prerender.

image

ReactJS


Уже много сказано об этой технологии. Хочу лишь подтвердить, да, она прекрасна. Когда я пришел в проект он находился в стадии «давайте чинить эти баги, который вылезли из-з того что чинили вот тот». Во фронтенд желаний крутых фишек было тако много, что стало сразу понятно — мы не сможем учесть все возможные нюансы поведения в JS, а еще параллельно и править баги в легаси-коде без какого-то кардинального решения. И React полностью решает эту проблему.

Сначала мы подключили react-rails и делали компоненты в рельсовом окружении на coffee. Быстро выявились следующие проблемы:

1. JS код большой. Sprockets тормозной. Ожидания компиляции изменения становились все более и более утомительными.
2. Фронтендер-у приходилось настраивать ruby on rails, и не смотря на общее окружение в vagrant, это лишние действия, трата времени.
3. У фронтендер-а свой набор технологий — gulp, webpack и тп, свои пакеты, который в рельсы не подключишь.
4. Кроме фронтендера с html работает еще и верстальщик, а бывает и дизайнер. Им вообще не до рельс. А еще верстку периодически нужно показывать заказчику и это проще делать на статичных страницах по ftp, чем запускать ради этого рельсы.

В общем все шло к тому, чтобы фронтенд выделить в отдельный проект. Так и сделали. Весь React и JS перешел в отдельный репозиторий (его оставили открытым) — github.com/taaasty/web-static

Фронтендер и верстальщик работают со своим стеком технологий, никак не зависят от бакендера, делают свои быстрые сборочки. Могут запустить фронтенд-приложение и на травить его на продавшей или на тестовый сервер по-выбору.

Так как фронт-репозитоирий оставили открытым, подключили бесплатный travis для билдов, и сделали скрипт для выкладывания готового демо-билда на gh-pages — taaasty.github.io/web-static таким образом всегда можно посмотреть последнюю рабочую версию верстки и скриптов.

На этом этапе начали лучше понимать смысл поговорки «разделяй и властвуй».

Sprockets


Так как весь JS и CSS строятся в отдельном репозитории, в рельсах вообще пропала необходимость в сборке и sprockets (жуть). Статичные файлы подключаются в проект в виде git submodules:

$ cat .gitmodules 
[submodule "vendor/static"]
  path = vendor/static
  url = https://github.com/taaasty/web-static.git
  branch=develop

$ ag vendor/static config
config/application.rb
40:    config.assets.paths << Rails.root.join('vendor/static/dist/stylesheets')
41:    config.assets.paths << Rails.root.join('vendor/static/dist/scripts')


во фронт репозитирии лежат готовые файлы сборки для стилей и яваскрипта, их и запрашиваем прямо из html:

= javascript_include_tag 'desktop.production.js'
= stylesheet_link_tag 'desktop.production.css'


Теперь при развертывании нет прекомпиляции (assets:precompile не нужно), выкладывается все уже готовое. Длительность деплоя сократилась с 4-5 минут до 15 секунд.

А как хорошо стало бакендерам — вставил компонент, передал ему параметры нужной структуры и нет тебе никакого геморроя с html и JS. Все это уже решили на фронте. Фактически бакенд стал таким одним большим API — api.taaasty.com

react-rails


Каждый, кто узнает что у нас весь фронт на реакте, в первую очередь спрашивает — ну и как-же пререндер? Да отлично, работает с полпинка, все страницы отдаются с уже готовой версткой.

В ruby есть два рабочих движка для выполнения javascript (и пререндера компонентов). Это therubyracer (использует библиотеку libv8) и nodejs (реально запускает nodejs и отдает ему код на выполнение).

  • therubyracer. Ест память. Течет она. Средняя скорость выполнения компонента ~10-20ms, но иногда на каждый 10-ти тысячный запрос) происходит подвисон до 100-200 мс.
  • nodes безопасный способ выполнять JS код, НО, на каждое выполнение компонента (а их на странице может быть несколько) ruby запускает процесс nodejs (то есть загружает бинарный файл), скармливает исходный файл и забирает из STDOUT результаты. Средняя скорость выполнения компонента 50-80ms из которых большая часть уходит на подгрузку nodejs в память и его запуск.


Мы остановились на therubyracer. На данный момент он рендерит 2-3 тысячи компонентов в минуту. Больше года полет отличный. react-rails остался в проекте и выполняет только функции пререндера.
Tags:
Hubs:
+11
Comments 12
Comments Comments 12

Articles