Top Banner
KISSY [email protected] 2012-08-30 draft KISSY In Progress
43

Kissy in-progress

Sep 12, 2014

Download

Technology

one company
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Kissy in-progress

KISSY

[email protected]

2012-08-30 draft

KISSY In Progress

Page 2: Kissy in-progress

KISSY

立足阿里集团,服务中国互联网,做一个功能全面、灵活定制、社区活跃的前端框架.

- kissyteam

定位

docs.kissyui.com | [email protected]

2

Page 3: Kissy in-progress

KISSY

使用情况

kissyteam 项目

开发栈

文档

roadmap

介绍

docs.kissyui.com | [email protected]

3

Page 4: Kissy in-progress

KISSY

使用情况

Page 5: Kissy in-progress

KISSY

www.taobao.comwww.tmall.comwww.etao.comwww.diandian.com……..

使用情况

docs.kissyui.com | [email protected]

5

版本

1.1.6 => 遗留的过去

1.2.0 => 成熟的现在

1.3.0 => 推进的下一步

1.4.0 => 活跃的 dev

Page 6: Kissy in-progress

KISSY

kissyteam 项目

docs.kissyui.com | [email protected]

Page 7: Kissy in-progress

KISSY

kissyteam 维护、答疑

google group: 讨论答疑github: 报告问题weibotwitter旺旺email

维护

Page 8: Kissy in-progress

KISSY

项目概况

docs.kissyui.com | [email protected]

8

sub project

gallery

dpl

components

core

seed

• kissy-tools/kissy-pie…

• grid/kscroll/uploader…

• layout/menu/button…

• editor/overlay/switchable…

• dom/event/base…

• lang/loader

Page 9: Kissy in-progress

KISSY

完全模块化

docs.kissyui.com | [email protected]

9

Loader

dom event ajax cookie base

template component

editor / menu / switchable / ….

seed

components

Page 10: Kissy in-progress

KISSY

Langutils 语言增强promise(1.3) promise 规范uri (1.3) uri 操作path(1.3) path 操作

Loader 框架模块化基础AMD-Like Loader YUI3-Like Loader for Auto-combo(1.3)

seed

docs.kissyui.com | [email protected]

10

Page 11: Kissy in-progress

KISSY

Ajax 客户端通信Anim 动画特效Base 属性机制Cookie 便捷操作Dom 操作兼容Event 兼容以及自定义事件json ie 兼容Node jquery-likeUa 浏览器判断

core

docs.kissyui.com | [email protected]

11

Page 12: Kissy in-progress

KISSY

基础UIbutton calendar combobox(1.3) editor menu menubutton overlay suggest tree

特效 UIswitchable imagezoom resizable waterfall

其他datalazyload dd flash mvc sizzle template validation

components

docs.kissyui.com | [email protected]

12

Page 13: Kissy in-progress

KISSY

editor

又一个开源的可视化编辑器

底层以及 UI 基于 KISSY 框架

编辑核心算法借鉴 CKEditor

应用于淘宝商品发布/店铺装修/论坛/….

Page 14: Kissy in-progress

KISSY

editor

docs.kissyui.com | [email protected]

14

KISSY Loader

dom event node ua base

component

Html

Parser

&

xhtml

dtd

range selection

button select menu Edit API

Editor & plugins

overlay

Page 15: Kissy in-progress

KISSY

editor

docs.kissyui.com | [email protected]

15

Page 16: Kissy in-progress

KISSY

快速搭建特定业务 dpl 的基石

dpl

docs.kissyui.com | [email protected]

16

Page 17: Kissy in-progress

KISSY

kscroll 模拟滚动条

kissy-formuploader 文件上传

Countdown倒计时

Local-storage本地存储

gallery

docs.kissyui.com | [email protected]

17

Page 18: Kissy in-progress

KISSY

kissy module compiler模块打包模块依赖抽取(1.3)

KISSY-pie 整合开发工具模块打包时间戳css-combo界面易操作

Kissy-tools

docs.kissyui.com | [email protected]

18

Page 19: Kissy in-progress

KISSY

开发栈

