Rails 3.2 JS-heavy App的设计模式

Question

我正在开发一个新的rails 3.2公司管理应用程序,它严重依赖于JSON数据(自动完成结果,日历事件,任务,动态表单操作等).后端系统已经非常可靠,因此我们正在投资UI部分,我们希望使其更像webapp,反映其他"胖客户端"应用程序(如Google的应用程序)的行为.为了实现这个目标,最好的设计模式是什么:使用诸如Backbone.js之类的MVC JS框架,从而将大部分数据操作委托给UI并与我们的JSON api接口,或者使用远程JS(即js.erb templates),它允许更多地使用Ruby代码？

我们已经在一些视图中非常粗略地使用Backbone.js,但似乎前一种方法使用了大量的开发人员资源,因为JS更难编码,我们在UI上镜像一些模型代码的额外负担,同时是一个对最终用户更敏感.后一种方法允许以牺牲响应时间为代价来获得更精简的View代码,并且总而言之,感觉不太正确,但它确实更快,更灵活.

请记住,我们是一个拥有大量Rails经验的小团队,而不是JS/Coffeescript/Backbone.js,我们有一个紧密的截止日期,您会选择哪种方法？我之所以处于亏损状态,是因为我们公司对代码的质量和对现代设计模式的坚持感到自豪,所以我不禁想到,尽管它有优点,但使用远程JS感觉就像''糟糕的捷径',所以我真的很感谢你们的意见.也许我只是有偏见.

Answer 1

好吧，我无法为您做出决定，这主要取决于截止日期有多近，但我个人更喜欢 Backbone.js 方法。

如果我不得不争论的话，我可以说你将拥有一个静态且可缓存的 JS 脚本和轻型 AJAX 请求（仅 JSON），而使用其他方法你将拥有更重且不可缓存的脚本下载。

但最重要的是，我相信 Backbone 方式是让代码组织化和可维护的最佳方法。

1. Coffeescript 非常棒，而且学起来非常快。它大大简化了 JS 语法并使其变得有趣。值得一试。3000万就学会了。

2. Backbone.js 很棒并且学习起来很快。使用这种方法将允许您依赖事件，这比我们没有事件时要干净得多。

   感谢资产管道，您可以将视图/模型/路由器类拆分为单独的文件，这非常好。

   感谢 CoffeeScript，您可以使用非常干净的语法来编写骨干对象，如下所示：

   class @MyView extends Backbone.View
     events:
       'click obj': 'handler'
     [...]
   

   这样，我在我的项目中添加了一个小@module助手来将我的对象组织到命名空间中。

但是，您需要一些时间才能找到良好的文件组织方式。

您可以从gem rails-backbone一些类似于轨道发电机的发电机开始。我个人不喜欢它，但我认为这是一个好的开始。它包括Backbone.sync适应轨道的功能。

编辑

这里有一些关于助手的细节@module。我将其包含在application.js.coffee（不要忘记require_self）中：

@module = (names, fn) ->
  names = names.split '.' if typeof names is 'string'
  space = @[names.shift()] ||= {}
  space.module ||= @module
  if names.length
    space.module names, fn
  else
    fn.call space

在我的班级文件中：

@module 'MyProject.Model', ->
  class @MyModel extends Backbone.Model
    [...]

（请注意，这@是 CoffeeScript 的快捷方式this.。）

帮助器创建对象MyProject，如果需要（如果为 null），并使用bind toMyProject.Model执行给定的函数。因此，您可以像从根命名空间 ( ) 一样访问您的模型：thisMyProject.Modeldocument

m = new MyProject.Model.MyModel

您还可以叠瓦式助手：

@module 'MyProject', ->
  @module 'Model', ->
    [...]

我使用以下命名空间层次结构

MyProject
  Model
  View
  Router
  Runtime (to store all runtimes objects and don't pollute the root namespace, easier for debug)