Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
KISSYKISSY Component API Design                    yiminghe@gmail.com                       2012-06-05 draft
KISSY                                                      2             Outline•   Why create component•   Why API design...
KISSY                                                               3            Componentshttp://docs.kissyui.com/kissy-b...
KISSY                                           4Components  docs.kissyui.com | kissyteam@gmail.com
KISSY                                                     5Why create components• Ease of development            docs.kiss...
KISSY                                                         6Why create components• Ease of development• Reusability    ...
KISSY                                                         7Why create components• Ease of development• Reusability•Mai...
KISSY                                                        8       Why API Design• Contract between user and developer  ...
KISSY                                                         9        Why API Design• Contract between user and developer...
KISSY                                                                      1                                              ...
KISSY                                                             1                                                       ...
KISSY                                                        1                                                        2   ...
KISSY                                                             1                                                       ...
KISSY                                                               1                                                     ...
KISSY                                                                 1                                                   ...
KISSY                                                             1                                                       ...
KISSY                                                                       1                                             ...
KISSY                                                              1                                                      ...
KISSY                                                             1                                                       ...
KISSY                                                                   2                                                 ...
KISSY                                                                    2                                                ...
KISSY                                                           2                                                         ...
KISSY                                                                      2                                              ...
KISSY                                                                   2                                                 ...
KISSY                                                             2                                                       ...
KISSY                                                      2                                                      6       ...
KISSY                                                           2                                                         ...
KISSY                                                                           2                                         ...
KISSY                                                           2                                                         ...
KISSY                                                           3                                                         ...
KISSY                                                           3                                                         ...
KISSY                                                           3                                                         ...
KISSY                                                            3                                                        ...
KISSY                                                           3                                                         ...
KISSYTHANKS FOR  COMING   SEE YOU SOON!
Upcoming SlideShare
Loading in …5
×

KISSY Component API Design

831 views

Published on

Published in: Technology, Business
  • Be the first to comment

