KISSY Component API Design

KISSY

KISSY Component API Design
yiminghe@gmail.com

2012-06-05 draft

KISSY
2

Outline
• Why create component
• Why API design
• KISSY Component API Design
• API Design principles

docs.kissyui.com | kissyteam@gmail.com

KISSY
3

Components

http://docs.kissyui.com/kissy-bootstrap/docs/


KISSY
4

Components


KISSY
5

Why create components

• Ease of development


KISSY
6



• Reusability


KISSY
7



• Reusability

•Maintainability

KISSY
8

Why API Design

• Contract between user and developer


KISSY
9

Why API Design


• Stable platform to build on


KISSY
1
0

Why API Design


• Stable platform to build on
• Minimize waste
• Code-reuse instead of re-writing
• Reduce code and complexity


KISSY
1
1

Component API Design
• Structure
• Subcomponent
• Subclass
• Plugin
• Events
• Lifecycle event
• Skin
• Creation


KISSY
1
2

Structure

• Config

• Attribute

• Method


KISSY
1
3

Config

• Config
new Overlay({
width:100,
height:100,
content:'i am overlay'
})


KISSY
1
4

Attribute

• Attribute
• Talk to your component

var o=new Overlay({});
o.get("content");
o.set("content","xx");


KISSY
1
5

Method

• Method
• Attribute first, method second

var o=new Tree({});
o.collapseAll();
o.set(“collapsed",true);


KISSY
1
6

Subcomponent

•Config/Attribute
• Children

•Method
• addChild/removeChild/removeChildren


KISSY
1
7

Subcomponent

•Config/Attribute
• Children

var o=new Menu({
children:[{new Menu.Item(){}},{xclass:'menuitem‘, content:'menuitem-
content2'}]
});
o.get("children");


KISSY
1
8

Subcomponent

•Method
• addChild/removeChild/removeChildren

var o=new Menu({});
o.addChild(new Menu.Item());


KISSY
1
9

Subclass
var MyOverlay = Overlay.extend({
initialize:function(){},
• Easy to extend createDom:function(){},
renderUI:function(){},
syncUI:function(){}
},{
ATTRS:{
myAttr:{}
}
});

KISSY
2
0

Plugin

• enhance ability var editor = new Editor({
plugins:[
dynamically at
FontSize,
runtime new Image({
url:’upload.htm’
})]
});


KISSY
2
1

Events
• Event
• Native lifecycle event / attrChange event / Custom event
• Method: on / detach
• Config : listeners
{
type:,
target:, // consider bubbling
yy:xx
}


KISSY
2
2

Events

• Custom Event
var o = new Overlay({
listeners : { hide : { fn : function(){}}}
});
o.on("show",function(){
});


KISSY
2
3

Events

• Lifecycle event
• beforeCreateDom/afterCreateDom/beforeRenderUI/afterRenderUI
/beforeBindUI/afterBindUI/..

var o=new Overlay();
o.on("afterCreateDom",function(){
alert(o.get("el"));
});


KISSY
2
4

Events

• AttrChange event
• beforeAttrChange/afterAttrChangeDom

var o=new Button.Toggle();
o.on("afterCheckedChange",function(){
alert(o.get(“checked"));
});


KISSY
2
5

Skin

• Config
• prefixCls

new Button({
prefixCls:"xx-"
});


KISSY
2
6

Creation

• new

• srcNode

• xclass


KISSY
2
7

Creation

• new

var m = new Menu();
m.addChild(new Menu.Item());
m.on("click",function(){})
m.render();


KISSY
2
8

Creation

• srcNode new Menu({
srcNode:div,
<div class='ks-menu'> listeners:{
<div class='ks- click:function(){
menuitem'></div> }
</div> }
});


KISSY
2
9

Creation
new Menu({
• xclass children:[{
xclass:'menuitem',
content:'yy'
}],
render:container,
listeners:{
click:function(){}
}});

KISSY
3
0

API Design Principle

• Hide implementation

new Overlay({
// view: new OverlayRender()
});


KISSY
3
1


• Easy to learn
• consistency
• simple

• elCls/el/srcNode/get()/set()


KISSY
3
2


• Easy to read and write
new Overlay({
width:,
height:'',
children:[{
xclass:'menu'
}]});


KISSY
3
3


• Easy to extend

var MyOverlay = Overlay.extend(…);


KISSY
3
4


• make api complete
• separate concern

• new/addChild/removeChild/destroy/on/detach


KISSY

THANKS FOR
COMING
SEE YOU SOON!

KISSY Component API Design

Recommended

Recommended

More Related Content

More from yiming he

More from yiming he (20)

Recently uploaded

Recently uploaded (20)

KISSY Component API Design