jello - J2EE Velocity 前端集成方案


未知
跨平台
JavaScript

软件简介

jello 是针对服务端为 JAVA + Velocity
的前端集成解决方案。jello 为优化前端开发而生,提供前后端开发分离、自动性能优化、模块化开发机制等功能。

前后端分离

基于 velocity 模板引擎实现前后端分离,让前端攻城师更专注于 JS、CSS、VM(velocity 模板文件) 文件编写。
我们提供一种简单的机制,模拟线上环境,让你轻松的预览线上效果。

比如:创建一个 vm velocity 模板文件后,基于我们的工具,你可以直接预览此模板文件的内容, 在相应的目录创建一个同名 json
文件,按与后端开发人员约定好的数据格式, 在此 json 文件中添加测试数据便能自动与模板变量绑定上。

使用此机制可以让前端开发流程与后端开发完全分离,后端开发人员只需关心渲染哪个模板文件和添加相应的模板数据。

[](https://github.com/fex-

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 资源合并成一个文件,更大程度的优化性能。

[](https://github.com/fex-

team/jello#%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF%E6%9C%BA%E5%88%B6)模板继承机制

扩展 velocity 实现类 smarty 的模板继承功能,让模板能够得到更充分的复用。

将多个页面间相同的部分提取到一个 layout.vm 文件里面,每个页面只需填充自己独有的内容。

更多细节查看模板继承

[](https://github.com/fex-

team/jello#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91)模块化开发

提供 html、css、js 模块化机制,包括 widget 组件化与 js amd 加载机制,让内容更好的拆分与复用。

[](https://github.com/fex-

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 就能开起服务,预览页面。

[](https://github.com/fex-

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
    

[](https://github.com/fex-

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 命令

三条命令满足所有开发需求

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配置

[](https://github.com/fex-

team/jello#%E6%9B%B4%E5%A4%9A%E8%B5%84%E6%96%99)更多资料