Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
kissy at alibaba
yiminghe
March 20, 2014
Technology
0
3.1k
kissy at alibaba
a share for college students
yiminghe
March 20, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
yiminghe
0
11
yiminghe
0
21
yiminghe
1
97
yiminghe
1
110
yiminghe
2
83
yiminghe
4
1.6k
yiminghe
1
120
yiminghe
3
110
yiminghe
43
3.7k
Other Decks in Technology
See All in Technology
clustervr
0
190
torisoup
0
270
iqbocchi
0
520
caori_t
0
150
kyonmm
1
2k
hecateball
1
12k
kurochan
0
560
ama_ch
0
3.4k
saoritakita
0
340
hsano
0
120
satotakeshi
2
420
satoshirobatofujimoto
0
110
Featured
See All Featured
morganepeng
17
1.1k
tanoku
86
8.5k
edds
56
9.3k
afnizarnur
176
14k
lauravandoore
437
28k
holman
288
130k
revolveconf
200
9.6k
sferik
609
54k
akmur
252
19k
jacobian
255
20k
zenorocha
297
39k
myddelton
109
11k
Transcript
KISSY @ Alibaba yiminghe@gmail.com 承玉
About me • F2E @ Taobao: 承玉 • Code @
github: http://github.com/yiminghe • Blog @ http://yiminghe.me • Mail: yiminghe@gmail.com • 2010 年毕业后加入 淘宝 • KISSY 核心开发者 @ http://kissyui.com
• A Powerful Javascript Framework From Alibaba 自主开发 跨终端 使用简单
(KISS) 模块化 接口一致 组件齐全 高扩展性
KISSY @ Alibaba • 淘宝,天猫,一淘 • PC, Mobile, Pad •
Webpage, Webapp • Browser, Nodejs
为什么需要 kissy • 时代背景 2010 YUI2 YUI3.0.0
TaoBao 2010
前端开发 • 庞大的单一文件公用库: YUI2 + widgets • Suggest/switchable/tabs/editor • 单人单文件开发
• YAHOO.namespace • 手工压缩 • YUI Compressor
手工作坊
我们想要的
定制性,可控性
• 模块化 • 跨终端 • 一致性/扩展性 • 生态圈 • 工具支持
• 开源 • 未来
KISSY Overview • 分层架构
Module System • 解决多人协作 • API • KISSY.add • KISSY.use
• KISSY.config
KISSY.add • 定义模块
KISSY.use • 入口使用/动态加载
KISSY.config KISSY.use(‘biz/run’) -> http://cdn.com/biz/run.js http://cdn.com/biz/transform.js http://kissy/dom.js
Packages In Alibaba • 通用包 • gallery: KISSY Gallery 社区通用组件库
• tbc: taobao 组件库 • mui: 天猫组件库 • … • 业务包 • cart: 购物车 • buy: 订单确认 • fp: 首页 • …
跨终端 • PC • IE • Screen reader (UI Components)
• Chrome/safari/opera/firefox • Touch • Mobile • Pad • nodejs
browsers • ie • Mouse • Touch
Conditional loading • KISSY.use(‘dom’) • Ie => base.js + hack.js
• Others => base.js • KISSY.use(‘event’) • Mouse => base.js • Touch => base.js + gesture.js • anim, json, css3 selector ……
• npm install kissy • xtemplate on nodejs • 模板的前后端共享
• xtemplate for expressjs • var XTemplate = require(‘kissy/lib/xtemplate’) • CLI tools • Kissy-xtemplate • …
一致性/扩展性 • Module System • OOP • UI Component System
OOP
定义类
使用类
UI Component
定义组件
使用组件
Core UI Components button combobox date/picker editor menu filter-menu menubutton
overlay scroll-view split-button tabs toolbar tree
生态圈建设 • http://gallery.kissyui.com
工具支持 • 模块合并 • KISSY Module Compiler • 项目开发规范工具 •
KISSY Cake/XCake • gallery 组件提交工具 • KISSY Package Manger (KPM)
开源 • 开源 github npm bower • 代码规范 jshint jscs
• 测试框架 jasmine • 覆盖率工具 jscover • 持续集成平台 travis/phantomjs • 开发服务器 expressjs
Future • 先进思想 • 稳定平台
与其临渊羡鱼,不如退而结网