从 YUI2 到 YUI3 看前端的演变

1. 从YUI2到YUI3看前端的演变 张克军http://hikejun.com http://twitter.com/kejunz

2. 张克军 (Kejun) 前端工程师 技术分享者（科技大使、Evangelist） 第二届D2的组织者 kejun@ymail.com http://hikejun.com http://twitter.com/kejunz YIM: listenpro GTalk: listenpro

3. 雅虎中国UED团队 http://www.flickr.com/photos/kejun/3440398351/

4. 专职F2E = 0 表格布局 简单的DHTML 无组织、无纪律的开发 专职F2E = 2 DIV布局 支持GBS Ajax/丰富的交互体验 建立规范 专职F2E > 12 团队协作开发 品质提升 专业化FDP 基于YUI开发 雅虎中国的前端发展 2005 2007 2008

5. facebook.com ymail.com yahoo.com msn.com

6. 163.com qq.com sohu.com xiaonei.com my.cn.yahoo.com kaixin001.com cn.yahoo.com

7. 高级页面布局 RIA组件 (tabview, carousel, slideshow…) 高级UI效果 (圆角, 阴影, …) 当前前端开发面临的问题 数据处理(Ajax) 性能体验 (UPP, PLT, CPU消费, 内存占用…) 协作开发

8. 前端的演变 • YUI的演变 • 开发流程演变 • 角色的演变

9. YUI的演变 功能库 框架

10. YUI Yahoo! User Interface Library YUI是一个富客户端开发框架(不仅仅是Javascript框架) YUI是开源的，免费的 YUI不仅限Yahoo! 使用，现已成为最流行的框架之一 http://www.flickr.com/photos/codepo8/2294380961/

11. YUI 2.x 2006/2/13 - YUI beta 12006/5/9 - YUI beta 22006/7/10 - YUI 0.112006/8/28 - YUI 0.11.32006/10/16 - YUI 0.11.42006/11/13 - YUI 0.12.02006/12/18 - YUI 0.12.1 2007/1/8 - YUI 0.12.22007/2/20 - YUI 2.2.02007/4/9 - YUI 2.2.12007/4/18 - YUI 2.2.22007/7/31 - YUI 2.3.02007/9/19 - YUI 2.3.12007/12/4 - YUI 2.4.02007/12/19 - YUI 2.4.1 2008/2/20 - YUI 2.5.02008/3/19 - YUI 2.5.12008/5/28 - YUI 2.5.22008/10/1 - YUI 2.6.02008/8/13 - YUI 3 PR12008/12/9 - YUI 3 PR2 2009/2/18 – YUI 2.7.0 YUI 3.x YUI的演变过程 Y!表现平台 2005 2006 2007 2008 2009 参考链接：http://www.xtimeline.com/timeline/YUI-Timeline

12. YUI 2.x 强大的功能库

13. 维护 CSS Grids 提供超过1000种布局（详细, 介绍） 提供桌面软件风格的页面布局（详细） Layout Manager 优化/测试 交互 模块(组件) 模板(布局)

14. 维护 Button Calendar Color Picker Menu Carousel Container (Module, Overlay, Panel, ToolTip, Dialog, SimpleDialog) Paginator Rich Text Editor TabView TreeView AutoComplete Slider Charts Image Cropper DataTable Uploader RIA控件 优化/测试 交互 模块(组件) 模板(布局)

15. 维护 基本开发元件(Utility) DataSource Browser History Manager Connection Manager JSON Cookie Element Drag&Drop Resize Animation StyleSheet DOM Event Selector YUI Loader Get Global Object YAHOO.namespace, YAHOO.lang, YAHOO.env, YAHOO.log 优化/测试 交互 模块(组件) 模板(布局)

16. 维护 Logger Control Profiler Profiler Viewer YUI Test Utility YUI Compressor 优化/测试 交互 模块(组件) 模板(布局)

17. 维护 YUI Doc 优化/测试 交互 模块(组件) 模板(布局)

18. 5. Carousel组件增强展示效果 DEMO： http://hikejun.com/sharing/YUI@tuling/example/flickr.carousel.html YUI2.x 使用实例 - Flickr搜索 • YUI Loader按需加载 • Selector代替Dom • Get组件实现跨站请求 • YQL (YAP提供的一个工具) DEMO： http://hikejun.com/sharing/YUI@tuling/example/flickr.html

