FE开发平台-FIS介绍.ppt

FE开发平台-FIS介绍 伍荣乐 2013.04.25 大纲 Fis是什么 Fis要解决什么问题 Fis能为前端工程师带来哪些便利 Fis的前端解决方案 Fis demo 文库如何使用Fis QA Fis是什么 Fis全称 Front-End Integrated Solution（前端集成解决方案） 使命 促进前端生产力(狼性)发展 输出一套运行高效、持续完善的前端解决方案，让使用fis的人能快速开发、产出的代码高效运行。 输入 产品线开发、维护需求 各topic技术支持 输出 一套运行高效、持续完善的前端开发解决方案 一套跨平台的本地开发环境 开发、测试、联调、上线全流程支持 Fis要解决什么问题 运行高效的前端解决方案 完整的组件化开发模式 高效的静态资源管理策略 跨平台的集成开发环境 win[xp-8]、mac、linux 用户本地、编译机 一键安装+运行 环境模拟 调试模式 编译后预览模式（上线模式） 数据模拟 国际化（差异化）支持 差异化产出 差异化效果预览 多种编码支持 utf-8 gbk 用户体验 报错、纠错、容错 界面、交互 Fis要解决什么问题 fis如何解决上述问题 规范（目录规范、开发规范） 库（tangram、magic、gmu、fis） 插件（xss、widget） 研发本地开发环境 Fis能为前端工程师带来哪些便利 开发、调试方便 本地调试 一键上传 数据模拟 运行高效 架构支持 静态资源优化 工具支持 csssprite xss修复 压缩 可维护性高、需求响应及时 组件化开发 让新手写出高手代码 Fis能为前端工程师带来哪些便利 什么是前端解决方案 狭义 比如tangram、jquery，解决通用js开发问题 比如RequireJS，解决js模块化开发问题 比如less、sass，解决css开发问题 比如smarty，解决展现和数据分离的开发问题 某个产品线高工说，我要重构。最后TA重构的结果。 广义 解决前端开发多个领域技术问题并能相互紧密配合的方案集 什么是前端解决方案 前端集成解决方案可以看做是一种“容器” 该容器提供了js、css、模板等前端方向的技术支持 该容器定义了必要的开发概念（组件、规范） 在该容器下书写的代码将被组织、加工为高效运行的输出结果 fis最有含金量的输出不是工具，是解决方案！ 提升前端生产力的必然是解决方案，而非某种工具 fis的前端解决方案集 smarty家族 pc：最开始设计的解决方案 pc2：基于pc，提升静态资源管理能力的解决方案 mobile：基于pc2，移动端的解决方案 webapp 为webapp开发模式量身打造的解决方案 diff方式请求静态资源、本地存储静态资源 所有页面放在一个模块内，其他模块只存放js、css等资源 bingo-view 第三方合作的解决方案 基于贴吧研发的bingo-view框架 旗舰版解决方案(pc2)介绍 旗舰版解决方案(pc2)介绍 ui js组件 css组件 页面静态资源 其他 static 模板组件 widget 页面 page 测试数据 单测用例 test 旗舰版解决方案(pc2)介绍 – js组件 旗舰版解决方案(pc2)介绍 – css组件 旗舰版解决方案(pc2)介绍 – widget组件 旗舰版解决方案(pc2)介绍 - 容器 SmartyResourceAPI widget js base.js fileMap[ui] css ui 旗舰版解决方案(pc2)介绍 - 静态资源管理优化 旗舰版解决方案(pc2)介绍 - 静态资源管理优化 假设： 一个模块下有A、B、C、D、E、F、G，7个静态资源 其中打包为：P1=A+B+C、P2=E+F、P3=A+B 求以下情况下，使用哪种资源组合最优： 当一个页面只使用了A时：A 当一个页面只使用了A、B时：P3 当一个页面使用了A、B、C时：P1 当一个页面使用了A、B、E时：P3+E 当一个页面使用了A、E、F时：A+P2 当一个页面使用了所有静态资源时：P1+P2+G 与性能监控系统结合，实现自适应的静态资源管理系统 Fis demo 文库如何使用Fis SVN模块划分 文件编码 上传联调 CMS数据 begin.html tangram2jquery 相关链接 Fis使用手册 /doc/fis/ Pc2业务模型 /doc/fis/framework/pc2/index.text Grunt / Bootstrap http://twitter.github.io/bootstrap/ QA Thanks