打造高品质前端 – YUI 应用

1. 资料下载http://hikejun.com/sharing/YUI@tuling/yui.ppt 打造高品质前端 – YUI应用 张克军 http://hikejun.com http://twitter.com/kejunz

2. 张克军 (Kejun) 前端工程师/D2委员会成员 雅虎中国UED – 前端开发小组 主要负责前端开发流程、开发标准、品质提升 kejun@ymail.com http://hikejun.com http://twitter.com/kejunz YIM: listenpro GTalk: listenpro

3. 1999.10

4. 2002.12

5. 2005.2

6. 2007.5 (YUI) http://flickr.com/photos/kejun/521035874/sizes/o/in/set-72157594522105362/

7. 雅虎中国的前端开发 专职F2E= 0 表格布局 简单的DHTML 无组织、无纪律的开发 专职F2E= 2 DIV布局 支持GBS Ajax/丰富的交互体验 建立规范 专职F2E= 12 (还在招募中…) 团队协作开发 品质提升 统一的FDP 2005 2008 2007 推广YUI至全部产品线

8. my.cn.yahoo.com cn.yahoo.com 163.com qq.com sina.com.cn sohu.com xiaonei.com kaixin001.com youku.com

9. facebook.com gmail.com ymail.com yahoo.com msn.com myspace.com youtube.com

10. Christian Heilmann@WDN http://www.slideshare.net/cheilmann/the-role-of-java-script

11. 伴随前端技术的演变开发中的问题也在随之改变伴随前端技术的演变开发中的问题也在随之改变

12. "The page is an application with a data connection to a server." - Douglas Crockford (Yahoo!资深架构师)

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

14. YUI提供了一套完整的解决方案 http://YUILibrary.com

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

16. 维护 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控件 结构(布局)

