JavaScript 你使用各类前端 Boilerplate 吗?你如何将他们和 Rails App 整合到一起?

willmouse · 2013年09月15日 · 最后由 willmouse 回复于 2013年09月15日 · 3303 次阅读

这里的 Boilerplate 主要是指各类预先定义好的前端模板,或者可以用来生成前端模板的 app。如:

https://github.com/h5bp/html5-boilerplate https://github.com/backbone-boilerplate/backbone-boilerplate https://github.com/brunch/brunch/ https://github.com/yeoman/yeoman etc.

由于这些是后端独立的,所以很难直接和后端的 Rails App 直接整合到一起(前两个要简单些,后面两个可能不太方便)。

我现在知道的方法是,如果想同时使用上面的各类 Boilerplate 以及 Rails App(就是前端和后端分两个项目开发,但一起使用),可以采用下面的方法。

开发时:可以将使用 Boilerplate 的前端部分,在每次 build 的时候,将后端需要的内容(Javascript、Css)link 到 Rails 项目中,不用前端 Boilerplate server(经常是 node),直接用后端 Rails 的服务器(Thin、Webrick)。

部署时:将前端的部分直接放到 Nginx 的 www 下,直接作为静态文件来服务,Ruby Sever 的部分还是像平常一样设置。

至于 Asset Pipeline 的问题怎么处理我也没想好。

我想比较常见的使用这些 Boilerplate 的时候是前后端完全解耦,后端仅作 API,这样就不需要将前后整合到一起了,分开开发也没问题。我这里想讨论的问题是在不将前后端完全分开的情况下,在开发 Rails App 的时候可以方便的时候上面的 Boilerplate 来实现前端的内容。

这里有个例子可以参考:

前端部分:https://github.com/paulmillr/ostio 后端部分:https://github.com/paulmillr/ostio-api

没看懂你啥意思?是后台和前台分别使用不同的模板吗?

这些第 3 方代码。我是统一放在 vendor/assets 目录下的。

然后 app/assets 下分别建立不同的 front.js front.css 和后台使用的 application.js application.css 分开载入不同的模板所需代码就行了。

我现在是前端完全用 AngularJs,将后端仅作 API 来用,不过前端部分模板和静态文件也还是用 Rails 的方法来做:

view 部分,Angurlar 没有也不需要特别的模板语言,直接在 layout 里面去掉 yeild 的部分,view 文件原来怎么摆现在依然怎么摆,然后自己写个 helper 按照 Rails 的约定将所有 view 合并生成一个 index.html,production 时缓存起来,让所有 html 请求指向它就行了。这样还有个好处:因为实际只产生一个 index.html 而且是静态缓存的,所以写 view 的时候完全不需要考虑 rails 渲染效率问题,可以根据需要肆无忌惮地使用 partial,反正设置好编辑器文件直接跳转很快的,也就不怕所谓的 slim 多层缩进的问题;

然后是 scss 直接 Assets Pipeline,coffee 部分根据业务逻辑切了几个小块,也还是用 Assets Pipeline,然后自己写个 loader.js.erb 用 Assets Pipeline 产生的 js 路径来作异步加载

至于 generator,Rails 自带了 generator 而且可以很简单地自定义 generator,为啥还要用这些?yeoman 我试过,默认生成的模板不合适还是得改,看了一下工作量不比自己写 generator 小……而且还要个问题,前后端完全解耦就没法简单地将后端一些逻辑直接搬过来了,比如没有 form helper,手写 form 会无比蛋疼,原来可以用 ruby 来写的一些东西也没法弄了,比如我整了个 helper 根据后端的 routes 自动生成 Angular 用的 routes;另外完全分开成两套东西,部署的时候复杂度也增加了……

#3 楼 @http://www.emmanueloga.com/2013/07/23/Using-AngularJS-with-a-Rails-backend.html

这篇写的不错,是我想要讨论的问题,看了之后觉得我之前的做法估计还有些不妥。

我是觉得像 JS 以及 CSS 的相关东西由前端的工作流来做会比较合适,因为本身像 Yeoman 就直接提供了前端库的依赖管理,LiveReload 等。上面的那篇文章的做法我觉得还是比较靠谱的,配合 Grunt 应该就能在开发的时候很方便的把前后端的内容整合起来。

至于前后端完全解耦,大部分情况下我觉得是不是也没有这个必要,毕竟很多的内容由后端直接提供会更合适。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号