• Like
  • Save
构建可扩展的静态资源管理系统
Upcoming SlideShare
Loading in...5
×
 

构建可扩展的静态资源管理系统

on

  • 2,362 views

 

Statistics

Views

Total Views
2,362
Views on SlideShare
2,362
Embed Views
0

Actions

Likes
4
Downloads
38
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    构建可扩展的静态资源管理系统 构建可扩展的静态资源管理系统 Presentation Transcript

    • 构建可扩展的静态资源管理系统
      许阳寅@淘宝
    • 关于我
      许阳寅(文河@淘宝)
      f2e.us
      yyfrankyy@gmail.com
    • 静态资源管理
      常见功能
      预编译其他资源(LESS/Sass,CoffeeScript)
      规范检查,语法检查,安全检查
      Sprite
      合并,压缩
      各自实现 VS 系统化处理
    • 现有系统
      facebook的静态资源管理系统
      跟php深度集成,组件跟JS/CSS/Image绑定
      依赖分析,本地化,合并,sprite,压缩
      伸缩性,自我学习
      百度的前端编译平台
      统一化执行脚本
      规范检查,安全检查
      CSS3
      模板检查,HTML压缩
      自动时间戳
    • 淘宝现有的RMS系统
      编译TMS模板
      语法检查(js)
      安全检查(php/image)
      编码转换
      压缩
    • 为何需要更进一步
      需求
      产品线众多,构建规则不同
      每周发布量大
      处理文件的方式大不一样
      目标
      快速稳定
      可扩展
      可配置
    • 快速稳定
      实现调度中心,集中控制容错,反馈日志
      异步工作流(NodeJS)
    • 可扩展
      各种语言实现的预处理工具
      YC/GC: Java
      CSSGaga: .NET
      LESS/CoffeeScript: NodeJS
      使用NodeJS和其他平台进行异步通信
      NodeJS社区丰富的模块资源
    • 可配置
      {“type”: “JavaScript”
      ,“steps”: [
      [“coffeescript”, {}]
      ,[“nativeascii”, {}]
      ,[“compressor”, {“type”: “UglifyJS”}]]}
      {“type”: “CSS”
      ,“steps”: [
      [“less”, {}]
      ,[“compressor”, {“type”: “YC”}]]}
    • 和应用集成(自动时间戳)
      后端:发布时同步生成时间戳文件
      前端:importAssets(“apps/tms/js/spm.js”)
      • <script src=“http://<?phpcdn(); ?>/apps/tms/js/spm.js?t=<?php require_once(‘timestamp/apps/tms/js/spm.js.php’); ?>”></script>
      • <script src=“http://a.tbcdn.cn/apps/tms/js/spm.js?t=1”></script>
      • <script src=“http://assets.daily.taobao.net/apps/tms/js/spm.js?t=$random”></script>
    • 下一步
      处理粒度
      单个文件
      整个应用打包
      自动构建文件(wscript, package.json)
      和性能中心对接
    • 几点特性
      拦截应用Assets入口
      配置预处理过程
      利用NodeJS的模块资源和异步特性进行流水线组装
    • 谢谢
      Q&A