Download as PDF, PPTX
![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/](https://image.slidesharecdn.com/from-yui3-to-k2-120215073520-phpapp02/75/From-YUI3-to-K2-13-2048.jpg)
![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”]’);
});](https://image.slidesharecdn.com/from-yui3-to-k2-120215073520-phpapp02/75/From-YUI3-to-K2-23-2048.jpg)
![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’);
});](https://image.slidesharecdn.com/from-yui3-to-k2-120215073520-phpapp02/75/From-YUI3-to-K2-28-2048.jpg)
![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/](https://image.slidesharecdn.com/from-yui3-to-k2-120215073520-phpapp02/75/From-YUI3-to-K2-41-2048.jpg)
Uploaded bykaven yan
From YUI3 to K2
This document discusses the transition from YUI3 to K2. It provides a brief history of YUI, describing its goals of code reuse through modular components and submodules. It highlights aspects of YUI3 that make it lighter, easier and faster to use than previous versions, including a more consistent API through the Node utility, language enhancements, dynamic loading, and combo handling for faster loading. The document suggests K2 builds upon these strengths.
More Related Content
From YUI3 to K2
- 1. From YUI3 toK2 Koubei F2E 三七 2011.04.06
- 2.
- 3.
- 5.
- 6. 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
- 7. 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)
- 9. Goals YUI().use('lighter', function(Y) { Y.all('.faster li').each(function(v) { v.set('innerHTML', 'easier'); }); });
- 10. 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
- 11. Lighter • Emphasis on Code Reuse Don’t write code more than once, use it again. Attribute Base EventTarget Plugin.Host Widget MyWidget Widget Hierarchy http://josephjiang.com/entry.php?id=257 http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets
- 12. 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
- 13. 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/
- 14. 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.innerHTML http://www.w3.org/TR/DOM-Level-2-Core/ http://developer.yahoo.com/yui/3/node/#node-migration
- 15. Easier • More Consistent Node supports the HTMLElements API Node normalizes the HTMLElements API node.getAttribute("href") node.contains(aNode) node.getStyle("paddingTop") node.previous()
- 16. 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/javascript https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array
- 17. 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/
- 18. Easier • More Consistent • More Convenient Flatter namespace & chainability YUI().use(‘node-‐base’,function(Y){ Y.one(‘body’).addClass(‘yui-‐skin-‐sam’); });
- 19. 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(){ });
- 20. 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/
- 21. 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
- 22. 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");
- 23. 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”]’); });
- 24. Easier • More Consistent • More Convenient • More Powerful Sandbox Plugin Selector AOP Do.before() Do.after() Do.detach() AOP http://developer.yahoo.com/yui/3/api/Do.html http://uedmagazine.com/ued/comments.php?y=09&m=09&entry=entry090923-120216
- 25. 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.org https://github.com/yui/yui-caja http://code.google.com/p/google-caja/
- 26. 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
- 27. 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
- 28. 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’); });
- 29. Faster • Loading, Combo Handler & Rollup • Runtime performance • Re-factor core performance pain points
- 30. Trade-off Usable vs. Professional http://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/
- 31. License • BSD BSD开源协议是一个给于使用者很大自由的协议。基本上使用者 可以”为所欲为”,可以自由的使用，修改源代码，也可以将修改后 的代码作为开源或者专有软件再发布。 BSD 代码鼓励代码共享，但需要尊重代码作者的著作权。BSD由 于允许使用者修改和重新发布代码，也允许使用或在BSD代码上 开发商业软件发布和销售，因此是对 商业集成很友好的协议。而 很多的公司企业在选用开源产品的时候都首选BSD协议，因为可 以完全控制这些第三方的代码，在必要的时候可以修改或者二次 开发。 http://www.awflasher.com/blog/archives/939 http://developer.yahoo.com/yui/3/license.html
- 32. What is nextabout 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.js http://yuilibrary.com/projects/yui3/roadmap
- 33. Our Lessions aboutYUI3 • 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
- 34.
- 35. What is K2? The Second Generation Infrasturce of Koubei Front-end http://kxt.koubei.com/wiki/index.php/F2E:K2
- 36. 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
- 37. 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 form http://kxt.koubei.com/k2
- 38. What is K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • k.kbcdn.com • Minify • CMS & CMS
- 39. 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
- 40. What is K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • Tools • F2E Validator • KFC • Cod • CodeCola • FoTiaoQiang
- 41. What is nextabout 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/
- 42. What is nextabout 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
- 43. What is nextabout 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
- 44. What is nextabout K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • ATT3 @ Node.js • Debug anywhere & anytime @ seed 2.0
- 45. What is nextabout K2? • Web Structure • Core Engine & Components (Powered by YUI3) • Front-end Runtime • Development Runtime • Tools • SlowSlow • input.koubei.com • performance.koubei.com
- 46.