SlideShare a Scribd company logo
1 of 21
Download to read offline
FLY INTERFACE II




Monday, April 18, 2011
30MIN
                         说些什么
                         坐在门外歇歇脚




Monday, April 18, 2011
从FLY说开去
          Date Warehouse(DW 数据仓库) 根据用户访问行为等信息研发的算法


                         其实我不用关心是它是什么东西

                           那背后不是我的领域

                            这里有特殊情况




Monday, April 18, 2011
WE? 我们的角色

                                Essence : Ajax 异步渲染


                         个性化推荐          偏好 offers

                         每日焦点           热销 offers (categories), company

                         ...            上新 offers

                                        感兴趣 word

Monday, April 18, 2011
USAGE SCENES 使用场景




Monday, April 18, 2011
MAIN FUNCTION


                 封装接口返回的数据,保证数据可用 (Usability 可用)

                 提供最简单的可配置项 (Flexible 灵活)

                 封装静态方法, 渲染时使用模板引擎 (Efficient 高效)

                 曝光和打点, 数据收集 (Feedback 反馈)




Monday, April 18, 2011
COMPLEX SCENES



                 循环请求对象指向问题 - 新建params对象

                 完整的回调 - 增加onTemplatePre回调

                 隐藏域的性能问题 - 使内容存入值中(现不在此完成)




Monday, April 18, 2011
NOW!



                 轻量级通用组件 FE.util.fly()

                 用Google Closure Compile压缩后大小仅4k+

                 简单的打点方式




Monday, April 18, 2011
换一个角度


                         DESIGN PHILOSOPHY
                              Key: Design 设计




Monday, April 18, 2011
DESIGN PHILOSOPHY

                         简化结构   核心价值    简化流程


                 Ockham’s Razor 奥卡姆剃刀

                 这个原理称为“如无必要,勿增实体”,即简单有效原理




Monday, April 18, 2011
DON’T MAKE ME THINK
                               人与代码的沟通也是交互



                 Don’t make me think.

                 We don’t make optical choices. Users like mindless choices.

                 Omit Needless words. The art of not writing for the web.




Monday, April 18, 2011
那些我们熟知的



                  Jquery Wirte less, do more

                 $(‘node’).do1.do2.do3.......




Monday, April 18, 2011
那些我们熟知的




                         Apple Industrial Design
                            苹果的工业设计



Monday, April 18, 2011
DISCUSS



              数据出错时的反馈

              大量使用的性能问题

              用户体验,渲染时间




Monday, April 18, 2011
DISCUSS

                              应用场景?


              数据出错时的反馈

              大量使用的性能问题

              用户体验,渲染时间




Monday, April 18, 2011
DISCUSS

                              应用场景?


              数据出错时的反馈       异步用在哪里?
              大量使用的性能问题

              用户体验,渲染时间




Monday, April 18, 2011
DISCUSS

                              应用场景?


              数据出错时的反馈       异步用在哪里?
              大量使用的性能问题 频繁交互、频繁读取数据、动态更新

              用户体验,渲染时间




Monday, April 18, 2011
DISCUSS

                              应用场景?


              数据出错时的反馈       异步用在哪里?
              大量使用的性能问题 频繁交互、频繁读取数据、动态更新

              用户体验,渲染时间    后台作渲染和出错处理




Monday, April 18, 2011
FUTURE 未来




                         静态页面一部分将在DCMS第二期由后台渲染




Monday, April 18, 2011
DON’T FORGET 别忘了




                这是一次推广Fly组件的分享,请大家可以用起来




Monday, April 18, 2011
Thanks !




Monday, April 18, 2011

More Related Content

More from fangdeng

浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQueryfangdeng
 
Html基础培训
Html基础培训Html基础培训
Html基础培训fangdeng
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Jsfangdeng
 
Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成fangdeng
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架fangdeng
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验fangdeng
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit utfangdeng
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计fangdeng
 
Varnish简介
Varnish简介Varnish简介
Varnish简介fangdeng
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascriptfangdeng
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-developfangdeng
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期fangdeng
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式fangdeng
 
