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

一. 我们遇到的问题

最近票牛PC版上线了。

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

ajax方式开发

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

freemarker方式开发

这个方案之前在点评都是这么使用。不过之前需求一般都确定,所以这种环环相扣的开发方式也没有太大问题。但是作为创业公司,讲求的是快速迭代,一个需求的开发到上线也就是半天到一天左右,这个时候,每次都需要两个人一起修改,还是够麻烦的了。在做了三次人肉代码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只是稍慢,已经能满足需求了。

jade性能

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

jade模式

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注