jello 是针对服务端为 JAVA + Velocity 的前端集成解决方案。jello 为优化前端开发而生,提供前后端开发分离、自动性能优化、模块化开发机制等功能。
基于 velocity 模板引擎实现前后端分离,让前端攻城师更专注于 JS、CSS、VM(velocity 模板文件) 文件编写。 我们提供一种简单的机制,模拟线上环境,让你轻松的预览线上效果。
比如:创建一个 vm velocity 模板文件后,基于我们的工具,你可以直接预览此模板文件的内容, 在相应的目录创建一个同名 json 文件,按与后端开发人员约定好的数据格式, 在此 json 文件中添加测试数据便能自动与模板变量绑定上。
使用此机制可以让前端开发流程与后端开发完全分离,后端开发人员只需关心渲染哪个模板文件和添加相应的模板数据。
team/jello#%E8%87%AA%E5%8A%A8%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)自动性能优化
我们基于 velocity 开发了些扩展标签 (directive),如:html、head、body、script、style、widget… 如果你采用我们提供的标签 (directive) 组织代码,无论按什么顺序组织,我们可以保证所有 css 内容集中在头部输出,所有的 js 集中在底部输出,以达到一个性能优化的效果。
另外结合自动打包配置,可以让多个 js/css 资源合并成一个文件,更大程度的优化性能。
team/jello#%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF%E6%9C%BA%E5%88%B6)模板继承机制
扩展 velocity 实现类 smarty 的模板继承功能,让模板能够得到更充分的复用。
将多个页面间相同的部分提取到一个 layout.vm 文件里面,每个页面只需填充自己独有的内容。
更多细节查看模板继承。
team/jello#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91)模块化开发
提供 html、css、js 模块化机制,包括 widget 组件化与 js amd 加载机制,让内容更好的拆分与复用。
team/jello#%E7%AE%80%E5%8C%96%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85)简化环境安装
内嵌 j2ee 开发服务器,你无需再折腾 j2ee 环境搭建。直接通过 jello server start 就能开起服务,预览页面。
jello server start
team/jello#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8)如何使用
安装 nodejs&npm
安装 java
安装jello & lights
npm install lights -g npm install jello -g jello -v
team/jello#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)快速上手
下载 jello-demo
lights install jello-demo
编译预览
cd jello-demo jello release jello server start
预览: localhost:8080/example/page/index
三条命令满足所有开发需求
jello --help Usage: jello <command> Commands: release build and deploy your project install install components and demos server launch a embeded tomcat server Options: -h, --help output usage information -v, --version output the version number --no-color disable colored output
参考fis配置
team/jello#%E6%9B%B4%E5%A4%9A%E8%B5%84%E6%96%99)更多资料
fis
fis-plus
gois
spmx
phiz