使用RoR创建单页面应用程序

时间:2014-05-15 00:18:00

标签: javascript jquery ruby-on-rails backbone.js single-page-application

我是一名RoR开发人员,我一直在研究单页解决方案,使用另一个js库,例如backbone或angular。

对于我今天的RoR应用程序,我让我的控制器渲染一个js文件,存储在我的views文件夹中,它使用jquery for DOM来加载一个html partial,它可以在我指定的div中执行我想要的操作。在这个简单的方法中,我可以实现单页面应用程序,对吧?

我刚提到的方法有哪些缺点?有人可以通过这种方法解释主干在轨道上的优势吗?或相反亦然?或者他们只是一个偏好?

2 个答案:

答案 0 :(得分:2)

您的简单方法基本上就是角度或主干正在做什么,所以是的,您可以通过这种方式构建单页应用程序。但是,在我看来,您的简单示例不会被视为单页应用。我认为它只是一个页面。单页应用程序具有路径(具有不同URL的多个“页面”)。要实现这一点,您可以使用javascript的window.location来更改部分时操作URL。您必须处理嵌套路由以及用户直接访问其浏览器中的子页面(如/ contact)时的情况。

要处理很多棘手的边缘情况,并且自己实现它可能会非常耗时,那么为什么不使用专为此设计的框架呢? Rails是一个很棒的Web开发框架,但它不是专为单页面应用程序设计的。 Rails旨在呈现html页面服务器端,其大部分代码就是这样。在rails中构建单页应用程序意味着承载了很多自重。对于单页应用程序,您真正需要服务器端的是JSON API和静态文件服务器(如NGINX)。

将动态html从服务器端渲染到浏览器的任务意味着更多的javascript代码。使用普通的jQuery很容易搞得一团糟。 jQuery是一个库,而不是一个框架,这意味着jQuery不会为您提供任何结构或代码重用模式来保持组织有序。 Angular和Backbone是MVC框架,如Rails,但是对于浏览器。它们为您提供对于结构良好,可测试,可维护的应用程序至关重要的代码组织。在纯粹的jQuery应用程序中,您经常会看到处理直接与DOM操作混合的数据模型的代码(视图)。在MVC框架中,这将被视为有罪。

因此,您是否应该使用前端框架构建单页应用程序的问题与使用后端框架构建传统应用程序时的问题完全相同。你应该使用Rails还是纯Ruby?当然,你可以使用普通的Ruby,就像你只能使用普通的jQuery一样,但为什么会这样呢?无需重新发明轮子。

答案 1 :(得分:2)

您可以通过像Tubolinks及其更好的堂兄WiseLinks这样的单页应用程序的错觉,但它可能是客户端和服务器上的真正混乱,因为您需要大量的路由或路由参数,以便服务器可以呈现对于客户端所处的特定状态的正确部分。它变得凌乱,发送回html和javascript来正确更新客户端DOM并进行转换。我强烈建议完全避免它。

通常最好将服务器保持为API并使用客户端框架。服务器变得简单得多,这总是一件好事,而且如果需要,你也可以支持原生移动应用程序。

尽管有一个初步的学习曲线,但我在Ember上取得了很大的成功,它有很好的抽象,包括路由/ url状态管理,对象属性绑定和观察,计算属性和把手模板和组件。我还在几分钟内完成了Oauth2身份验证。您需要修改API身份验证。

我没有开始使用Ember,但我在Backbone / Marionette中编写了一个非常雄心勃勃的应用程序,并且在构建我的应用程序时尝试实现可重用组件和管理应用程序状态时遇到了很多困难。 API身份验证也不简单,需要大量复杂的自定义代码。我完全意识到了我需要的抽象,并注意到Ember几乎把它钉在了正确的位置,Backbone / Marionette远远不能满足我的需求,更不用说它对某些类型的应用程序没有用,但我个人没有回头。我能够获得快速的胜利(即大幅提高生产力),Ember plus拥有更强大的框架,所以我改变了。使用Ember的总代码大小要小得多,因为我需要编写的代码要少得多。当有人说框架ABC大于XYZ时,它值得深思。谁在乎你的应用程序代码大3倍,更难写,少做。如果您的应用程序很小,或者如果它很大并且您有时间在其上实现或拼凑您自己的框架并且认为您可以比那些使用更多功能更全面的框架更好地工作,那么微小的框架是很好的。经验比你:)只需使用正确的工具,并记住您的框架可能会比页面上的图像小,所以在涉及框架大小时,请将其放在透视图中。

所有网络框架都在经历重大变革,因此无论您选择什么,您都需要掌握最新信息。 Ember文档非常好,虽然我知道并非总是这样。我已经避免了Ember数据,这似乎是Ember的一个雄心勃勃且历史上有争议的方面,而是使用Ember Model作为一个低风险的选项,当然对我有用,当然是ymmmv。

如果您已经熟悉Angular等其他框架,那么如果它适合您,请坚持使用它。有很多可供选择,所以单挑Ember或Angular是不公平的,如果你所选择的框架适合你,那么我会说很好,但如果没有那么好的框架那里我认为Ember是其中之一基于我自己的经历,不是因为别人这么说。

为了完全公正,我建议你看TodoMVC来比较和对比框架,如果你不确定但是说实话你不会知道什么是真正重要的东西,直到你开始使用它愤怒。我建议短暂列出2或3个框架,然后用框架模板语言模拟你最关键的视图,定义一些使用fixture数据的模型,看看什么效果最好。