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.

1. From YUI3 to K2
Koubei F2E 三七
2011.04.06

2. What is YUI?
http://baike.baidu.com/view/1702955.html

3. http://zh.wikipedia.org/wiki/YUI

5. Yahoo! User Interface
http://developer.yahoo.com/yui/
http://yuilibrary.com/
http://yuiblog.com/

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 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.js
http://yuilibrary.com/projects/yui3/roadmap

33. 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

34. What is K2?

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 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/

42. 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

43. 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

44. 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

45. 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

46. Thank you
http://zh.wikipedia.org/wiki/K2