Weitere ähnliche Inhalte
Ähnlich wie 使用NodeJS构建静态资源管理系统 (20)
使用NodeJS构建静态资源管理系统
- 2. 关于我
} 许阳寅(文河@淘宝,富应用开发团队)
} https://github.com/yyfrankyy
} yyfrankyy@gmail.com
- 3. Agenda
} 为什么要做RMS
} 设计和实现
} 使用Node开发的一点心得
- 4. 静态资源管理
} 依赖合并,压缩
} 规范检查,语法检查,安全检查
} 预编译(LESS/Sass,CoffeeScript)
} Auto Sprite(CSS Gaga)
} …
- 5. 为何需要一个平台?
} 如何快速的搭建/升级前端开发环境?
} 工具的使用效果如何评估?
} 怎么持续地跟踪代码变化?
} 工具和代码的变化对业务有何影响?
} …
- 6. 对比其他系统
} B2B的svn proxy
} Hook实现,拦截提交到版本库的代码
} 百度的前端编译平台
} 统一化执行脚本(build.sh)
} 规范检查,安全检查(包括模版)
} CSS3,压缩HTML
} 和模版集成,自动时间戳
} 自己实现大部分工具
} facebook的静态资源管理系统
} 依赖分析,本地化,合并,sprite,压缩
} 伸缩性,处理量量随业务扩展快速膨胀
} 跟业务集成,自我学习,自动优化
- 8. 问题归纳
} 工具不不够多
} 迭代不不够快
} 受工具语言限制
} 构建过程不不灵活
} 构建过程无法灵活组装
} 难于和应用代码集成
} 反馈不不足
} 无法自动化持续改进
- 9. RMS 能做什么?
编码 依赖 差异
压缩 编译
转换 合并 打包
代码库 RMS CDN
发布
状态
在线 质量量 安全
文档
编辑 检查 检查
- 10. RMS 还能做什么?
访问
Cache POC
热度
代码库 RMS CDN
质量量 文件
变化 趋势 应用 引用
代码 分析
- 11. 重新思考
} RMS 想解决什么问题?
} 通用工具的开发,集成和维护
} 为自动化优化打基础
} RMS 的目标?
} 让前端开发更更专注业务
- 13. 为什么用Node?
} Node社区很多工具模块是前端相关的
} 第三方工具可以通过接口异步调用(jvm)
} 异步工作流很容易实现
} 我们都会写JavaScript
- 15. RMS Web
view
express controller
model
webdav svn mysql node-mysql
- 16. View
} NodeJS => Shared Template(Mustache) <= SeaJS
} 给前端的模版
} GET /template/:template => 返回裸模版
} app.use(‘jsonp callback’)
} app.send(obj)
} GET /data?callback=define => define({foo: bar});
} 后端自动拼接Partial
} res.send(mustache({{>header}}{{>$partial}}{{>footer}}));
- 17. Controller
} 登录验证
} tbsession(sessionproxy)
} app.use(login);
} 路由设计
} app.all(‘/:apptype/:appname/:action/*?’, fn);
} GET /show/path/to/your/file.js => /path/to/your/file.js => svn
} GET /log/path/to/your/file.js => show logs
} POST /confirm => /publish => 转发RMS服务,show status
- 18. Model
} svn的访问
} Webdav, HTTP Digest Auth
} svn –non-interactive –xml {subcommands}
} xml2json
} 权限管理(RBAC,Role Based Access Control)
- 19. RMS服务
REST API
ascii coffee less uglifyjs security nas svn
cssmin yuicompressor closure compiler jsdoc
CDN 代码库 安全中心 应用 POC …
- 20. 多进程设计
} node-webworker
} 等待队列
} 一个进程一个工作流程
} 需要时从队列拿出,干完活或超时放回去
- 22. 异步工作流
} 单向流程,由配置决定流程任务和顺序
} 每一个开发工具只是流程里一个任务
} function run(content, next) { next(null, less(content)); }
- 23. 配置接口
INPUT {filelist: [{
rev: 10086,
path: ‘$path’,
type: ‘JavaScript’,
steps: [
[‘coffeescript’, {}],
[‘compressor’, {tools: {JavaScript: ‘UglifyJS’}}]
], /*…*/]
}]}
OUTPUT {status: ‘start’, success: true, id: ‘$publishId’}
- 25. NodeJS的喜与悲
} 异步IO的简便
} 熟悉而陌生的JavaScript
} NodeJS Best Practise
} ECMAScript 5
} 接口测试
} vowjs和api-easy
} GC的改良(Stop-The-World when I am not busy)
} 手动GC(V8::LowMemoryNotification())
} 第三方模块的数量量和质量量
} native2ascii
} 版本库的访问
} 版本升级(0.4-0.6)
} 第三方模块的升级跟不不上(forever, less等)
} node-webworker到cluster的迁移