Привет! Мы в taaasty.ru Пользуемся реактом уже полтора года и без звездочек уже почти год. Это так круто, хочу поделиться.
Сначала я расскажу вам, как React работает с рельсами в режиме пререндера.
РеактJS
Об этой технологии уже много сказано.Я просто хочу подтвердить, что да, она красивая.
Когда я пришел в проект, он был на стадии разработки.
«Давайте исправим эти ошибки, которые возникли, потому что мы исправляли эту "Во фронтенде было так много крутых фич, что сразу стало понятно, что мы не сможем учесть все возможные нюансы поведения в JS, и в то же время исправлять ошибки в легаси-коде без какого-либо радикального решения.
И React полностью решает эту проблему.
Сначала мы соединили реактивные рельсы и создали компоненты в среде рельсов, используя кофе.
Вскоре возникли следующие проблемы: 1. JS-код большой.
Звездочки тормозят. Ожидание компиляции изменений становилось все более утомительным.
2. Фронтендеру пришлось настраивать Ruby на рельсах, и несмотря на общее окружение в бродяга , это ненужное действие, пустая трата времени.
3. Во фронтенде свой набор технологий — gulp, webpack и т.д., свои пакеты, которые нельзя подключить к рейлам.
4. Помимо фронтенда, с html работает и верстальщик, а иногда и дизайнер.
Рельсы их вообще не волнуют. А макет тоже нужно периодически показывать заказчику, причем проще это сделать на статических страницах по фтп, чем запускать для этого рельсы.
В общем, всё шло к выделению фронтенда в отдельный проект. Так они и сделали.
Весь React и JS перенесены в отдельный репозиторий (его оставили открытым) — github.com/taaasty/web-static Фронтенд-разработчик и верстальщик работают с собственным стеком технологий, никак не зависят от бэкендера и делают свои быстрые сборки.
Они могут запустить интерфейсное приложение и отправить его продавцу или на тестовый сервер по своему выбору.
Так как фронт-репозиторий остался открытым, мы подключили бесплатный тревис для сборок, и сделали скрипт для размещения готовой демо-сборки на gh-pages — taaasty.github.io/web-static таким образом вы всегда сможете просмотреть последнюю рабочую версию макета и скриптов.
На этом этапе мы начали лучше понимать смысл поговорки «разделяй и властвуй».
Звездочки
Так как весь JS и CSS собраны в отдельном репозитории, в рельсах нет необходимости в сборках и звездочках (ужас).Статические файлы включены в проект в виде подмодулей git:
Фронтальный репозиторий содержит готовые файлы сборки для стилей и JavaScript, и мы запрашиваем их напрямую из html:$ 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')
= javascript_include_tag 'desktop.production.js'
= stylesheet_link_tag 'desktop.production.css'
Теперь при развертывании нет прекомпиляции (assets:precompile не нужен), все выкладывается уже готовое.
Длительность развертывания уменьшена с 4-5 минут до 15 секунд. И как было хорошо бэкендерам — вставили компонент, передали ему параметры нужной структуры, и никакого геморроя с html и JS у вас больше нет. Все это уже решено на фронте.
Фактически бэкенд стал одним большим API — api.taaasty.com
Реагировать-рельсы
Каждый, кто узнает, что весь наш фронт основан на реакции, в первую очередь спрашивает — а как насчет пререндеринга? Да, отлично, работает в кратчайшие сроки, все страницы отправляются с готовым макетом.Ruby имеет два рабочих механизма для выполнения javascript (и компонентов предварительной отрисовки).
Это therubyracer (использует библиотеку libv8) и nodejs (который фактически запускает nodejs и передает ему код для выполнения).
- Therubyracer. Съедает память.
Оно течет. Средняя скорость выполнения компонента ~10-20мс, но иногда на каждый 10-тысячный запрос происходит задержка до 100-200мс.
- nodes — безопасный способ выполнения JS-кода, НО при каждом выполнении компонента (а их может быть несколько на странице) Ruby запускает процесс nodejs (то есть загружает бинарный файл), передает исходный файл и берет результаты из STDOUT. Средняя скорость выполнения компонента составляет 50-80мс, из которых большая часть уходит на загрузку nodejs в память и его запуск.
На данный момент он рендерит 2-3 тысячи компонентов в минуту.
Полет отличный уже больше года.
React-rails остается в проекте и выполняет только функции предварительного рендеринга.
Теги: #taaasty #react #rails #ruby #react.js
-
Кирилл И Мефодий, Свв
19 Oct, 24 -
Как Организовано Питание В Вашем It-Офисе?
19 Oct, 24
