From YUI3 to K2

From YUI3 to K2Koubei F2E 2011.04.06

What is YUI?

http://baike.baidu.com/view/1702955.html
http://baike.baidu.com/view/1702955.htmlhttp://baike.baidu.com/view/1702955.html

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

Yahoo! User Interface

http://developer.yahoo.com/yui/http://yuilibrary.com/http://yuiblog.com/
http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/http://yuilibrary.comhttp://yuilibrary.comhttp://yuiblog.comhttp://yuiblog.com

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

YUI FamilyUI

YUI Gallery YUI CSS

YUI 3 YUI 2

Server CDN hosting

Combo Loader

PHPLoader

YUI3 + Node.js

Developer #yui (freenode) yuilibrary / forum

YUI Theater

YUI Blog

Development

Builder YUI Doc Builder

Compressor YUI Test

YUI Doc

Profiler YUI Console

CDN hosting

YLS (YUI Loader Server)

Yeti

@yuilibrary YUI (github.com)

GBS (Graded Browser Support)
http://yuilibrary.com/gallery/http://yuilibrary.com/gallery/http://developer.yahoo.com/yui/3/cssreset/http://developer.yahoo.com/yui/3/cssreset/http://developer.yahoo.com/yui/2/http://developer.yahoo.com/yui/2/http://developer.yahoo.com/yui/2/http://developer.yahoo.com/yui/2/http://www.yuiblog.com/blog/2008/07/16/combohandler/http://www.yuiblog.com/blog/2008/07/16/combohandler/https://github.com/yui/phploaderhttps://github.com/yui/phploaderhttps://github.com/yui/nodejs-yui3https://github.com/yui/nodejs-yui3http://yuilibrary.com/irchttp://yuilibrary.com/irchttp://yuilibrary.com/http://yuilibrary.com/http://developer.yahoo.com/yui/theater/http://developer.yahoo.com/yui/theater/http://yuiblog.com/http://yuiblog.com/https://github.com/yui/builderhttps://github.com/yui/builderhttp://yuilibrary.com/projects/yuicompressor/http://yuilibrary.com/projects/yuicompressor/https://github.com/yui/yuitesthttps://github.com/yui/yuitesthttps://github.com/yui/yuidochttps://github.com/yui/yuidochttp://developer.yahoo.com/yui/3/profiler/http://developer.yahoo.com/yui/3/profiler/http://developer.yahoo.com/yui/3/console/http://developer.yahoo.com/yui/3/console/http://developer.yahoo.com/yui/3/configurator/http://developer.yahoo.com/yui/3/configurator/http://reid.github.com/decks/2011/bayjax/yls.htmlhttp://reid.github.com/decks/2011/bayjax/yls.htmlhttp://yuilibrary.com/projects/yeti/http://yuilibrary.com/projects/yeti/http://twitter.com/yuilibraryhttp://twitter.com/yuilibraryhttps://github.com/yui/https://github.com/yui/http://developer.yahoo.com/yui/articles/gbs/http://developer.yahoo.com/yui/articles/gbs/

Goals

YUI().use('lighter', function(Y) {

Y.all('.faster li').each(function(v) {

v.set('innerHTML', 'easier');

});

});

Lighter

Y.aggregate()

Y.agument()

Y.bind()

Y.clone()

Y.extend()

Y.rbind()

http://developer.yahoo.com/yui/3/api/module_oop.html

Emphasis on Code ReuseDont write code more than once, use it again.
http://developer.yahoo.com/yui/3/api/module_oop.htmlhttp://developer.yahoo.com/yui/3/api/module_oop.html

Widget Hierarchy

EventTarget

Attribute

Plugin.Host

Base

Widget

MyWidget


Lighter

http://josephjiang.com/entry.php?id=257http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets
http://josephjiang.com/entry.php?id=257http://josephjiang.com/entry.php?id=257http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgetshttp://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets

CoreComponent Infrastructure

Utilities Widgets Plugins CSS

YUI (seed)Event LoaderDOMOOPNode

AttributeBasePluginWidget

AnimationAsyncQueueCacheCookieDataSchemaDataSourceDataTypeDDHistoryImageLoaderInternationalizationIOJSONJSONPProfilerRecoredsetResizeSortableStyleSheetSWFTestTransitionUploaderYQL Query

