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

More Related Content

More from yiming he

Recently uploaded

KISSY Component API Design