[Baidu web frontend_conference_2010]_[豆瓣架构]
29
F2E @ Douban 张克 (Kejun) hikejun.com | twitter.com/kejunz http://hikejun.com/sharing/f2e_at_douban.pdf Friday, October 29, 2010
description
2010.10.30，在百度大厦成功举办了百度前端技术交流会，这是豆瓣的张克军关于豆瓣前端团队的工作方式的分享。f2e_at_douban
Transcript of [Baidu web frontend_conference_2010]_[豆瓣架构]
![Page 1: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/1.jpg)
F2E @ Douban
张克军 (Kejun)hikejun.com | twitter.com/kejunz
http://hikejun.com/sharing/f2e_at_douban.pdfFriday, October 29, 2010
![Page 2: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/2.jpg)
collective intelligence “集体智慧，即一个团队处于多任务状态下取得成功的能力”
http://article.yeeyan.org/view/170769/140409
“人们是如此重视个人智慧和个人成就，......
由于我们的世界变得更加扁平化，相互间联系性也更强，
他们聚在一起能做些什么要比考虑一个人能做什么更重要。”
Friday, October 29, 2010
![Page 3: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/3.jpg)
Team
Friday, October 29, 2010
![Page 4: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/haagsuitburo/2576659737/sizes/l/in/photostream/
Friday, October 29, 2010
![Page 5: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/sub1522/4503033044/sizes/l/in/pool-15135580@N00/
Friday, October 29, 2010
![Page 6: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/42249245@N00/5049964175/sizes/l/in/pool-76277299@N00/
Friday, October 29, 2010
![Page 7: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/7.jpg)
http://site.douban.com/106371
Friday, October 29, 2010
![Page 8: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/8.jpg)
Jazz Bandhttp://site.douban.com/106371
Friday, October 29, 2010
![Page 9: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/9.jpg)
Tech Dept.
Friday, October 29, 2010
![Page 10: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/10.jpg)
FrontEnd Eng. Product Eng. Algorithm Eng. Platform/OPS Eng.QA Eng.
Friday, October 29, 2010
![Page 11: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/11.jpg)
FrontEnd Eng. Product Eng. Algorithm Eng. Platform/OPS Eng.QA Eng.
Friday, October 29, 2010
![Page 12: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/12.jpg)
Roles, Infrastructure, fusion
Efficient, Innovation
Friday, October 29, 2010
![Page 13: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/13.jpg)
FrontEnd Infrastructure
Friday, October 29, 2010
![Page 14: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/14.jpg)
http://www.flickr.com/photos/kejun/4954616644/sizes/o/in/set-72157624852834910/
http://site.douban.com/widget/photos/22528/photo/617206623/
Friday, October 29, 2010
![Page 15: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/15.jpg)
Modular & structuredcore concept:
Friday, October 29, 2010
![Page 16: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/16.jpg)
DoubanUI lib Lib Lib
jQuery
sns movie music
booksite
radio biz ...
coverflow
live_counter
Do
Friday, October 29, 2010
![Page 17: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/17.jpg)
DoubanUI lib Lib Lib
jQuery
sns movie music
booksite
radio biz ...
coverflow
live_counter
Do
Common libs
Friday, October 29, 2010
![Page 18: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/18.jpg)
DoubanUI lib Lib Lib
jQuery
sns movie music
booksite
radio biz ...
coverflow
live_counter
Do
Application libs
Common libs
Friday, October 29, 2010
![Page 19: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/19.jpg)
DoubanUI lib Lib Lib
jQuery
sns movie music
booksite
radio biz ...
coverflow
live_counter
Do
Application libs
Common libs
Framework
Friday, October 29, 2010
![Page 20: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/20.jpg)
Do('mod1', '/js/site/common.js', function(){ //code here; });Do(‘mod2’, ‘mod3’)Do(function(){ //code here; })
Do(uban)是一个轻量的Javascript开发框架。目的是在前端组织和管理项目中的Javascript模块。因此，Do在设计上仅提供模块管理的相关机制，主要是模块的组织和模块之间依赖关系管理。不杂糅任何业务逻辑，确保其足够轻量。目前do.js压缩后是2.1K，gzip后是0.9K。
Advantages：
1. Modular2. Dependency Management3. Parallel execution queue
Friday, October 29, 2010
![Page 21: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/21.jpg)
base
page
page
page
page
page
project
core
utils
movie
music
book
sns
...
DoubanUI (mako)
Friday, October 29, 2010
![Page 22: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/22.jpg)
- Infomation Content Moduler- Standard UI Component/Prototype
DoubanUI
Friday, October 29, 2010
![Page 23: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/23.jpg)
- Infomation Content Moduler- Standard UI Component/Prototype
DoubanUI
core.css(css)
TemplUtils
(mako)
UI widgets
(JS)
Friday, October 29, 2010
![Page 24: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/24.jpg)
Dev Process & Collaboration
Friday, October 29, 2010
![Page 25: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/25.jpg)
1. Prototype Dev.2. Iteration Dev. 3. Build 4. testing
Friday, October 29, 2010
![Page 26: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/26.jpg)
Prototype Dev. Env. Development Env. Pre-release Env.
Friday, October 29, 2010
![Page 27: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/27.jpg)
http://site.douban.com/widget/photos/22528/photo/617215445/#next_photo
Share your cheese!
Friday, October 29, 2010
![Page 28: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/28.jpg)
Coding With Fun
Friday, October 29, 2010
![Page 29: [Baidu web frontend_conference_2010]_[豆瓣架构]](https://reader030.fdocument.pub/reader030/viewer/2022012307/55556fb4b4c9058a5a8b4a0b/html5/thumbnails/29.jpg)
Q & A
Friday, October 29, 2010
![[Baidu web frontend_conference_2010]_[sina_blog_architecture]](https://static.fdocument.pub/doc/165x107/559cf1251a28ab545a8b4791/baidu-web-frontendconference2010sinablogarchitecture.jpg)
![[Baidu web frontend_conference_2010]_[soso_frontend_architecture]](https://static.fdocument.pub/doc/165x107/556222c8d8b42af6668b49ba/baidu-web-frontendconference2010sosofrontendarchitecture.jpg)