17. 维护 优化/测试 交互行为 基本开发元件(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

18. 维护 优化/测试 交互行为 Logger Control Profiler Profiler Viewer YUI Test Utility 模块 YUI Compressor 结构(布局)

19. 维护 优化/测试 YUI Doc 交互行为 模块 结构(布局)

20. YUI是覆盖前端开发各个环节最全面的开源框架

21. YUI太大?

22. YUI 2.6.0

23. 开始使用YUI进行开发

24. YUI Grids Builder快速创建页面布局 更多介绍 http://layouts.ironmyers.com/

25. http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js (27.6K) YUI Loader Get Global Object YAHOO.namespace, YAHOO.lang, YAHOO.env, YAHOO.log 使用YUILoader管理项目文件

26. var loader = new Y.util.YUILoader({ base: 'http://cn.yui.yahooapis.com/2.6.0/build/', loadOptional: true, require: ['event', 'selector', 'carousel'], onSuccess: function(){ YS = Y.util.Selector; YD = Y.util.Dom; YE = Y.util.Event; YD.addClass(document.body, 'yui-skin-sam'); Y.flickrSearch.init(); } }); loader.insert();

27. loader.addModule({ name:'crumb', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/crumb_1_0_0_min.js' }); loader.addModule({ name:'sns_base', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/snsbase_1_0_8_min.js', requires:['dom', 'event'] }); loader.addModule({ name:'msg', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/msg_1_0_0_min.js', requires:['dom', 'event', 'dragdrop','animation'] }); loader.addModule({ name:'sns_events', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/events_1_0_3_min.js' }); loader.addModule({ name:'sns_share', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/share_1_0_0_min.js' });

28. cn.yahoo.com qq.com 163.com http://hikejun.com/sharing/YUI@tuling/example/stat_js.php

29. 实例1：Flickr搜索 YUI Loader按需加载 Selector代替DomGet实现跨站请求 YQL DEMO： http://hikejun.com/sharing/YUI@tuling/example/flickr.html

30. 实例2：Flickr搜索.增强版 Carousel增强展示效果 DEMO： http://hikejun.com/sharing/YUI@tuling/example/flickr.carousel.html

31. 实例3: 复杂应用UI http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html

32. 不断向前演变的YUI • 2006/2/13 - YUI beta 1(0.9)正式发布2006/5/9 - YUI beta 2发布2006/7/10 - YUI 0.11发布2006/8/28 - YUI 0.11.3发布2006/10/16 - YUI 0.11.4发布2006/11/13 - YUI 0.12.0发布2006/12/18 - YUI 0.12.1发布2007/1/8 - YUI 0.12.2发布2007/2/20 - YUI 2.2.0发布2007/4/9 - YUI 2.2.1发布2007/4/18 - YUI 2.2.2发布2007/7/31 - YUI 2.3.0发布2007/9/19 - YUI 2.3.1发布2007/12/4 - YUI 2.4.0发布2007/12/19 - YUI 2.4.1发布2008/2/20 - YUI 2.5.0发布2008/3/19 - YUI 2.5.1发布2008/5/28 - YUI 2.5.2发布2008/10/1 - YUI 2.6.0发布2008/8/13 - YUI 3 PR1发布2008/12/9 - YUI 3 PR2发布2009/2/18 – YUI 2.7.0发布 http://www.xtimeline.com/timeline/YUI-Timeline

33. http://yuilibrary.com/

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

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

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

37. http://yuiblog.com/

38. http://twitter.com/yuilibrary

39. YUI In The Wild http://yuiblog.com/blog/category/in-the-wild/

40. 下一代YUI http://developer.yahoo.com/yui/3/

41. YUI 2: popup.innerHTML = desc.innerHTML; YD.setStyle(popup,‘opacity’, 0.9); YD.setStyle(popup,‘top’, (ev.clientY + 10) + ‘px’); YD.setStyle(popup,‘left’, (ev.clientX + 10) + ‘px’); YUI 3： popup.set('innerHTML', desc.get('innerHTML')) .setStyles({ opacity: 0.9, top: (ev.clientY + 10) + "px", left: (ev.clientX + 10) + "px"});jQuery：popup.html(desc.html()).show().css("opacity", 0.9).css("top", (ev.clientY + 10) + "px").css("left", (ev.clientX + 10) + "px");

42. 原图：http://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.png原图：http://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.png

43. dom-base(4.9k) dom-screen(4.6k) dom-style(4.7k) selector(6.0)k) dom (21k) event(22.4k) yuitest(22.0k) attribute(3.9k) yui(23.3k) yui-base(8.0k) base(4.0k) 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) console(8.0k) classnamemanager(0.4k) widget-position(1.5k) widget-position-ext(2.3k) widget-stack(3.6k) widget-stdmod(4.9k) 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) 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) YUI 3 PR2 高度模块化 json-parse(1.2k) json-stringify(1.7k) json(2.9k) yuitest(22.0k) yui(23.3k) 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)

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

45. YUI 3.x 追求的目标 • Lighter • Faster • More Consistent • More Powerful • More Securable

46. 开始用YUI 3.x (1) (function(){ //你的代码 })(); YUI().use(‘*’, function(Y){ //你的代码 });

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

48. 开始用YUI 3.x (3) var MY_CONF = { base: ‘/yui3/build/’, combine: false, charset: ‘utf-8’, loadOptional: true, modules:{ my_module: { fullpath: “http://.....my_module-min.js”, requires: [“node”,“base”] } } }; …… YUI.namespace('example.yui3.demo1'); YUI.namespace('example.yui3.demo2'); YUI.namespace('example.yui3.demo3'); …… YUI(MY_CONF).use(‘node’, ‘my_module’, YUI.example.yui3.demo1.init); YUI(MY_CONF).use(‘node’, ‘base’, ‘anim’, YUI.example.yui3.demo2.init); YUI(MY_CONF).use(‘node’, ‘io’, ‘slider’, YUI.example.yui3.demo3.init);

49. 实例一: 简单开始YUI3 • Node/NodeList • Event DEMO: http://hikejun.com/sharing/YUI@tuling/example/yui3.html

50. 实例二：YUI3组件开发 • 高度的一致性 • 统一的属性管理方式 • 统一的自定义事件机制 • 统一的组件生命周期 DEMO：http://hikejun.com/demo/yui3/id7_slideshow/slides1.html