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

  • 600 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
600
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 使用Node构建静态资源管理系统(RMS) yyfrankyy
  • 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,压缩 }  伸缩性,处理量量随业务扩展快速膨胀 }  跟业务集成,自我学习,自动优化
  • 7. 淘宝现有的RMS(Based on Java)}  代码提交之后}  语法检查(js)}  安全检查(php/image)}  字符转换(native2ascii)}  YUICompressor压缩}  推送CDN
  • 8. 问题归纳}  工具不不够多 }  迭代不不够快 }  受工具语言限制}  构建过程不不灵活 }  构建过程无法灵活组装 }  难于和应用代码集成}  反馈不不足 }  无法自动化持续改进
  • 9. RMS 能做什么? 编码 依赖 差异 压缩 编译 转换 合并 打包代码库 RMS CDN 发布 状态 在线 质量量 安全 文档 编辑 检查 检查
  • 10. RMS 还能做什么? 访问 Cache POC 热度代码库 RMS CDN质量量 文件变化 趋势 应用 引用 代码 分析
  • 11. 重新思考}  RMS 想解决什么问题? }  通用工具的开发,集成和维护 }  为自动化优化打基础}  RMS 的目标? }  让前端开发更更专注业务
  • 12. new  RMS({by:  nodejs}); Web Service 预处理 安全校验 发布 …
  • 13. 为什么用Node?}  Node社区很多工具模块是前端相关的}  第三方工具可以通过接口异步调用(jvm)}  异步工作流很容易实现}  我们都会写JavaScript
  • 14. RMS Web
  • 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 APIascii coffee less uglifyjs security nas svncssmin yuicompressor closure compiler jsdoc CDN 代码库 安全中心 应用 POC …
  • 20. 多进程设计}  node-webworker}  等待队列 }  一个进程一个工作流程 }  需要时从队列拿出,干完活或超时放回去
  • 21. 多进程设计
  • 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’}
  • 24. 异步流程状态跟踪
  • 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. 谢谢}  Q&A