From YUI3 to K2

8,147 views

Published on

这次2011.04在口碑网的一次内部分享,比较系统的总结了一下YUI的体系,K2是当时口碑网基于YUI3的扩充,包括一些列指南和自动化工具。

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,147
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

From YUI3 to K2

  1. 1. From YUI3 to K2Koubei F2E 三七2011.04.06
  2. 2. What is YUI?http://baike.baidu.com/view/1702955.html
  3. 3. http://zh.wikipedia.org/wiki/YUI
  4. 4. Yahoo! User Interfacehttp://developer.yahoo.com/yui/http://yuilibrary.com/http://yuiblog.com/
  5. 5. History • 2005.??.?? YUI Start • 2006.02.13 YUI 0.10.0 Library & Blog Open Source • 2007.02.20 YUI 2.2.0(0.12.2) • 2007.08.20 YUI Compressor 1.1 • 2008.08.13 YUI 3.0.0pr1 • 2008.12.05 YUI Doc 1.0.0b • 2009.09.14 YUI 2.8.0 • 2009.03.10 YUI Build Tools • 2009.09.09 YUI PHP Loader • 2009.09.29 YUI 3.0.0 GA • 3010.03.31 YUI 3.1.0 • 2010.04.05 YUI3 Nodejs • 2010.08.25 Yeti 0.1.0 • 2010.09.07 YUI 3.2.0 • 2010.01.12 YUI 3.3.0 • 2010.04.?? YUI 2.9.0 • 2010.0?.?? YUI 3.4.0
  6. 6. YUI Family YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Combo Loader YUI3 + Node.js Server YLS (YUI Loader Server) YUI Doc Builder YUI Test Compressor Development YUI Console Profiler Yeti GBS (Graded Browser Support) YUI Blog yuilibrary / forum YUI Theater #yui (freenode) Developer @yuilibrary YUI (github.com)
  7. 7. Goals YUI().use(lighter,  function(Y)  {   Y.all(.faster  li).each(function(v)  {     v.set(innerHTML,  easier);   }); });
  8. 8. Lighter • Emphasis on Code Reuse Don’t write code more than once, use it again. Y.aggregate() Y.agument() Y.bind() Y.clone() Y.extend() Y.rbind()http://developer.yahoo.com/yui/3/api/module_oop.html
  9. 9. Lighter • Emphasis on Code Reuse Don’t write code more than once, use it again. Attribute Base EventTarget Plugin.Host Widget MyWidget Widget Hierarchyhttp://josephjiang.com/entry.php?id=257http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets
  10. 10. Lighter • Emphasis on Code Reuse Don’t write code more than once, use it again. Component Core Utilities Widgets Plugins CSS Infrastructure YUI (seed) Attribute Animation Autocomplete Console Filters Plugin Reset Event Base AsyncQueue Charts FocusManager Node Base Loader Plugin Cache Console Plugin Fonts DOM Widget Cookie DataTable MenuNav Node Plugin Grids OOP DataSchema Dial Node DataSource Overlay DataType RTE DD ScrollView History Slider ImageLoader TabView Internationalization IO JSON JSONP Profiler Recoredset Resize Sortable StyleSheet SWF Test Transition Uploader YQL Query
  11. 11. Lighter • Emphasis on Code Reuse Don’t write code more than once, use it again. • Finer Grainded, Modules & Sub-Modules Don’t load what you don’t need        "io":  {                "submodules":  {                        "io-­‐base":  {                                "optional":  ["querystring-­‐stringify-­‐simple"],                                  "requires":  ["event-­‐custom-­‐base"]                        },                          "io-­‐form":  {                                "requires":  ["io-­‐base",  "node-­‐base",  "node-­‐style"]                        },                          "io-­‐queue":  {                                "requires":  ["io-­‐base",  "queue-­‐promote"]                        },                          "io-­‐upload-­‐iframe":  {                                "requires":  ["io-­‐base",  "node-­‐base"]                        },                          "io-­‐xdr":  {                                "requires":  ["io-­‐base",  "datatype-­‐xml"]                        }                }        },  http://developer.yahoo.com/yui/3/io/
  12. 12. Easier • More Consistent Node supports the HTMLElements API Y.Node HTMLElement reset() HTMLFormElement.reset() blur() HTMLInputElement.blur() appendChild() Node.appendChild() cloneNode() Node.cloneNode() hasAttribute Node.hasAttirbute hasChildNodes() Node.hasChildNodes() insertBefore Node.insertBefore() removeChild() Node.removeChild() replaceChild() Node.replaceChild() scrollIntoview() HTMLElement.scrollIntoView() get(“parentNode”) Node.parentNode set(“innterHTML”,”Foo”) HTMLElement.innerHTMLhttp://www.w3.org/TR/DOM-Level-2-Core/http://developer.yahoo.com/yui/3/node/#node-migration
  13. 13. Easier • More Consistent Node supports the HTMLElements API Node normalizes the HTMLElements API node.getAttribute("href") node.contains(aNode) node.getStyle("paddingTop") node.previous()
  14. 14. Easier • More Consistent Node supports the HTMLElements API Node normalizes the HTMLElements API Array supports some Array methods of JavaScript 1.6 Y.Array.each()      (forEach) Y.Array.indexOf() Y.Array.some()https://developer.mozilla.org/en/javascripthttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array
  15. 15. Easier • More Consistent Node supports the HTMLElements API Node normalizes the HTMLElements API Array supports some Array methods of JavaScript 1.6 All events are custom events //DOM  events button.on("click",  doSomething); //Custom  events instance.on("myEvent",  doSomething);http://developer.yahoo.com/yui/3/event/
  16. 16. Easier • More Consistent • More Convenient Flatter namespace & chainability YUI().use(‘node-­‐base’,function(Y){        Y.one(‘body’).addClass(‘yui-­‐skin-­‐sam’); });
  17. 17. Easier • More Consistent • More Convenient Flatter namespace & chainability Language enhancements & batch operations Y.Array.test() Y.Array.hash() Y.Array.numericSort() Y.all(‘li’).each(function(){ });
  18. 18. Easier • More Consistent • More Convenient Flatter namespace & chainability Language enhancements & batch operations Dynamic loading & Runtime Configure & Simple YUI //YUI  inline  config  (defaul  level) //YUI.GlobalConfig  (global  level) //YUI_config  (page  level) //YUI  instance  config  (instance  level) YUI({      combine:false }).use(‘node-­‐base’,function(Y){          Y.one(‘body’).addClass(‘yui-­‐skin-­‐sam’); }); var  Y  =  YUI().use(‘*’);http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/
  19. 19. Easier • More Consistent • More Convenient • More Powerful Sandbox YUI().use(‘node’,function({      Y.all(‘.k2’).addClass(‘k3’); }); YUI({    root:‘yui/3.1.0/’ }).use(‘node’,function(){    Y.all(‘.k2’).addClass(‘k3’); });http://www.infoq.com/cn/articles/sandboxOnB
  20. 20. Easier • More Consistent • More Convenient • More Powerful Sandbox Plugin   node.plug(IOPlugin);   node.io.getContent("http://foo/bar");        node.plug(DragDropPlugin);   node.dd.set("handle",  ".title");
  21. 21. Easier • More Consistent • More Convenient • More Powerful Sandbox Plugin Selector YUI().use(node,  function(Y)  {        var  node  =  Y.one(#demo),                node2  =  node.one(p);        if  (node2)  {                  node2.addClass(bar);          } }); YUI().use(‘node’,‘selector-­‐css3’,function(Y){ var  one  =  Y.one(‘li[foo=”en”]’); });
  22. 22. Easier • More Consistent • More Convenient • More Powerful Sandbox Plugin Selector AOP Do.before() Do.after() Do.detach() AOPhttp://developer.yahoo.com/yui/3/api/Do.htmlhttp://uedmagazine.com/ued/comments.php?y=09&m=09&entry=entry090923-120216
  23. 23. Easier • More Consistent • More Convenient • More Powerful • More Securable Node is the single point of access to the DOM. Makes YUI 3 ideal as a trusted source for"constrained" environments like Caja and Ad-safe.http://adsafe.orghttps://github.com/yui/yui-cajahttp://code.google.com/p/google-caja/
  24. 24. Faster • Loading, Combo Handler & Rollup YUI().use(‘node-­‐base’,function(){    Y.one(‘body’).addClass(‘yui3-­‐skin-­‐sam’); }); <script id="yui_3_3_0_1_13006792497902" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/loader/loader-min.js"> <script id="yui_3_3_0_1_13006792497903" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/combo? 3.3.0/build/oop/oop-min.js&3.3.0/build/dom/dom-base-min.js&3.3.0/build/dom/selector-native-min.js&3.3.0/build/dom/ selector-css2-min.js&3.3.0/build/event-custom/event-custom-base-min.js&3.3.0/build/event/event-base-min.js&3.3.0/build/ node/node-base-min.js"> Urls : 2, Files : 8
  25. 25. Faster • Loading, Combo Handler & Rollup YUI({   combine:false }).use(node-­‐base,node-­‐event-­‐delegate,node-­‐ screen,node-­‐style,function(Y){   Y.one(body).addClass(yui3-­‐skin-­‐sam); }); <script id="yui_3_3_0_1_13006898295412" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/loader/loader-min.js"> <script id="yui_3_3_0_1_13006898295413" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/oop/oop-min.js"> <script id="yui_3_3_0_1_13006898295414" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/event-custom/event-custom-base-min.js"> <script id="yui_3_3_0_1_13006898295415" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/event/event-base-min.js"> <script id="yui_3_3_0_1_13006898295416" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/dom/dom-min.js"> <script id="yui_3_3_0_1_13006898295417" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/pluginhost/pluginhost-min.js"> <script id="yui_3_3_0_1_13006898295418" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/node/node-min.js"> <script id="yui_3_3_0_1_13006898295419" type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.3.0/ build/event/event-delegate-min.js"> Urls : 8, Files : 8
  26. 26. Faster • Loading, Combo Handler & Rollup • Runtime performance register vs execute, not synchronous, JIT Loading YUI.add(‘module-­‐id’,function(Y){ },‘3.3.0’,{requires:[‘yui-­‐base’]}); YUI().use(‘module-­‐id’,‘node-­‐base’,function(Y){        Y.use(‘module-­‐new-­‐id’,function(Y){ //wow        });        Y.one(‘body’).addClass(‘yui3-­‐skin-­‐sam’); });
  27. 27. Faster • Loading, Combo Handler & Rollup • Runtime performance • Re-factor core performance pain points
  28. 28. Trade-off Usable vs. Professionalhttp://ued.taobao.com/blog/2010/01/11/yui3%E8%AE%BE%E8%AE%A1%E4%B8%AD%E7%9A%84%E6%BF%80%E8%BF%9B%E5%92%8C%E5%A6%A5%E5%8D%8F/
  29. 29. License • BSD BSD开源协议是一个给于使用者很大自由的协议。基本上使用者 可以”为所欲为”,可以自由的使用,修改源代码,也可以将修改后 的代码作为开源或者专有软件再发布。 BSD 代码鼓励代码共享,但需要尊重代码作者的著作权。BSD由 于允许使用者修改和重新发布代码,也允许使用或在BSD代码上 开发商业软件发布和销售,因此是对 商业集成很友好的协议。而 很多的公司企业在选用开源产品的时候都首选BSD协议,因为可 以完全控制这些第三方的代码,在必要的时候可以修改或者二次 开发。http://www.awflasher.com/blog/archives/939http://developer.yahoo.com/yui/3/license.html
  30. 30. What is next about YUI? • General Infrastructure • Performance • RLS(YLS) • Mobile • MVC Infrastructure • Touch/Gesture Event • Widget • Calendar • Panel/Dialog/Windowing • pagination • Tree/Menu/Button/Toobar • Form Utilties • Node.jshttp://yuilibrary.com/projects/yui3/roadmap
  31. 31. Our Lessions about YUI3 • From YUI3 to K2 (Now) • YUI3 Core • YUI3 Event (OOP & AOP) • YUI3 Widget (Attribute, base, plugin) • YUI Test , Profile & Console • YUI3 Performance (Cache, AsyncQueue) • YUI3 CSS & Skins • YUI3 Data Manipulation ( DataSchema, DataSource, DataType, RecoredSet, DataTable ) • YUI Doc
  32. 32. What is K2?
  33. 33. What is K2? The Second Generation Infrasturce of Koubei Front-endhttp://kxt.koubei.com/wiki/index.php/F2E:K2
  34. 34. What is K2? • Web Structure <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="some sentences"> <title>page title</title> <!--start: for iOS--> <link rel="apple-touch-icon" href="http://k.kbcdn.com/product/common/header/ fav.png"> <!--end : for iOS--> <script> /* inline script */ </script> <link rel="stylesheet" href="eg.css"> <style> /* inline css */ </style> </head> <body> <div> <!-- 内容 --> </div> <script src="eg.js"></script> <script> /* inline script */ </script> </body> </html>http://kxt.koubei.com/wiki/index.php/F2E:HTML
  35. 35. What is K2? • Web Structure • Core Engine & Components (Powered by YUI3) Core Utilities Widgets Components CSS & Skin seed datalazyload editor ww reset validator switch color uploader shutter common swf calendar corner scroll-follow image-cropper grids popup pagination icon resize bookmark button cdselector formhttp://kxt.koubei.com/k2
  36. 36. What is K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • k.kbcdn.com • Minify • CMS & CMS
  37. 37. What is K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • ATT2, Pea • http://kxt.koubei.com/k2 • K2 Runtime • console, noCache, noVersion, syntaxHighlight, noCombo, local • TDD • Yeti @ koubei.com • grape • hive, queen
  38. 38. What is K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • Tools • F2E Validator • KFC • Cod • CodeCola • FoTiaoQiang
  39. 39. What is next about K2? • Web Structure Web Module Template Engine (Web Server & JS Engine Assembling) {    ‘module’:‘tuan-­‐list’,    ‘path’:’...’,    ‘data’:{        ‘path’:’...’,        ‘require’:[‘...’]    },    ‘js’:{        ‘path’:’...’,        ‘require’:[‘...’]    },    ‘css’:{        ‘path’:’...’,        ‘require’:[‘...’],    },    ‘callback’:’...’,    ‘require’:[‘...’] }http://mustache.github.com/
  40. 40. What is next about K2? • Web Structure • Core Engine & Components (Powered by YUI3) Core Utilities Widgets Components CSS & Skin (for mobile) (for mobile) (for mobile) (for mobile) (for mobile) shareTo Koubei Design Pattern Favorite subscribe login & singup feedback
  41. 41. What is next about K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Java Loader • Koubei Server Loader @ Node.js • F2E Minify • Front-end Management System 1.0
  42. 42. What is next about K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • ATT3 @ Node.js • Debug anywhere & anytime @ seed 2.0
  43. 43. What is next about K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • Tools • SlowSlow • input.koubei.com • performance.koubei.com
  44. 44. Thank youhttp://zh.wikipedia.org/wiki/K2

×