AutocompleteChartsConsoleDataTableDialOverlayRTEScrollViewSliderTabView

Console Filters PluginFocusManager Node PluginMenuNav Node Plugin

ResetBaseFontsGrids


Lighter

"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"] } } },

Lighter Emphasis on Code Reuse

Dont write code more than once, use it again.

Finer Grainded, Modules & Sub-ModulesDont load what you dont need

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

Easier More Consistent

Node supports the HTMLElements API

Y.Node HTMLElementreset() 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
http://www.w3.org/TR/DOM-Level-2-Core/http://www.w3.org/TR/DOM-Level-2-Core/http://developer.yahoo.com/yui/3/node/#node-migrationhttp://developer.yahoo.com/yui/3/node/#node-migration

Easier More Consistent

Node supports the HTMLElements APINode normalizes the HTMLElements API

node.getAttribute("href")

node.contains(aNode)

node.getStyle("paddingTop")

node.previous()

Easier

Y.Array.each() (forEach)

Y.Array.indexOf()

Y.Array.some()

More ConsistentNode supports the HTMLElements APINode normalizes the HTMLElements APIArray supports some Array methods of JavaScript 1.6

https://developer.mozilla.org/en/javascripthttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/en/javascripthttps://developer.mozilla.org/en/javascripthttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Arrayhttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

Easier

//DOM events

button.on("click", doSomething);

//Custom events

instance.on("myEvent", doSomething);

More ConsistentNode supports the HTMLElements APINode normalizes the HTMLElements APIArray supports some Array methods of JavaScript 1.6All events are custom events

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

Easier

YUI().use(node-base,function(Y){

Y.one(body).addClass(yui-skin-sam);

});

More Consistent More Convenient

Flatter namespace & chainability

Y.Array.test()

Y.Array.hash()

Y.Array.numericSort()

Y.all(li).each(function(){

});

Easier More Consistent More Convenient

Flatter namespace & chainabilityLanguage enhancements & batch operations

//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(*);

Easier More Consistent More Convenient

Flatter namespace & chainabilityLanguage enhancements & batch operationsDynamic loading & Runtime Configure & Simple YUI

http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/
http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/

YUI().use(node,function({

Y.all(.k2).addClass(k3);

});

YUI({

root:yui/3.1.0/

}).use(node,function(){

Y.all(.k2).addClass(k3);

});

Easier More Consistent More Convenient More Powerful

Sandbox

http://www.infoq.com/cn/articles/sandboxOnB
http://www.infoq.comhttp://www.infoq.com

node.plug(IOPlugin);

node.io.getContent("http://foo/bar");

node.plug(DragDropPlugin);

node.dd.set("handle", ".title");


SandboxPlugin
http://foo/barhttp://foo/bar

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]);});


SandboxPluginSelector

AOP

Do.before()

Do.after()

Do.detach()


SandboxPluginSelectorAOP

http://developer.yahoo.com/yui/3/api/Do.htmlhttp://uedmagazine.com/ued/comments.php?y=09&m=09&entry=entry090923-120216
http://developer.yahoo.com/yui/3/api/Do.htmlhttp://developer.yahoo.com/yui/3/api/Do.htmlhttp://uedmagazine.com/ued/comments.php?y=09&m=09&entry=entry090923-120216http://uedmagazine.com/ued/comments.php?y=09&m=09&entry=entry090923-120216

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.

Easier More Consistent More Convenient More Powerful More Securable

http://adsafe.orghttps://github.com/yui/yui-cajahttp://code.google.com/p/google-caja/
http://adsafe.orghttp://adsafe.orghttps://github.com/yui/yui-cajahttps://github.com/yui/yui-cajahttp://code.google.com/p/google-caja/http://code.google.com/p/google-caja/

Loading, Combo Handler & Rollup

YUI().use(node-base,function(){ Y.one(body).addClass(yui3-skin-sam);});

Faster

Urls : 2, Files : 8

Loading, Combo Handler & RollupFaster

YUI({ combine:false}).use('node-base','node-event-delegate','node-screen','node-style',function(Y){ Y.one('body').addClass('yui3-skin-sam');});

