使用NodeJS构建静态资源管理系统

1,052 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,052
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

使用NodeJS构建静态资源管理系统

  1. 1. 使用Node构建静态资源管理系统(RMS) yyfrankyy
  2. 2. 关于我}  许阳寅(文河@淘宝,富应用开发团队)}  https://github.com/yyfrankyy}  yyfrankyy@gmail.com
  3. 3. Agenda}  为什么要做RMS}  设计和实现}  使用Node开发的一点心得
  4. 4. 静态资源管理}  依赖合并,压缩}  规范检查,语法检查,安全检查}  预编译(LESS/Sass,CoffeeScript)}  Auto Sprite(CSS Gaga)}  …
  5. 5. 为何需要一个平台?}  如何快速的搭建/升级前端开发环境?}  工具的使用效果如何评估?}  怎么持续地跟踪代码变化?}  工具和代码的变化对业务有何影响?}  …
  6. 6. 对比其他系统}  B2B的svn proxy }  Hook实现,拦截提交到版本库的代码}  百度的前端编译平台 }  统一化执行脚本(build.sh) }  规范检查,安全检查(包括模版) }  CSS3,压缩HTML }  和模版集成,自动时间戳 }  自己实现大部分工具}  facebook的静态资源管理系统 }  依赖分析,本地化,合并,sprite,压缩 }  伸缩性,处理量量随业务扩展快速膨胀 }  跟业务集成,自我学习,自动优化
  7. 7. 淘宝现有的RMS(Based on Java)}  代码提交之后}  语法检查(js)}  安全检查(php/image)}  字符转换(native2ascii)}  YUICompressor压缩}  推送CDN
  8. 8. 问题归纳}  工具不不够多 }  迭代不不够快 }  受工具语言限制}  构建过程不不灵活 }  构建过程无法灵活组装 }  难于和应用代码集成}  反馈不不足 }  无法自动化持续改进
  9. 9. RMS 能做什么? 编码 依赖 差异 压缩 编译 转换 合并 打包代码库 RMS CDN 发布 状态 在线 质量量 安全 文档 编辑 检查 检查
  10. 10. RMS 还能做什么? 访问 Cache POC 热度代码库 RMS CDN质量量 文件变化 趋势 应用 引用 代码 分析
  11. 11. 重新思考}  RMS 想解决什么问题? }  通用工具的开发,集成和维护 }  为自动化优化打基础}  RMS 的目标? }  让前端开发更更专注业务
  12. 12. new  RMS({by:  nodejs}); Web Service 预处理 安全校验 发布 …
  13. 13. 为什么用Node?}  Node社区很多工具模块是前端相关的}  第三方工具可以通过接口异步调用(jvm)}  异步工作流很容易实现}  我们都会写JavaScript
  14. 14. RMS Web
  15. 15. RMS Web view express controller model webdav svn mysql node-mysql
  16. 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. 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. 18. Model}  svn的访问 }  Webdav, HTTP Digest Auth }  svn –non-interactive –xml {subcommands} }  xml2json}  权限管理(RBAC,Role Based Access Control)
  19. 19. RMS服务 REST APIascii coffee less uglifyjs security nas svncssmin yuicompressor closure compiler jsdoc CDN 代码库 安全中心 应用 POC …
  20. 20. 多进程设计}  node-webworker}  等待队列 }  一个进程一个工作流程 }  需要时从队列拿出,干完活或超时放回去
  21. 21. 多进程设计
  22. 22. 异步工作流}  单向流程,由配置决定流程任务和顺序}  每一个开发工具只是流程里一个任务 }  function run(content, next) { next(null, less(content)); }
  23. 23. 配置接口INPUT {filelist: [{ rev: 10086, path: ‘$path’, type: ‘JavaScript’, steps: [ [‘coffeescript’, {}], [‘compressor’, {tools: {JavaScript: ‘UglifyJS’}}] ], /*…*/]}]}OUTPUT {status: ‘start’, success: true, id: ‘$publishId’}
  24. 24. 异步流程状态跟踪
  25. 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的迁移
  26. 26. 谢谢}  Q&A

×