http://fis.baidu.com

1. FIS
架构即⾼高效

2. FIS
• FIS是专为解决前端开发中⾃自动化⼯工具、
性能优化、模块化框架、开发规范、代
码部署、开发流程等问题的⼯工具框架。

3. 从简到繁，Web前端应⽤用开发

4. JS
CSS
原始开发
js/css资源是内嵌的

5. 还有
js/css外联了
1
2
1
2

6. 当遇到上线

7. 为了正确的运⾏行，会在静态
资源前加上统⼀一的PATH
1
2
1
2
<?=static_path()?>
?
后端开发需要关⼼心
static_path

8. 1
2
1
2
约定
1. 所有的静态静态资源上线到static下
2. 静态资源路径统⼀一写成/static
?
源码路径和线上路径不⼀一致
维护⿇麻烦

9. 规范
• 源码的静态⽂文件都放到static⺫⽬目录下
• static⺫⽬目录下的资源引⼊入时都需要以`/static/
xxxx`的⽅方式引⼊入

10. • 当要上CDN？
• 当要做功能迁移的时候要修改静态资源线上存放的路
径？
• 国际化
• 。。。

11. √ 开发时只需关⼼心源码路径。

12. ⼤大型前端项⺫⽬目开发
越来越多的⼈人
越来越多的代码
可维护性
开发效率
性能

13. 提⾼高维护性
• 开发⺫⽬目录规范
• 拆分组件
• JS模块化开发

14. .
├── index.html
└── static
├── css
│ ├── main.css
│ ├── nav.css
│ └── tab.css
├── js
│ ├── main.js
│ ├── nav.js
│ └── tab.js
└── lib
.
├── nav.html
├── tab.html
├── index.html
└── static
├── lib
├── css
│ ├── nav.css
│ ├── tab.css
│ └── main.css
└── js
├── main.js
├── nav.js
└── tab.js
⼀一般拆分
拆分模板
复⽤用性，需要拆分模板（html）

15. .
├── nav.html
├── tab.html
├── index.html
└── static
├── lib
├── css
│ ├── nav.css
│ ├── tab.css
│ └── main.css
└── js
├── main.js
├── nav.js
└── tab.js
.
├── index.tpl
├── tab.tpl
├── nav.tpl
└── static
├── css
│ ├── main.css
│ ├── nav.css
│ └── tab.css
├── js
│ ├── main.js
│ ├── nav.js
│ └── tab.js
└── lib
{%include …%}
只能通过模板语⾔言搞定了

16. √ 假设html⽀支持inline，世界将很美好

17. inline能⼒力延伸
js
模板css

18. .
├── index.tpl
├── tab.tpl
├── nav.tpl
└── static
├── css
│ ├── main.css
│ ├── nav.css
│ └── tab.css
├── js
│ ├── main.js
│ ├── nav.js
│ └── tab.js
└── lib
分⽽而治之
├── index.tpl
├── static
│ └── lib
└── widget
├── nav
│ ├── nav.css
│ ├── nav.js
│ └── nav.tpl
└── tab
├── tab.css
├── tab.js
└── tab.tpl

19. 多了⼀一些链接

21. 提升运⾏行性能
• 静态资源压缩、合并
• 静态资源强缓存
• 静态资源CDN
• 静态资源按需加载

22. 变量相互污染了，需要关⼼心合并顺
? 序

23. 套⼀一层function解决变量污染
JS模块化开发

24. JS模块化开发
• 显式的调⽤用其他模块
• 异步按需加载

25. a
c
b
⼯工具⽣生成
当加载a时，就知道需要加载b，c

26. require能⼒力延伸
js
模板css

27. {
"res": {
"common:page/layout.tpl": {
"uri": "/template/common/page/layout.tpl",
"type": "tpl",
"extras": {
"isPage": true
}
},
"common:static/mod.js": {
"uri": "/static/common/mod.js",
"type": "js"
},
"common:widget/nav/nav.css": {
"uri": "/static/common/widget/nav/nav.css",
"type": "css"
},
"common:widget/nav/nav.js": {
"uri": "/static/common/widget/nav/nav.js",
"type": "js",
"deps": [
"common:widget/nav/nav.css"
]
},
"common:widget/nav/nav.tpl": {
"uri": "common/widget/nav/nav.tpl",
"type": "tpl",
"deps": [
"common:widget/nav/nav.js",
"common:widget/nav/nav.css"
]
},
"common:widget/sidebar/sidebar.async.js": {
"uri": "/static/common/widget/sidebar/sidebar.async.js",
"type": "js"
},
"common:widget/sidebar/sidebar.css": {
"uri": "/static/common/widget/sidebar/sidebar.css",
"type": "css"
},
"common:widget/sidebar/sidebar.tpl": {
"uri": "common/widget/sidebar/sidebar.tpl",
"type": "tpl",
"extras": {
"async": [
"common:widget/sidebar/sidebar.async.js"
]
},
"deps": [
"common:widget/sidebar/sidebar.css"
]
}
},
"pkg": {}
}
map.json

28. 后端`require.js`
• require - 加载⼀一个资源
• {%require name=“static/a.js”%} -­‐ fis-­‐plus
• require.async - 异步加载⼀一个资源
• {%require name=“static/a.js” async=true%} -­‐ fis-­‐
plus

29. {
"res": {
"static/a.js": {
"uri": "http://cdn.baidu.com/iknow/
home/static/a.js",
"pkg": "p0"
}
},
"pkg": {
"p0": {
"uri": "http://cdn.baidu.com/iknow/
home/static/pkg_0.js"
}
}
}
{%require name=“static/a.js”%}
散列⽂文件
http://cdn.baidu.com/iknow/home/static/a.js
打包结果
http://cdn.baidu.com/iknow/home/static/pkg_0.js

30. √ 通过对代码require的分析，⽣生成静态资源依赖表

31. 提升开发效率
• 前后端分离
• ⼤大前端
• ⾃自动化⼯工具

32. √ 开发时只需关⼼心源码路径
√ inline
√ require
√ 三种语⾔言能⼒力
√ 性能、可维护性、开发效率达到最优

33. ⼯工程化之路

34. .
├── config
│ └── fis-­‐config.xml
├── page
│ └── photo
│ ├── index.tpl
│ └── test.tpl
├── static
│ └── photo
│ ├── index
│ ├── layout
│ ├── ui
│ ├── use_page_css
│ └── use_tangram
├── test
│ └── page
│ └── photo
└── widget
└── photo
├── f_use_footer
├── f_use_header
├── f_use_js_widget
├── layout
├── tag
└── tag_cssframe
⺫⽬目录规范

35. 2011.11.30 FIS第⼀一版发布

46. FIS 1.x的问题
• 编译期做了太多的事情
• PHP做⼤大量⽂文本操作，很慢；包括它的正则问题
• 提供的内嵌、依赖、URL规则各个业务模型都不相同
• TASK链的⽅方式处理资源

47. FIS 2.0，简⽽而美的前端集成解决⽅方案⼯工具框架

48. FIS2
• 三种语⾔言能⼒力
• 基于静态资源映射表(map.json)的静态资源管理⽅方案

49. uri
三种语⾔言能⼒力inline
require
⺫⽬目录规范
静态资源管理

50. DEMO