KISSY Component API Design

  1. 1. KISSYKISSY Component API Design yiminghe@gmail.com 2012-06-05 draft
  2. 2. KISSY 2 Outline• Why create component• Why API design• KISSY Component API Design• API Design principles docs.kissyui.com | kissyteam@gmail.com
  3. 3. KISSY 3 Componentshttp://docs.kissyui.com/kissy-bootstrap/docs/ docs.kissyui.com | kissyteam@gmail.com
  4. 4. KISSY 4Components docs.kissyui.com | kissyteam@gmail.com
  5. 5. KISSY 5Why create components• Ease of development docs.kissyui.com | kissyteam@gmail.com
  6. 6. KISSY 6Why create components• Ease of development• Reusability docs.kissyui.com | kissyteam@gmail.com
  7. 7. KISSY 7Why create components• Ease of development• Reusability•Maintainability docs.kissyui.com | kissyteam@gmail.com
  8. 8. KISSY 8 Why API Design• Contract between user and developer docs.kissyui.com | kissyteam@gmail.com
  9. 9. KISSY 9 Why API Design• Contract between user and developer• Stable platform to build on docs.kissyui.com | kissyteam@gmail.com
  10. 10. KISSY 1 0 Why API Design• Contract between user and developer• Stable platform to build on• Minimize waste • Code-reuse instead of re-writing • Reduce code and complexity docs.kissyui.com | kissyteam@gmail.com
  11. 11. KISSY 1 1 Component API Design• Structure• Subcomponent• Subclass• Plugin• Events • Lifecycle event• Skin• Creation docs.kissyui.com | kissyteam@gmail.com
  12. 12. KISSY 1 2 Structure• Config• Attribute• Method docs.kissyui.com | kissyteam@gmail.com
  13. 13. KISSY 1 3 Config• Confignew Overlay({ width:100, height:100, content:i am overlay}) docs.kissyui.com | kissyteam@gmail.com
  14. 14. KISSY 1 4 Attribute• Attribute • Talk to your componentvar o=new Overlay({});o.get("content");o.set("content","xx"); docs.kissyui.com | kissyteam@gmail.com
  15. 15. KISSY 1 5 Method• Method • Attribute first, method secondvar o=new Tree({});o.collapseAll();o.set(“collapsed",true); docs.kissyui.com | kissyteam@gmail.com
  16. 16. KISSY 1 6 Subcomponent•Config/Attribute • Children•Method • addChild/removeChild/removeChildren docs.kissyui.com | kissyteam@gmail.com
  17. 17. KISSY 1 7 Subcomponent•Config/Attribute • Childrenvar o=new Menu({children:[{new Menu.Item(){}},{xclass:menuitem‘, content:menuitem-content2}]});o.get("children"); docs.kissyui.com | kissyteam@gmail.com
  18. 18. KISSY 1 8 Subcomponent•Method • addChild/removeChild/removeChildrenvar o=new Menu({});o.addChild(new Menu.Item()); docs.kissyui.com | kissyteam@gmail.com
  19. 19. KISSY 1 9 Subclass var MyOverlay = Overlay.extend({ initialize:function(){},• Easy to extend createDom:function(){}, renderUI:function(){}, syncUI:function(){} },{ ATTRS:{ myAttr:{} } }); docs.kissyui.com | kissyteam@gmail.com
  20. 20. KISSY 2 0 Plugin• enhance ability var editor = new Editor({ plugins:[dynamically at FontSize,runtime new Image({ url:’upload.htm’ })] }); docs.kissyui.com | kissyteam@gmail.com
  21. 21. KISSY 2 1 Events• Event • Native lifecycle event / attrChange event / Custom event • Method: on / detach • Config : listeners{type:,target:, // consider bubblingyy:xx} docs.kissyui.com | kissyteam@gmail.com
  22. 22. KISSY 2 2 Events• Custom Eventvar o = new Overlay({ listeners : { hide : { fn : function(){}}}});o.on("show",function(){}); docs.kissyui.com | kissyteam@gmail.com
  23. 23. KISSY 2 3 Events• Lifecycle event • beforeCreateDom/afterCreateDom/beforeRenderUI/afterRenderUI /beforeBindUI/afterBindUI/..var o=new Overlay();o.on("afterCreateDom",function(){ alert(o.get("el"));}); docs.kissyui.com | kissyteam@gmail.com
  24. 24. KISSY 2 4 Events• AttrChange event • beforeAttrChange/afterAttrChangeDomvar o=new Button.Toggle();o.on("afterCheckedChange",function(){ alert(o.get(“checked"));}); docs.kissyui.com | kissyteam@gmail.com
  25. 25. KISSY 2 5 Skin• Config • prefixClsnew Button({ prefixCls:"xx-"}); docs.kissyui.com | kissyteam@gmail.com
  26. 26. KISSY 2 6 Creation• new• srcNode• xclass docs.kissyui.com | kissyteam@gmail.com
  27. 27. KISSY 2 7 Creation• newvar m = new Menu();m.addChild(new Menu.Item());m.on("click",function(){})m.render(); docs.kissyui.com | kissyteam@gmail.com
  28. 28. KISSY 2 8 Creation• srcNode new Menu({ srcNode:div,<div class=ks-menu> listeners:{<div class=ks- click:function(){ menuitem></div> }</div> } }); docs.kissyui.com | kissyteam@gmail.com
  29. 29. KISSY 2 9 Creation new Menu({• xclass children:[{ xclass:menuitem, content:yy }], render:container, listeners:{ click:function(){} }}); docs.kissyui.com | kissyteam@gmail.com
  30. 30. KISSY 3 0 API Design Principle• Hide implementationnew Overlay({// view: new OverlayRender()}); docs.kissyui.com | kissyteam@gmail.com
  31. 31. KISSY 3 1 API Design Principle• Easy to learn • consistency • simple• elCls/el/srcNode/get()/set() docs.kissyui.com | kissyteam@gmail.com
  32. 32. KISSY 3 2 API Design Principle• Easy to read and writenew Overlay({ width:, height:, children:[{ xclass:menu}]}); docs.kissyui.com | kissyteam@gmail.com
  33. 33. KISSY 3 3 API Design Principle• Easy to extendvar MyOverlay = Overlay.extend(…); docs.kissyui.com | kissyteam@gmail.com
  34. 34. KISSY 3 4 API Design Principle• make api complete• separate concern• new/addChild/removeChild/destroy/on/detach docs.kissyui.com | kissyteam@gmail.com
  35. 35. KISSYTHANKS FOR COMING SEE YOU SOON!

×