Datalazyload
DatalazyloadDatalazyload
Datalazyloadfangdeng
 
Request animateframe初探
Request animateframe初探Request animateframe初探
Request animateframe初探fangdeng
 

More from fangdeng (20)

浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQuery
 
Html基础培训
Html基础培训Html基础培训
Html基础培训
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Js
 
Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
 
Websocket
WebsocketWebsocket
Websocket
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
 
Request animateframe初探
Request animateframe初探Request animateframe初探
Request animateframe初探
 

Fly

  • 1. FLY INTERFACE II Monday, April 18, 2011
  • 2. 30MIN 说些什么 坐在门外歇歇脚 Monday, April 18, 2011
  • 3. 从FLY说开去 Date Warehouse(DW 数据仓库) 根据用户访问行为等信息研发的算法 其实我不用关心是它是什么东西 那背后不是我的领域 这里有特殊情况 Monday, April 18, 2011
  • 4. WE? 我们的角色 Essence : Ajax 异步渲染 个性化推荐 偏好 offers 每日焦点 热销 offers (categories), company ... 上新 offers 感兴趣 word Monday, April 18, 2011
  • 6. MAIN FUNCTION 封装接口返回的数据,保证数据可用 (Usability 可用) 提供最简单的可配置项 (Flexible 灵活) 封装静态方法, 渲染时使用模板引擎 (Efficient 高效) 曝光和打点, 数据收集 (Feedback 反馈) Monday, April 18, 2011
  • 7. COMPLEX SCENES 循环请求对象指向问题 - 新建params对象 完整的回调 - 增加onTemplatePre回调 隐藏域的性能问题 - 使内容存入值中(现不在此完成) Monday, April 18, 2011
  • 8. NOW! 轻量级通用组件 FE.util.fly() 用Google Closure Compile压缩后大小仅4k+ 简单的打点方式 Monday, April 18, 2011
  • 9. 换一个角度 DESIGN PHILOSOPHY Key: Design 设计 Monday, April 18, 2011
  • 10. DESIGN PHILOSOPHY 简化结构 核心价值 简化流程 Ockham’s Razor 奥卡姆剃刀 这个原理称为“如无必要,勿增实体”,即简单有效原理 Monday, April 18, 2011
  • 11. DON’T MAKE ME THINK 人与代码的沟通也是交互 Don’t make me think. We don’t make optical choices. Users like mindless choices. Omit Needless words. The art of not writing for the web. Monday, April 18, 2011
  • 12. 那些我们熟知的 Jquery Wirte less, do more $(‘node’).do1.do2.do3....... Monday, April 18, 2011
  • 13. 那些我们熟知的 Apple Industrial Design 苹果的工业设计 Monday, April 18, 2011
  • 14. DISCUSS 数据出错时的反馈 大量使用的性能问题 用户体验,渲染时间 Monday, April 18, 2011
  • 15. DISCUSS 应用场景? 数据出错时的反馈 大量使用的性能问题 用户体验,渲染时间 Monday, April 18, 2011
  • 16. DISCUSS 应用场景? 数据出错时的反馈 异步用在哪里? 大量使用的性能问题 用户体验,渲染时间 Monday, April 18, 2011
  • 17. DISCUSS 应用场景? 数据出错时的反馈 异步用在哪里? 大量使用的性能问题 频繁交互、频繁读取数据、动态更新 用户体验,渲染时间 Monday, April 18, 2011
  • 18. DISCUSS 应用场景? 数据出错时的反馈 异步用在哪里? 大量使用的性能问题 频繁交互、频繁读取数据、动态更新 用户体验,渲染时间 后台作渲染和出错处理 Monday, April 18, 2011
  • 19. FUTURE 未来 静态页面一部分将在DCMS第二期由后台渲染 Monday, April 18, 2011
  • 20. DON’T FORGET 别忘了 这是一次推广Fly组件的分享,请大家可以用起来 Monday, April 18, 2011