的昨天、今天与明天                   承玉    yiminghe@gmail.com                     1
定位、目标  立足淘宝业务,服务电子商务行业,做一个功能全面、灵活定制、社区活跃的前端框架.            - kissyteam
大纲• KISSY 的昨天• KISSY 今天与明天 –   seed –   core –   component –   gallery –   sub project
KISSY• 2009.07 – 2009.12 构思期• 2010.01 – 2010.07 孕育期• 2010.07 – 2011.01 快速成长期• 2011.01 – now     稳固发展期
• KISSY 的昨天
2009 构思
2009• KISSY Editor 1.0  – 依赖 YUI2 Core  – KISSY 雏形    •   mix    •   add    •   app    •   ready
2010上 孕育• KISSY 1.0.0 – 1.0.8
2010上• KISSY 1.0.0 – 1.0.8  – getScript/cookie/dom/event/json/node  – css/common/grid/reset.css  – datalazyload/suggest/sw...
• suggest
• switchable  – tab/carousel/slide
2010 下 快速成长期全职的 kissyteam + 志愿者  KISSY 1.1.0 – 1.1.7
2010 下• 核心基本可用 – simple loader => seajs – ajax/anim/dom/event/node/ua/base/cookie – cssreset/grid/common.css• 组件兼容 – switc...
2010 下• 更多的组件
2010 下• Calendar  – 日期选择  – 范围限定  – 事件触发
• Ajbridge:javascript 和 flash 的桥梁    – storage    – uploader    – communication
• Imagezoom:图片放大镜 – 多种放大形式自由选择
• Overlay:浮层控制 – align – width/height – drag
New KISSY Editor• 底层稳定• 插件丰富
• Draggable 节点可拖放• Template 模板系统 – logic – 控制结构自定义
• KISSY 今天 v1.2 的变化
概况sub project   • kissy-nodejs/kissy-tools…  gallery     • grid/chart/kscroll…component     • editor/overlay/switchable…  ...
seed
seed
• 语言增强&前提准备 – mix/merge/clone/extend… – each/map/reduce/bind… – escapeHTML/param/substitute… – ready/globalEval… – config()
• module mechanism                     package           module          compiler                               AMD
AMD
KISSY.add          module registrationKISSY.add(function(S,DOM){        // TODO!},{        requires:[“dom”]});
KISSY.use                 Use modulesKISSY.use(“overlay,switchable”,function(S,Overlay,Switchable){         // TODO!});
package
KISSY.config            Package configKISSY.config({        packages:[{               name:”yourpackage”               pat...
module compiler
module compiler   Combine modules<java classname="com.taobao.f2e.Main">     <arg value="-requires"/>     <!-- 入口模块 -->    ...
core
core
DOM
– query(selector,context):context 限制同selector– clone:克隆自身以及事件– inner/outer|Width/Height
Event
Unified registration• 原生节点 – S.one(domNode).on(“click”,fn,context)• 自定义事件 – obj.on(“customEvent”,fn,context)
fire• Native event  – S.one(domNode).fire(“click”)• Custom event  – obj.fire(“customEvent”)
bubbling• Native event    ul id=„test‟           li                        S.all(“#test li”).on(“click”,fn)           li  ...
delegation• Native event    ul id=„test‟        S.one(“#test”).delegate(“click”,”li”,fn)           li           li        ...
Custom event• registration        obj1                      obj[1..3].on(“customEvent”,fn)        obj2        obj3
Custom eventBubble and delegation host                   host.on(“customEvent”,fn)        obj1                        e.ta...
DOM事件补全•   submit/change @ie bubble•   focusin/out @non-ie•   mouseenter/leave @non-ie•   hashchange @ie•   mousewheel @fi...
ajax
ajax
IO
io
XMLHttpRequestKISSY.io({        url : ‟getJson.htm‟,        cache : false,        type : ‟get‟,// „post‟        data : { x...
JSONPKISSY.io({        url : ‟getJsonp.htm‟,        type : ‟get‟,// „post‟        cache : false,        data : { x: 1},   ...
file uploadKISSY.io({        url : ‟upload.htm‟,        type : „post‟,              <form id=„formEl‟ method=„post‟       ...
form serializationKISSY.io({        url : ‟getJson.htm‟,        type : „post‟,                <form id=„formEl‟ >        d...
xdr• Cross domain request  – Sub domain    { xdr : { subDomain :         { proxy : ”/proxy.html” } // 默认:/sub_domain_proxy...
cancellable  xhr.abort();
anim
• memory efficient  – 1.1.6  – 1.2
• Less cpu
more• support scrollTop/Left
more• support scrollTop/Left• Support queue  – Stop single animation  – Stop single queue  – Stop all queues
nodeEasy to use
DOMEvent        Anim    Node
• Easy chained query             S.all(“.cls”).all(“a”)              .css(“color”,”red”)                    .end()        ...
Easy node creationS.all(“<div class=„easy‟>kissy</div>”).appendTo(document.body);
Easy dom operationnode.appendTo(another);node.css(„color‟,‟red‟);node.attr(“checked”)
Easy event registrationnode.on(„click‟,fn);node.delegate(„click‟,‟a‟,fn);node.detach(„click‟)node.fire(„click‟)
Easy animationnode.animate({left:”100px”,top:”100px”});node.stop();node.stop(true);node.isRunning();node.stop(true,true,qu...
base• Solid foundation
Support validatorMyClass.ATTRS={        myAttr:{                 validator:function(v){                          return v>...
Support bulk setmyClass.set({     attr1 : v1,     attr2 : v2,     attr3 : v3});
Support sub attributemyClass.set(“attr”, { child1:1 });myClass.set( “attr.child2” , ”2”);myClass.get(“attr”) // => { child...
兼容• ua• json• Cookie
Component
component
dd
dd• Droppable   – 可放置区域• DraggableDelegate   – 拖委托• DroppableDelegate   – 放委托• Proxy   – 拖代理• Scroll   – 容器自适应滚动
switchable• aria• keyboard
resizablenew Resizable({       node : ”#container”,       handlers: [“b”,”tl”], // 可拖动位置       // 最大最小宽高       minHeight :...
validation• 配置简单• 丰富的验证规则• 多重验证,依赖验证• 自定义验证规则• 多种信息提示方式
waterfall与时俱进的新布局new Waterfall.Loader({      // 容器      container:"#ColumnContainer",      // 加载方式      load: function(suc...
mvc• Scaffold for KISSY app.  – Model / Collection     • Base  – View  – Router  – Sync
editor is module too!KISSY.use(“editor”,function(S , Editor){      new Editor(…).use(…);});
Consistent interface
Consistent interface• Consistent interface across most components   – set() / get()   – new / render() / show() / hide() /...
Consistent interface• Consistent interface across most components   – set() / get()   – new / render() / show() / hide() /...
overlay• closeAction  – hide / destroy  new Overlay.Dialog({    closeAction : “hide”  });
overlay• aria  – 焦点捕获• resize  – 配合 resizable• effect  – none/ fade/ slide
Simulated controls• Button  – attributes     • disabled     • content     • Value  – events     • click
Simulated controls• Menu  – events     • click• MenuItem  – Attributes     •   selectable     •   checkable     •   value ...
• MenuButton  – Attributes     • Menu     • menuCfg  – Events     • Click  – Method     • addItem     • removeItem
• Tree   – Events       • click• TreeNode   – Attributes      • content      • selected      • expanded   – Methods      •...
gallery
gallery
usageKISSY.config({ packages : [{        name : ‟gallery‟,        path : ‟http://a.tbcdn.cn/s/kissy/‟}] });KISSY.use(“gall...
• grid  – gallery/grid/1.0/  – 董晓庆 (lp.taobao.com)
• chart  – gallery/chart/1.0  – 文龙
• uploader  – gallery/form/1.0  – 剑平 & …
• Starrating  – gallery/starrating/1.0  – 盛艳(乔花)
• kscroll  – gallery/kscroll/1.0  – 常胤
• huabao  – Gallery/huabao/1.0/  – 法海
• Countdown  – gallery/countdown/1.0  – 基德
• Reflection  – gallery/reflection/1.0  – 元泉
• image-tagging  – gallery/image-tagging/1.0  – 乔福
• more  – Selectable  – Spotlight  – Pagination  – Magnifier  – …..• 25
Look forward to your participation
Sub project
Sub project•   Kissy-tools : 工具集合•   Kissy-util : 代码片段•   Kissy-dpl : 设计模式规范库•   Kissy-ajbridge : as-js 桥梁•   Kissy-nodejs...
Kissy-nodejs• nodejs-kissy  – ui-less unit test
• nodejs-kissy  – ui-less unit test• npm install KISSY  – KISSY = require(“KISSY”);  – KISSY.config()  – KISSY.add  – KISS...
KISSY 的明天
• Loader   – Auto combo   – Load on demand• S.use("overlay,calendar,switchable,  suggest,gallery/kscroll/1.0/");
• Loader   – Auto combo v1.3   – Load on demand v1.3• S.use("overlay,calendar,switchable,  suggest,gallery/kscroll/1.0/");
• Core  – Stable
• Core  – Stable  – Bug-free    • Github issue
• Core  – Stable  – Bug-free  – api-friendly     • more sugar ?     • Promise api v1.3
• Core  – Stable  – Bug-free  – api-friendly  – Evolve     • namespace in event v1.3     • pause/resume in anim v1.3     •...
• Component  – Consistent interface    • Suggest => Autocomplete v1.3    • Switchable -> Tab v1.3    •…
• Component  – Consistent interface  – Full-featured components    • Switchable – enhancement v1.3    •…
• Component  – Consistent interface  – Full-featured components  – performance    • ie
• Component  – Consistent interface  – Full-featured components  – performance  – Scalability    • Easy to customize
• Component  – Consistent interface  – Full-featured components  – performance  – Scalability  – Test case covered    • mo...
• Editor  – Open – API  – Load on demand v1.3  – Core functionality covered by test case  – Plugin gallery
• KISSY - Gallery  – Open  – Promotion  – Easy to use
• KISSY Sub Project  – KISSY Mobile ?  – Game Engine ?  – Parser ?  – Welcome !
• Contact kissyteam  – Docs:     http://docs.kissyui.com  – Bug:     http://github.com/kissyteam/kissy/issues  – email:   ...
kissy-past-now-future
kissy-past-now-future
Upcoming SlideShare
Loading in …5
×

kissy-past-now-future

1,664 views
1,575 views

Published on

Published in: Automotive, Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,664
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
26
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

kissy-past-now-future

  1. 1. 的昨天、今天与明天 承玉 yiminghe@gmail.com 1
  2. 2. 定位、目标 立足淘宝业务,服务电子商务行业,做一个功能全面、灵活定制、社区活跃的前端框架. - kissyteam
  3. 3. 大纲• KISSY 的昨天• KISSY 今天与明天 – seed – core – component – gallery – sub project
  4. 4. KISSY• 2009.07 – 2009.12 构思期• 2010.01 – 2010.07 孕育期• 2010.07 – 2011.01 快速成长期• 2011.01 – now 稳固发展期
  5. 5. • KISSY 的昨天
  6. 6. 2009 构思
  7. 7. 2009• KISSY Editor 1.0 – 依赖 YUI2 Core – KISSY 雏形 • mix • add • app • ready
  8. 8. 2010上 孕育• KISSY 1.0.0 – 1.0.8
  9. 9. 2010上• KISSY 1.0.0 – 1.0.8 – getScript/cookie/dom/event/json/node – css/common/grid/reset.css – datalazyload/suggest/switchable/editor/ swf(flash)
  10. 10. • suggest
  11. 11. • switchable – tab/carousel/slide
  12. 12. 2010 下 快速成长期全职的 kissyteam + 志愿者 KISSY 1.1.0 – 1.1.7
  13. 13. 2010 下• 核心基本可用 – simple loader => seajs – ajax/anim/dom/event/node/ua/base/cookie – cssreset/grid/common.css• 组件兼容 – switchable/suggest/datalazyload/flash
  14. 14. 2010 下• 更多的组件
  15. 15. 2010 下• Calendar – 日期选择 – 范围限定 – 事件触发
  16. 16. • Ajbridge:javascript 和 flash 的桥梁 – storage – uploader – communication
  17. 17. • Imagezoom:图片放大镜 – 多种放大形式自由选择
  18. 18. • Overlay:浮层控制 – align – width/height – drag
  19. 19. New KISSY Editor• 底层稳定• 插件丰富
  20. 20. • Draggable 节点可拖放• Template 模板系统 – logic – 控制结构自定义
  21. 21. • KISSY 今天 v1.2 的变化
  22. 22. 概况sub project • kissy-nodejs/kissy-tools… gallery • grid/chart/kscroll…component • editor/overlay/switchable… core • dom/event/base… seed • lang/loader
  23. 23. seed
  24. 24. seed
  25. 25. • 语言增强&前提准备 – mix/merge/clone/extend… – each/map/reduce/bind… – escapeHTML/param/substitute… – ready/globalEval… – config()
  26. 26. • module mechanism package module compiler AMD
  27. 27. AMD
  28. 28. KISSY.add module registrationKISSY.add(function(S,DOM){ // TODO!},{ requires:[“dom”]});
  29. 29. KISSY.use Use modulesKISSY.use(“overlay,switchable”,function(S,Overlay,Switchable){ // TODO!});
  30. 30. package
  31. 31. KISSY.config Package configKISSY.config({ packages:[{ name:”yourpackage” path:”yourpath” }]});
  32. 32. module compiler
  33. 33. module compiler Combine modules<java classname="com.taobao.f2e.Main"> <arg value="-requires"/> <!-- 入口模块 --> <arg value="youpackage/xx"/> <arg value="-baseUrls"/> <arg value="${assets.dir}"/> <arg value="-encodings"/> <arg value="${charset}"/> <arg value="-outputEncoding"/> <arg value="${charset}"/> <arg value="-output"/> <arg value="xx.combo.js"/> <classpath> <pathelement path="${module.compiler}"/> <pathelement path="${java.class.path}"/> </classpath></java>
  34. 34. core
  35. 35. core
  36. 36. DOM
  37. 37. – query(selector,context):context 限制同selector– clone:克隆自身以及事件– inner/outer|Width/Height
  38. 38. Event
  39. 39. Unified registration• 原生节点 – S.one(domNode).on(“click”,fn,context)• 自定义事件 – obj.on(“customEvent”,fn,context)
  40. 40. fire• Native event – S.one(domNode).fire(“click”)• Custom event – obj.fire(“customEvent”)
  41. 41. bubbling• Native event ul id=„test‟ li S.all(“#test li”).on(“click”,fn) li li
  42. 42. delegation• Native event ul id=„test‟ S.one(“#test”).delegate(“click”,”li”,fn) li li li
  43. 43. Custom event• registration obj1 obj[1..3].on(“customEvent”,fn) obj2 obj3
  44. 44. Custom eventBubble and delegation host host.on(“customEvent”,fn) obj1 e.target instanceof Obj obj2 obj3 obj.addTarget(host); Obj.publish(“customEvent”,{ bubbles:true });
  45. 45. DOM事件补全• submit/change @ie bubble• focusin/out @non-ie• mouseenter/leave @non-ie• hashchange @ie• mousewheel @firefox• valuechange @all
  46. 46. ajax
  47. 47. ajax
  48. 48. IO
  49. 49. io
  50. 50. XMLHttpRequestKISSY.io({ url : ‟getJson.htm‟, cache : false, type : ‟get‟,// „post‟ data : { x: 1}, dataType : ‟json‟, // „text‟? success : function(d){ }, error : function(_,reason){ }, complete : function(){ }});
  51. 51. JSONPKISSY.io({ url : ‟getJsonp.htm‟, type : ‟get‟,// „post‟ cache : false, data : { x: 1}, dataType : ‟jsonp‟, success : function(d){ }, error : function(_,reason){ }, complete : function(){ }});
  52. 52. file uploadKISSY.io({ url : ‟upload.htm‟, type : „post‟, <form id=„formEl‟ method=„post‟ data : {x: 1}, enctype=„multipart/form-data‟ > dataType : ‟json‟, <input name=„f‟ type=„file‟ /> form: „#formEl‟, </form> success : function(d){ }, error : function(_,reason){ }, complete : function(){ }});
  53. 53. form serializationKISSY.io({ url : ‟getJson.htm‟, type : „post‟, <form id=„formEl‟ > data : {x: 1}, <input name=„f‟ value=„s‟ /> dataType : ‟json‟, </form> form: „#formEl‟, success : function(d){ }, error : function(_,reason){ }, complete : function(){ }});
  54. 54. xdr• Cross domain request – Sub domain { xdr : { subDomain : { proxy : ”/proxy.html” } // 默认:/sub_domain_proxy.html }} – Different domain • transparent in client • server apply to CORS
  55. 55. cancellable xhr.abort();
  56. 56. anim
  57. 57. • memory efficient – 1.1.6 – 1.2
  58. 58. • Less cpu
  59. 59. more• support scrollTop/Left
  60. 60. more• support scrollTop/Left• Support queue – Stop single animation – Stop single queue – Stop all queues
  61. 61. nodeEasy to use
  62. 62. DOMEvent Anim Node
  63. 63. • Easy chained query S.all(“.cls”).all(“a”) .css(“color”,”red”) .end() .css(“color”,”green”);
  64. 64. Easy node creationS.all(“<div class=„easy‟>kissy</div>”).appendTo(document.body);
  65. 65. Easy dom operationnode.appendTo(another);node.css(„color‟,‟red‟);node.attr(“checked”)
  66. 66. Easy event registrationnode.on(„click‟,fn);node.delegate(„click‟,‟a‟,fn);node.detach(„click‟)node.fire(„click‟)
  67. 67. Easy animationnode.animate({left:”100px”,top:”100px”});node.stop();node.stop(true);node.isRunning();node.stop(true,true,queueName);node.slideToggle();node.fadeToggle();
  68. 68. base• Solid foundation
  69. 69. Support validatorMyClass.ATTRS={ myAttr:{ validator:function(v){ return v>10; } }};myClass.set(“myAttr”,1) // => false
  70. 70. Support bulk setmyClass.set({ attr1 : v1, attr2 : v2, attr3 : v3});
  71. 71. Support sub attributemyClass.set(“attr”, { child1:1 });myClass.set( “attr.child2” , ”2”);myClass.get(“attr”) // => { child1:1,child2:2}
  72. 72. 兼容• ua• json• Cookie
  73. 73. Component
  74. 74. component
  75. 75. dd
  76. 76. dd• Droppable – 可放置区域• DraggableDelegate – 拖委托• DroppableDelegate – 放委托• Proxy – 拖代理• Scroll – 容器自适应滚动
  77. 77. switchable• aria• keyboard
  78. 78. resizablenew Resizable({ node : ”#container”, handlers: [“b”,”tl”], // 可拖动位置 // 最大最小宽高 minHeight : 50, maxHeight : 100, minWidth : 40, maxWidth : 400});
  79. 79. validation• 配置简单• 丰富的验证规则• 多重验证,依赖验证• 自定义验证规则• 多种信息提示方式
  80. 80. waterfall与时俱进的新布局new Waterfall.Loader({ // 容器 container:"#ColumnContainer", // 加载方式 load: function(success, end) { $(#loadingPins).show(); S.ajax({ success: function(d) { // 如果数据错误, 则立即结束 if (d.stat !== ok) { alert(load data error!); // 停止加载 end(); return; } // 拼装每页数据 var items = []; // 继续加载 success (items); }, complete: function() { $(#loadingPins).hide(); } }); }, // 最小列数 minColCount : 2, // 列宽度 colWidth : 228 });
  81. 81. mvc• Scaffold for KISSY app. – Model / Collection • Base – View – Router – Sync
  82. 82. editor is module too!KISSY.use(“editor”,function(S , Editor){ new Editor(…).use(…);});
  83. 83. Consistent interface
  84. 84. Consistent interface• Consistent interface across most components – set() / get() – new / render() / show() / hide() / destroy() – addChild()/removeChild() – width/height/prefixCls/render
  85. 85. Consistent interface• Consistent interface across most components – set() / get() – new / render() / show() / hide() / destroy() – addChild()/removeChild() – width/height/prefixCls/render• Overlay / Menu / MenuButton / Button / Tree
  86. 86. overlay• closeAction – hide / destroy new Overlay.Dialog({ closeAction : “hide” });
  87. 87. overlay• aria – 焦点捕获• resize – 配合 resizable• effect – none/ fade/ slide
  88. 88. Simulated controls• Button – attributes • disabled • content • Value – events • click
  89. 89. Simulated controls• Menu – events • click• MenuItem – Attributes • selectable • checkable • value • content
  90. 90. • MenuButton – Attributes • Menu • menuCfg – Events • Click – Method • addItem • removeItem
  91. 91. • Tree – Events • click• TreeNode – Attributes • content • selected • expanded – Methods • select() • collapse()
  92. 92. gallery
  93. 93. gallery
  94. 94. usageKISSY.config({ packages : [{ name : ‟gallery‟, path : ‟http://a.tbcdn.cn/s/kissy/‟}] });KISSY.use(“gallery/name/version/”)
  95. 95. • grid – gallery/grid/1.0/ – 董晓庆 (lp.taobao.com)
  96. 96. • chart – gallery/chart/1.0 – 文龙
  97. 97. • uploader – gallery/form/1.0 – 剑平 & …
  98. 98. • Starrating – gallery/starrating/1.0 – 盛艳(乔花)
  99. 99. • kscroll – gallery/kscroll/1.0 – 常胤
  100. 100. • huabao – Gallery/huabao/1.0/ – 法海
  101. 101. • Countdown – gallery/countdown/1.0 – 基德
  102. 102. • Reflection – gallery/reflection/1.0 – 元泉
  103. 103. • image-tagging – gallery/image-tagging/1.0 – 乔福
  104. 104. • more – Selectable – Spotlight – Pagination – Magnifier – …..• 25
  105. 105. Look forward to your participation
  106. 106. Sub project
  107. 107. Sub project• Kissy-tools : 工具集合• Kissy-util : 代码片段• Kissy-dpl : 设计模式规范库• Kissy-ajbridge : as-js 桥梁• Kissy-nodejs : kissy on nodejs
  108. 108. Kissy-nodejs• nodejs-kissy – ui-less unit test
  109. 109. • nodejs-kissy – ui-less unit test• npm install KISSY – KISSY = require(“KISSY”); – KISSY.config() – KISSY.add – KISSY.use
  110. 110. KISSY 的明天
  111. 111. • Loader – Auto combo – Load on demand• S.use("overlay,calendar,switchable, suggest,gallery/kscroll/1.0/");
  112. 112. • Loader – Auto combo v1.3 – Load on demand v1.3• S.use("overlay,calendar,switchable, suggest,gallery/kscroll/1.0/");
  113. 113. • Core – Stable
  114. 114. • Core – Stable – Bug-free • Github issue
  115. 115. • Core – Stable – Bug-free – api-friendly • more sugar ? • Promise api v1.3
  116. 116. • Core – Stable – Bug-free – api-friendly – Evolve • namespace in event v1.3 • pause/resume in anim v1.3 • wrap in DOM v1.3
  117. 117. • Component – Consistent interface • Suggest => Autocomplete v1.3 • Switchable -> Tab v1.3 •…
  118. 118. • Component – Consistent interface – Full-featured components • Switchable – enhancement v1.3 •…
  119. 119. • Component – Consistent interface – Full-featured components – performance • ie
  120. 120. • Component – Consistent interface – Full-featured components – performance – Scalability • Easy to customize
  121. 121. • Component – Consistent interface – Full-featured components – performance – Scalability – Test case covered • more tc
  122. 122. • Editor – Open – API – Load on demand v1.3 – Core functionality covered by test case – Plugin gallery
  123. 123. • KISSY - Gallery – Open – Promotion – Easy to use
  124. 124. • KISSY Sub Project – KISSY Mobile ? – Game Engine ? – Parser ? – Welcome !
  125. 125. • Contact kissyteam – Docs: http://docs.kissyui.com – Bug: http://github.com/kissyteam/kissy/issues – email: kissyteam@gmail.com – Twitter: http://twitter.com/#!/kissyteam – Google Group: http://groups.google.com/group/kissy-ui

×