又一個強大的 FIS 解決方案：jello

又一個？是的！基于 FIS 的解決方案已經有不少，有針對后端是 php 的 fisp、node.js 的 yogurt 和 GO 語言的 Gois，甚至更多。而接下來介紹的這個就是一個針對后端是 JAVA 采用 velocity 作為模板引擎的 jello。雖然出來有一段時間了，但是一直以來都沒有很好的介紹過，希望借助這次機會能讓大家更清楚地認識一下 jello。

Features

前后端分離

這里有兩層意義的前后分離。

1. 前后端編寫分離由于采用的是 velocity 作為模板引擎，前端同學只用專注于 JS、CSS 以及模板邏輯的編寫，而不用太關心后端數據以及頁面邏輯。而后端同學則只需專注于后端頁面應該渲染哪個模板，以及獲取對應的模板數據。
2. 前后端開發分離這個是 Jello 的重點！正常來說，一個頁面的正常渲染是離不開模板數據的，而頁面模板數據的來源，往往都需要后端同學來提供。因此，前端的開發往往受后端的限制，需要等待后端提供一個可用的環境，然后基于此環境開發。而此環境，要讓一個沒有后端 j2ee 基礎的同學來搭建，也是一件非常頭疼的事情。Jello 針對這個問題，提供一個非常便利的開發環境。即：所有的 page 性質的 vm 模板文件，可以在此環境中直接預覽，而且可以通過 json 或者 jsp 文件提供數據模擬。于是，項目開始前期，前后端的同學合力一起制定好數據接口，然后就可以并行獨立開發了。具體操作可以查看頁面預覽和數據綁定相關的文檔。

簡化環境安裝

傳統的開發，為了能夠正常開發，往往需要安裝一系列 j2ee 環境。而 jello 提供的開發環境，只需要jello server start一個命令便能運行。實際上它是內嵌了一個簡單個 tomcat 服務，在首次運行的時候，自動從服務器上下載。

因為所有的數據都是 mock 出來的，這也就無需去折騰 mysql 或者 oracle 或者其他數據庫了。

自動性能優化

我們基于 velocity 擴展了些標簽 (directive)，如：html、head、body、script、style、widget… 如果你采用我們提供的標簽 (directive) 組織代碼，無論按什么順序組織，我們可以保證所有 css 內容集中在頭部輸出，所有的 js 集中在底部輸出，以達到一個性能優化的效果。

另外結合打包配置，可以讓多個 js/css 資源合并成一個文件，更大程度的優化性能。

(這個示例沒有配置 css 打包，請忽略。)

模板繼承機制

擴展 velocity 實現類 smarty 的模板繼承功能，讓模板能夠得到更充分的復用。

將多個頁面間相同的部分提取到一個骨架 layout.vm 文件里面，每個頁面只需填充自己獨有的內容。

此模板繼承甚至比 smarty 提供的版本還要強，因為 velocity 里面可以支持條件語句。比如這個Demo.

#set($layout = "page/layout/2columns-with-left-sidebar.vm")
#set($param = $request.getParameter("layout"))

#if ($param.equals("right"))
    #set($layout = "page/layout/2columns-with-right-sidebar.vm")
#end

#if ($param.equals("both"))
    #set($layout = "page/layout/3columns.vm")
#end

#extends($layout)
    ...
#end

模塊化開發

提供模塊化開發機制，支持像想寫 node.js 一樣的方式去寫頁面 js。可以遵循 commonjs 規范任意拆分代碼，而不用關心性能問題。

require('bootstrap');
var $ = require('jquery');
var alert = require('libs/alert');

var app = module.exports = function(opt) {

    // from velocity data
    var vm = opt.vm;
    $(vm.btn).on('click', function() {
        alert('<pre>' + JSON.stringify(vm.data, null, 4) + '</pre>');
    });

    // ....
});

以上代碼來自 jello-demo 下面的 /page/examples/data.js, 可以直接在線體驗運行結果。

組件化開發

提供組件化機制，可以將頁面間復用率比較高的內容，封裝成組件（widget），然后通過 #widget() 標簽使用，支持傳入局部變量， 更多關于組件的使用，請參看jello-demo 中文檔。

更多 features.

因為是基于 fis 的二次開發，還有更多的 fetaures 也可以在 jello 中使用，如：前端三種語言能力、資源壓縮、異構語言支持、靜態資源加 md5 戳 & cdn 部署 等等。具體請查看 fis 官網。

Getting started

如果以上的 features 也打動了你，不妨從一個簡單的 demo 開始 jello 之旅吧。

1. 安裝 jello

   npm install -g jello

2. 安裝插件

   npm install -g fis-parser-marked
   npm install -g fis-parser-utc
   npm install -g fis-parser-sass
   npm install -g fis-packager-depscombine

3. 下載 demo

   npm install -g lights
   lights install jello-demo
   
   #  或者
   
   git clone https://github.com/2betop/jello-demo.git

4. 進入當前目錄后發布代碼

   jello release
   jello server start

5. 自動打開瀏覽器預覽頁面