19. YUI2.x瞄准前端开发生命周期的每个环节，提供组件和工具。YUI2.x瞄准前端开发生命周期的每个环节，提供组件和工具。 结论1：

20. 开发元件(Utility)集 DataSource Global Object YAHOO.namespace, YAHOO.lang, YAHOO.env, YAHOO.log Browser History Manager Connection Manager JSON Cookie Get Element Drag&Drop Resize Animation StyleSheet DOM Event Selector YUI Loader YUI2.x是一个强大的、成熟的、稳定的功能库。 结论2： http://www.flickr.com/photos/wwworks/2472232245/

21. 开发跟设计的冲突点：开发试图用框架实现开发的一致性，而设计(产品)试图追求差异性和新的流行元素。开发跟设计的冲突点：开发试图用框架实现开发的一致性，而设计(产品)试图追求差异性和新的流行元素。

22. 30 Essential Controls Bill Scott, Theresa Neil 参考链接：http://designingwebinterfaces.com/essential_controls

23. 前端工程师(Developer) 设计师(Designer) 通用组件库 模式(模板、开发模式) 框架、开发规范 Desgin Pattern 原型 设计规范(GuideLine)

24. YUI 3.x 灵活的框架

25. YUI 3.x 追求的目标 • Lighter更好的颗粒化模块/子模块强调代码重用: 通用的基类、插件和扩展的机制 • Easier一致性的API Base, Selector, Widget, IO/Get/DataSource便利性 each, bind, nodelist, queue, chainability, general sugar • Faster有机会重新解决核心部分的性能问题

26. dom-base(4.9k) dom-screen(4.6k) dom-style(4.7k) selector(6.0)k) dom (21k) node-base(6.0k) node-screen(0.8k) node-style(0.3k) node-event-simulate(0.3k) node(6.6k) anim-base(4.4k) anim-xy(0.4k) anim-color(0.9k) anim-curve(0.7k) anim-easing(2.3k) anim-scroll(0.5k) anim-node-plugin(0.4k) anim(8.4k) widget-position(1.5k) widget-position-ext(2.3k) widget-stack(3.6k) widget-stdmod(4.9k) widget(8.6k) dd-ddm-base(2.2k) dd-ddm(1.4k) dd-ddm-drop(3.4k) dd-drag(8.1k) dd-drop(4.4k) dd-constrain(3.5k) dd-plugin(0.4k) dd-drop-plugin(0.4k) dd(24.7k) dd-proxy(1.7k) io-base(3.5k) io-xdr(0.8k) io-form(1.1k) io-upload-iframe(1.9k) io-queue(0.8k) io(6.1k) json-parse(1.2k) json-stringify(1.7k) json(2.9k) yuitest(22.0k) yui(23.4k) dom (21k) event(22.4k) yui-base(8.0k) base(4.0k) attribute(3.9k) anim(8.4k) console(8.0k) classnamemanager(0.4k) node(6.6k) json(2.9k) dd(24.7k) io(6.1k) widget(8.6k) cookie(3.2k) dump(0.8k) oop(1.7k) overlay(0.4k) plugin(0.9k) profiler(3.4k) get(3.3k) loader(12.2k) node-menunav(11.5k) queue(1.4k) slider(8.6k) substitute(0.9k) event(22.4k) yuitest(22.0k) attribute(3.9k) yui(23.3k) yui-base(8.0k) base(4.0k) console(8.0k) classnamemanager(0.4k) cookie(3.2k) dump(0.8k) oop(1.7k) overlay(0.4k) plugin(0.9k) profiler(3.4k) get(3.3k) loader(12.2k) node-menunav(11.5k) queue(1.4k) slider(8.6k) substitute(0.9k) YUI 3 PR2 高度模块化

27. Connection vs. IO 出自：http://video.yahoo.com/watch/5044557/13406817

28. “点菜”方式 http://www.flickr.com/photos/zeping/281262028/

29. http://developer.yahoo.com/yui/3/configurator/

30. http://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.pnghttp://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.png

31. 开始用YUI 3.x (1) <script src=“http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js”></script> (23.4K) <script> //你的代码 </script>

