当Java遇到Jade—票牛PC版前后端分离的实践-演道网

一. 我们遇到的问题

最近票牛PC版上线了。

在开发过程中，如何进行前后端的合作，是第一个考虑的问题。之前m站使用纯AJAX的方式，只要定好API就可以独立开发，前端也有相关mock工具支持，合作非常顺畅。

但是PC考虑到SEO因素，没有使用纯AJAX做法，依然会在后端渲染模板并输出。结合团队之前的经验，很自然的选型了FreeMarker作为后端模板引擎，然后前端写好JS、CSS以及静态Html，再由后端工程师来“套模板”。

这个方案之前在点评都是这么使用。不过之前需求一般都确定，所以这种环环相扣的开发方式也没有太大问题。但是作为创业公司，讲求的是快速迭代，一个需求的开发到上线也就是半天到一天左右，这个时候，每次都需要两个人一起修改，还是够麻烦的了。在做了三次人肉代码diff和搬运的时候，我觉得：是该想个办法了。

二. 我们使用的方案

除了之前的“后端套模板”，目前比较流行的前后端分离的方法，是直接用Node写Controller层，而Java则负责提供稳定的后端服务。这个方案在一些成熟的、前端主导的团队都有实践。然而我们没有办法采用这个方案，因为：

1. 这个方案是建立在良好的SOA化基础上的，这个在业务形态经常变化的创业公司不现实。
2. 比起Java后端工程师，前端实在是太稀有了。

作为只有三个人的技术团队，这个方案的目标不是高大上的架构，而是让大家写代码都爽一点。基于这个指导原则，我们制定了一套自己的方案。

1. 仍然由后端Java来写Controller，因为之前开发过手机API，大部分代码都可以复用。
2. 使用Jade作为模板语言，由前端统一开发Jade、CSS、JS。之前考虑过前端写FreeMarker，但是因为前端同学习惯了Jade写页面，Jade=>Html=>FreeMarker这种事我们不愿意干。正好我们找到了jade4j这个模板引擎。
3. Jade模板作为前端项目的一部分，跟随前端项目发布。为了达到这个目的，我们自己定制了一个远程的模板加载器，会用HTTP方式读取前端项目的模板并加载。

三. 关于jade4j

整个方案最大的风险点就是jade4j这个项目的质量。

从使用方法来说，jade4j这个库本身跟FreeMarker的代码结构非常像，所以入手不会有什么困难。跟前端同学一起完成了FreeMarker到jade的迁移，语法的兼容程度还是相当高的。这里有jade4j支持的Jade语法。

从性能方面来说，目前PC站https://www.piaoniu.com已经全部切换到了jade。在一个普通页面，渲染速度大约在6-9ms之间，比FreeMarker只是稍慢，已经能满足需求了。

至此，前后端又能愉快的各自写各自的代码了！