Upgrade to Pro — share decks privately, control downloads, hide ads and more …

F.I.S——提升产品性能与开发效率的前端解决方案

 F.I.S——提升产品性能与开发效率的前端解决方案

Velocity 2014 China FIS 负责人 walterShen 介绍了fis的技术内幕已经团队近期开展的工作。F.I.S 是一系列提升产品性能与开发效率的工程化方案,让前端团队可以快速进入角色,而且不用担心底层架构、性能优化等问题。包括自动化工具、开发框架与云端服务,可以减少人工管理静态资源成本和风险,全自动优化页面性能、减少服务器开销;简化开发、提测、部署流程,促进开发流程中的协作,来达到更快、更可靠、低成本的自动化项目交付。解决方案在业内开源,并在百度、腾讯、淘宝等各大公司得到应用。

Baidu FEX Team

August 13, 2014
Tweet

More Decks by Baidu FEX Team

Other Decks in Programming

Transcript

  1. fis release [options] 文件监听 + 优化 + 时间戳 + CDN

    + 测试 + 校验 + 合并 + 自动部署 fis release -womDtlp -d rd,qa
  2. • 有效的分离开发路径不部署路径之间的关系 o 工程师丌再关心资源部署到线上之后去了哪里,变成了什么名字,这些都可 以通过配置来指定 • 代码具有很强的可移植性 o 由于开发路径不部署路径对工程师透明,因此组件的资源依赖全部都是相对 路径定位的,这样,对于两个同样使用

    fis 作为开发平台的团队,即便他们 的部署方式完全丌同也可以有效移植代码。 • 轻松实现md5、域名添加等功能 o 工程师完全丌用关心上线后资源的静态服务器域名是什么 o 资源会全部自劢添加md5作为版本戳,服务器可以开启强缓存、回滚时丌需 要回滚静态资源,只须回滚html或模板即可
  3. start 获取所有文件 所有文件 编译变成? 编译 no 缓存是否过期 读取缓存 no parser

    preprocessor standard postprocessor lint test optimizer 编译流程 yes yes prepackager packager spriter postpackager 打包流程 end 管道式处理流程
  4. 基于 PHP/Smarty 实现的 fis 展现层解决方案 基于 Go/Martini 实现的 fis 展现层解决方案

    基于Java/Velocity 实现的 fis 展现层解决方案 纯前端 fis 展现层解决方案,丌依赖于后端 Plus Pure Jello Gois Yogurt 基于 NodeJS/Express.js 实现的 fis 前后端一体化解决方案
  5. Framework Express.js Krakenjs Router controller1.js controller2.js controller1.js Middleware compression json

    session security urlencode static cookie logger Bigpipe sync Swing quickling async pipeline Templte html head body script/style widget require extends block Models&i18n model localization Structure front-end server 开发 config
  6. Nginx PHP UI … Nginx PHP UI server server PHP

    UI Cluster 部署 Load Balancer(Transmit) Nginx … server(multi core) NodeJS UI Cluster Node.js process Node.js process … Node.js process Request Nginx server(multi core) Node.js process Node.js process … Node.js process
  7. startup/reload memwatch daemon load balancer 0s downtime reload error handling

    heartbeat check monitor forewarning log 运维 Yog-pm (extends pm2)
  8. 模块 静态资源 后端模板 CDN 资源表 Script、style、image info Content HTML browser

    Complete HTML 预编译 压缩优化 封装 编译构建 生成资源表 线上监控 自劢统计分析 自劢优化 自劢打包服务 静态资源管理框架
  9. 资源合并算法 • 合并收益 :对于同时使用A和B的页面节省了网络来回时间(RTT) • 合并损失 :对于只使用A的页面,浪费的B的大小(损失的大小 / 下载速度) •

    纯收益 : 合并收益 – 合并损失 Page_1 Page_2 Page_3 Page_4 Page_5 访问量 10M 1M 200K 10K 1K A.Js (1KB) √ √ √ √ √ B.Js (1KB) √ √ √ √ √ C.Js (300B) √ √ D.Js (2KB) √ E.Js (700B) √ √ F.Js (600B) √ √ √ √ 区分首屏和延迟加载 区分网络 区分国家 …
  10. • Feature-Flag框架 o 快速回滚 o 小流量 o A/B测试 o 特定时间发布

    o 特定区域发布 o 主干开发 • Flag管理平台,可视化管理产品中的所有 feature flag • 小流量评估平台,结合 feature flag 自劢分析、评估小流量的效果和收益 Feature-Flag
  11. • 百度FEX-FIS团队 • 用户:百度、阿里、腾讯、UC、小米、去哪... • QQ交流群:315973236 • web site: http://fis.baidu.com/

    • github: https://github.com/fex-team/fis • Blog:http://fex.baidu.com/ • 招聘:http://fex.baidu.com/we-need-you/ 开源