Что я узнал из работы с Rails assets pipeline и Javascript. KnockoutJS vs AngularJS.

Задумал я оживить нашу систему обработки заявок так, чтобы в realtime подгружались новые обращения, инциденты обновляли SLA и возникали визуальные уведомления при протухании тикетов.

Rails замечательно работает со статикой, лучше всех, пожалуй. Но то, что предлагается использовать для «оживления» страниц подходит только для очень небольшого круга задач. 

vs

Чаще всего Ajax Polling делается через запрос jQuery и подстановку темплейта с рендерингом из JS шаблона. Мне очень нравится писать шаблоны на HAML, и использовать Coffeescript.

Но, к сожалению, браузер не умеет рендерить HAML шаблоны, а изучать/выбирать новый template-язык не хотелось. 

Именно поэтому в поле моего зрения попали движки, которые умеют использовать существующую разметку: AngularJS и KnockoutJS. Вот их я и стал изучать.

Создал две экспериментальные ветки feature в git и стал пробовать Knockout.

Knockout оказался очень хорошим фреймворком для two-way databinding. Классно лег на coffeescript, и HAML. Вот пример вьюконтроллера:

class UnassignedTicketsViewModel extends TicketWithSLAViewModel
  constructor: ->
    super
    @api = ‘/api/tickets/unassigned’

вот HAML партиал. Кстати, это в 4м HAML появилась возможность писать аттрибуты в круглых скобках.

    %td.avatar
      %img.cycle.userpic(data-bind = «attr:{src:avatar.nano.url}, visible: state !== ‘classified’»)
    %td.id_column
      %a(data-bind = «attr:{ href: url }, css: {‘fg-red’: is_major}»)
        %i.icon-fire(data-bind = ‘visible: is_major’)
        %i(data-bind = ‘css: icon()’)
        %span(data-bind = ‘text: id’)
        %i.icon-bus(data-bind = ‘visible: is_outdoor’)
    %td(data-bind = ‘text: author’)

Вот какие выводы у меня появились после использования Knockout с рельсами

• очень хорошо писать и наследовать классы на Coffescript.
• MVVM объектно-ориентированная концепция с моделями
• неявная работа с текущим значением в итераторах foreach
• удобный дебаггер для Chrome 

Параллельно я вел исследования с AngularJS. Прошел офигительный интерактивный туториал https://www.codeschool.com/courses/shaping-up-with-angular-js

И написал polling тикетов через $resource. И пришел к таким выводам:

• Angular это очень мощный фреймворк, как Rails для статики.
• Angular стоит использовать только если вы делаете Single Page Application. В противном случае как из пушки по воробьям.
• У Angular своя концепция MVC, но нет как такового понятия модели.
• Angular в целом не особо объектноориентирован и не очень хорошо ложится на Coffeescript.
• Rails лучше модифицировать для отдачи шаблонов по запросу вот таким gem https://github.com/pitr/angular-rails-templates, что позволяет использовать HAML для их написания

И в том и в другом случае было необходимо разработать правильную отдачу JSON объектов при поллинге. Мне нужно было включать ассоциативные поля в модели, поэтому довольно скоро от Model.as_json я перешел к использованию https://github.com/rails-api/active_model_serializers, но поскольку разработчики не смогли придумать кеширование, да и отдачу url_for, пришлось перейти на jbuilder, на котором и остановился. json!.cache отлично сокращает запросы к базе и время рендера.

Для отдачи JSON решил сделать API через отдельные контроллеры и наймспейс ‘/api/ как у Раяна Бейтса. 

И все было хорошо, пока я не стал думать, как же для разных страниц мне использовать разные биндинги для KnockoutJS и при этом чувствовать себя хорошо. Самый простой и «лобовой» способ это убрать require_tree . из application.js и добавить include_javascript_tag params[:controller] в лейаут. Но здесь то и зарыт главный косяк. Assets pipeline, который склеивает все css и js в один файл будет кидать ексепшены, поскольку не скомпилирует .js для каждого контроллера. И выхода здесь два:

1. включить компиляцию assets для продакшена.
2. использовать gem paloma. 

Более православным мне показался второй путь, поскольку использует assets pipeline и делает всю магию на клиенте. Также позволяет передавать из контрроллера в JS различные параметры. Это же умеет делать gem gon, но если можно гем не использовать, то лучше его не использовать.

Также, мне очень понравился подход с подключением jquery библиотек и используемого мной metro-ui-css фреймворка через интеграцию с bower. В моем случае сделал подключение gem ‘rails-bower’, в Bowerfile записал asset ‘metro-ui-css’, rake bower:install и вуаля, в  /vendor/assets/bower_components загруженные с зависимостями jquery и другие модули. Очень удобно.

Итоги. 

Я остановился на использовании KnockoutJS для моей задачи, и доволен этим фактом, много jQuery кода заменил более компактным и объектно-ориентированным кодом для Knockout. А AngularJS, думаю, стоит использовать вообще отдельным приложением вместе с Node.js, а Rails в качестве исключительно JSON бекенда, что тоже для Rails было бы унизительным.