Page 20: Kissy in-progress

KISSY

模块化

mvc

模板化

开发栈

Page 21: Kissy in-progress

KISSY

模块化

Page 22: Kissy in-progress

KISSY

// 定义模块

// e:/package/a.js

KISSY.add(function(){

},{

requires:['./b']

});

// 使用模块

KISSY.use('package/a')

模块化

docs.kissyui.com | [email protected]

22

Page 23: Kissy in-progress

KISSY

开发中自动动态载源码http://x.com/package/a.jshttp://x.com/package/b.js

发布后通过工具将模块 a 的依赖都合并压缩到 a-min.jshttp://x.com/package/a-min.js

通过 url 加 ?ks-debug 在线上开启调试模式,加载源码

工具KISSY Module CompilerKISSY Pie

模块化

docs.kissyui.com | [email protected]

23

Page 24: Kissy in-progress

KISSY

按需加载与链接数的权衡

通过工具抽取模块依赖http://xx.com/package/??a.js,b.js

工具KISSY Module Compiler

动态 combo(1.3)

docs.kissyui.com | [email protected]

24

Page 25: Kissy in-progress

KISSY

代码更新

时间戳 KISSY.config(“tag”,tag)http://xx.com/package/a-min.js?t=tag不新增文件

包路径 KISSY.config(‘packagePath’,path)http://xx.com/path/package/a-min.js新增文件,更安全可靠

模块化

docs.kissyui.com | [email protected]

25

Page 26: Kissy in-progress

KISSY

mvc

Page 27: Kissy in-progress

KISSY

Viewevent delegation

Routerhash/url(html5) based function routehttp://xx.com/#!/action/detail/1?q=2

Modelevent-based data model

mvc

docs.kissyui.com | [email protected]

27

Page 28: Kissy in-progress

KISSY

模板化

Page 29: Kissy in-progress

KISSY

通过工具离线预编译this is {{title}}=>function(data){ return “this is”+data.title;}

模板化(1.4)

Page 30: Kissy in-progress

KISSY

Ant java-XML

KISSY Module CompilerGoogle closure compilerYUI Css Compressor

KISSY-pie nodejs-json

uglifycss compressortbuild

发布整合

docs.kissyui.com | [email protected]

30

Page 31: Kissy in-progress

KISSY

文档

Page 32: Kissy in-progress

KISSY

面向初学者 http://docs.kissyui.com 区分版本

文档

Page 33: Kissy in-progress

KISSY

API

文档

docs.kissyui.com | [email protected]

33

Page 34: Kissy in-progress

KISSY

示例

文档

docs.kissyui.com | [email protected]

34

Page 35: Kissy in-progress

KISSY

教学中心

文档

docs.kissyui.com | [email protected]

35

Page 36: Kissy in-progress

KISSY

面向高级开发人员

文档

docs.kissyui.com | [email protected]

36

Page 37: Kissy in-progress

KISSY

https://github.com/kissyteam/kissy/issues?state=open

roadmap

Page 38: Kissy in-progress

KISSY

轻量化

清晰化

功能单一

seed

Page 39: Kissy in-progress

KISSY

模块细化dom/iedom/baseevent/domevent/custom

扩充能力自定义事件 defaultAction

按浏览器能力加载

core

docs.kissyui.com | [email protected]

39

Page 40: Kissy in-progress

KISSY

完整基础 ui 库

模板化开发template

一致性的组件接口calendartabsstorecolorpickerlayout…

开放,易于扩展

测试用例完善

components

docs.kissyui.com | [email protected]

40

Page 41: Kissy in-progress

KISSY

增加示例

增加教学文档

文档

docs.kissyui.com | [email protected]

41

Page 42: Kissy in-progress

KISSY

Contact kissyteam

– Docs:http://docs.kissyui.com

– Bug:http://github.com/kissyteam/kissy/issues

– email:[email protected]

– Twitter:http://twitter.com/#!/kissyteam

– Google Group: http://groups.google.com/group/kissy-ui

联系我们

Page 43: Kissy in-progress

KISSY

SEE YOU SOON!

THANKS FOR

COMING