32. ① Loader配置文件 ② 模块列表 ③ YUI实例 ① ② ③ 开始用YUI 3.x (2) (function(){ //你的代码 })(); YUI(CONF).use(‘*’, function(Y){ //你的代码 });

33. 开始用YUI 3.x (3) (function(){ var tip = document.createElement(“div”); tip.className = “tip”; tip.innerHTML = “欢迎学习YUI!” document.body.appendChild(tip); })(); YUI(CONF).use(‘node’, function(Y){ Y.get(“body”).appendChild(Y.Node.create(‘<div class=“tip”>欢迎学习YUI!</div>’)); }); Y.get(“body”).appendChild(Y.Node.create(‘<div class=“tip”>欢迎学习YUI!</div>’));

34. 如: 写入qq-lib.js (如果介意YUI2.x中的YAHOO) 开始用YUI 3.x (4) var CONF = { base: ‘/yui3/build/’, combine: false, charset: ‘utf-8’, loadOptional: true, modules:{ my_module: { fullpath: “http://.....my_module-min.js”, requires: [“node”,“base”] } } }; var QQ = YUI(CONF); …… QQ.namespace('example.demo1'); QQ.namespace('example.demo2'); QQ.namespace('example.demo3'); …… QQ.use(‘node’, ‘my_module’, QQ.example.demo1.init); QQ.use(‘node’, ‘base’, ‘anim’, QQ.example.demo2.init); QQ.use(‘node’, ‘io’, ‘slider’, QQ.example.demo3.init);

35. YUI3的组件框架 Widget组件框架 基本组件框架 提供属性管理机制

36. YUI3的组件框架 • YUI 3所有的类都从这个类派生 • 提供自定义事件和属性管理机制 • “init”和”destroy”生命周期管理 • 提供插件/扩展管理 基本组件框架。提供属性管理和事件机制

37. function MyClass(){ MyClass.superclass .constructor.apply(this, arguments); } Y.mix(MyClass, { NAME: “myclass”, ATTRS: { attrA: { //属性attrA的定义 } } }); Y.extend(MyClass, Y.Base, { //定义原型链上的属性或方法 }); …… Y.extend(MyClass, Y.Base, { doSomething: function(){ this.fire(‘after_dosomething’); } }); Var o = new MyClass({attrA: 100}); o.on(‘after_dosomething’, function(){ …… }); o.after(‘after_dosomething’, function(){ …… }); YUI3的组件框架 基本组件框架。提供属性管理和事件机制

38. YUI3的组件框架 • 1. 继承自Base • 2. 包括通用的属性和方法 • boundingBox, contentBox • width, height • visible, disable, hasFocus • strings • show(), hide(), focus(), blur(), enable(), disable() • 3. Widget渲染周期的管理 • 4. 为Widget开发建立一套通用的模式 基本组件框架。提供属性管理和事件机制

39. YUI3的组件框架 function MyPlugin(config) { this._owner = config.owner; } MyPlugin.NAME = 'myplugin'; MyPlugin.NS = 'mp'; MyPlugin.prototype = { doSomething: function() { alert('hello world'); } }; var myNode = Y.get('#demo'); myNode.plug(MyPlugin); myNode.mp.doSomething(); 向结点或Widget添加功能。 如，Y.get(‘#target’).plug(MyPlugin)

41. YUI 3的框架 YUI 2的Widget 其他框架(jQuery) http://www.flickr.com/photos/77824231@N00/478704495/

42. 来自YUI Team的介绍 Satyen Desai http://video.yahoo.com/watch/5044557/13406817 Dav Glasshttp://www.slideshare.net/davglass/yui-3 Eric Miraglia & Matt Sweeney http://video.yahoo.com/watch/3711767/10207432

43. http://yuilibrary.com/

44. http://developer.yahoo.com/yui/docs/index.html

45. http://developer.yahoo.com/yui/examples/ >300个实例供学习

46. http://developer.yahoo.com/yui/3/

47. http://developer.yahoo.com/yui/theater/

48. http://yuiblog.com/

49. http://twitter.com/yuilibrary

50. 开发流程的演变 单兵作战 集团军作战 http://www.boston.com/bigpicture/