Urls : 8, Files : 8
http://yui.yahooapis.com/3.3.0/build/oop/oop-min.jshttp://yui.yahooapis.com/3.3.0/build/oop/oop-min.jshttp://yui.yahooapis.com/3.3.0/build/oop/oop-min.jshttp://yui.yahooapis.com/3.3.0/build/oop/oop-min.jshttp://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-base-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-base-min.jshttp://yui.yahooapis.com/3.3.0/build/dom/dom-min.jshttp://yui.yahooapis.com/3.3.0/build/dom/dom-min.jshttp://yui.yahooapis.com/3.3.0/build/dom/dom-min.jshttp://yui.yahooapis.com/3.3.0/build/dom/dom-min.jshttp://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.jshttp://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.jshttp://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.jshttp://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.jshttp://yui.yahooapis.com/3.3.0/build/node/node-min.jshttp://yui.yahooapis.com/3.3.0/build/node/node-min.jshttp://yui.yahooapis.com/3.3.0/build/node/node-min.jshttp://yui.yahooapis.com/3.3.0/build/node/node-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.jshttp://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.js

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);});

Faster Loading, Combo Handler & Rollup Runtime performance Re-factor core performance pain points

Usable vs. Professional

Trade-off

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

BSDLicense

http://www.awflasher.com/blog/archives/939http://developer.yahoo.com/yui/3/license.html

BSD,

BSD BSDBSD BSD
http://www.awflasher.com/blog/archives/939http://www.awflasher.com/blog/archives/939http://developer.yahoo.com/yui/3/license.htmlhttp://developer.yahoo.com/yui/3/license.html

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

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

Our Lessions about YUI3

What is K2?

What is K2?The Second Generation Infrasturce of Koubei Front-end

http://kxt.koubei.com/wiki/index.php/F2E:K2
http://kxt.koubei.com/wiki/index.php/F2E:K2http://kxt.koubei.com/wiki/index.php/F2E:K2

Web StructureWhat is K2?

http://kxt.koubei.com/wiki/index.php/F2E:HTML

page title /* inline script */ /* inline css */ /* inline script */
http://kxt.koubei.com/wiki/index.php/F2E:HTMLhttp://kxt.koubei.com/wiki/index.php/F2E:HTMLhttp://k.kbcdn.com/product/common/header/fav.pnghttp://k.kbcdn.com/product/common/header/fav.pnghttp://k.kbcdn.com/product/common/header/fav.pnghttp://k.kbcdn.com/product/common/header/fav.png

What is K2? Web Structure Core Engine & Components (Powered by YUI3)

http://kxt.koubei.com/k2

Core Utilities Widgets Components CSS & Skinseed datalazyload

validatoruploaderswfscroll-followpopupresize

editorswitchshuttercalendarimage-cropperpaginationbookmarkcdselectorform

ww resetcolorcommoncornergridsiconbutton
http://kxt.koubei.com/k2http://kxt.koubei.com/k2

Web Structure Core Engine & Components (Powered by YUI3) Front-end Runtime k.kbcdn.com Minify CMS & CMS

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

What is K2?
http://kxt.koubei.com/k2http://kxt.koubei.com/k2

Web Structure Core Engine & Components (Powered by YUI3) Front-end Runtime Development Runtime Tools F2E Validator KFC Cod CodeCola FoTiaoQiang

What is K2?

What is next about K2?

{ module:tuan-list, path:..., data:{ path:..., require:[...] }, js:{ path:..., require:[...] }, css:{ path:..., require:[...], }, callback:..., require:[...]}

http://mustache.github.com/

Web StructureWeb Module Template Engine (Web Server & JS Engine Assembling)
http://mustache.github.com/http://mustache.github.com/

Web Structure Core Engine & Components (Powered by YUI3)

Core Utilities Widgets Components CSS & Skin(for mobile) (for mobile) (for mobile) (for mobile)

shareToFavoritesubscribelogin & singupfeedback

(for mobile)Koubei Design Pattern


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


Web Structure Core Engine & Components (Powered by YUI3) Front-end Runtime Development Runtime ATT3 @ Node.js Debug anywhere & anytime @ seed 2.0


Web Structure Core Engine & Components (Powered by YUI3) Front-end Runtime Development Runtime Tools SlowSlow input.koubei.com performance.koubei.com


Thank you

http://zh.wikipedia.org/wiki/K2
http://zh.wikipedia.org/wiki/k2http://zh.wikipedia.org/wiki/k2

Technology

From YUI3 to K2