/jr8

58金融前端工程化整体解决方案(编译、打包、性能、统计)

Primary LanguageJavaScript

jr8前端工程化整体解决方案

jr8是58金融事业部在百度fis2和jello的基础上封装改造而来,用以和后端Java配合的整体解决方案

流程设计

step1 step2 step2-2 step2-3 step3 step3-2 step4 step5 step5-2 step5-3 step6

##使用jr8有如下限制:

  • 后端为Java
  • 前后端分离,前端负责制定页面样式,后端负责填充页面数据
  • 后端Java使用velocity模板
  • nodejs版本为v4及以下

##jr8基础功能

  • 各种编译器转换,ES6、coffee、markd、_.template、jade、react、less、sass、scss...
  • 校验jshint、csslint...
  • 资源优化、压缩:uglifyjs、cleancss...
  • 图片sprite、图片压缩、base64等常用前端优化手段
  • md5戳
  • amd定义包装
  • css类化(js加载)

##jr8核心功能

  • 一键发布、实时监听并更新资源到tomcat
    jr8 release -cwL

  • 模拟vm数据及ajax异步数据

彻底分离前后端,从此FEer自行调试vm及其变量,再也不用等后端渲染数据。
FE模拟vm路径及vm变量和ajax返回值变得及其简单

rewrite ^\/login$ /page/login/login.vm
代表http://localhost/login 请求被分发到login.vm渲染

login.json: {username: "张三", password: "123456"}
表示用json数据 mock vm变量:username和password的具体值
ajax返回值mock方法同上

  • 资源定位

分离开发路径与部署路径,完美支持html、js、css中的任意资源定位。

  • 还在写gulp、grunt过滤流操作吗?
  • 还在为各种奇怪的定位关键字命名发愁吗?
  • 内容嵌入
  • html里嵌入html、js、css、base64
  • js里嵌入template、js、css、base64
  • css里嵌入css、base64
  • 依赖声明 - 产出资源文件列表
  • html依赖html、js、css
  • js依赖js、css
  • css依赖css
  • 自动加载所有依赖文件(CSS合并&前置 | JS后置)
  • 假设login页面引用了slider.js和form.js,而form.js又依赖validate.js、button.js和modal.js
  • 每一个js文件可能有对应的css文件,也可能没有
  • 某天form.js不需要依赖button.js了,这么多页面,button.css怎么删?
  • login页面的开发者需要手动维护这么多js和css引用吗?
  • 业务页面无需引入业务JS、CSS文件,jr8框架自动加载依赖并优化合并页面所需资源。开发人员再也不用担心性能优化的问题了

  • 页面打点统计(一个参数搞定:trace)

    jr8 release -cw trace

  • 页面越来越多,测试时找到对应的url地址越来越麻烦,浏览器里还得手动输入url?

自动生成黄页,列出所有页面路径

##安装jr8

  • 安装nodejs

推荐安装node-v4 v0.12及以下不支持node-sass;v6不支持的更多

  • 安装jr8: npm install -g jr8

如果网速慢的话也可以使用国内npm代理安装jr8: npm --registry http://registry.cnpmjs.org install -g jr8

##使用jr8

参见demo工程

jr8-proj-demo