Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
kissy at alibaba
Search
yiminghe
March 20, 2014
Technology
0
3.3k
kissy at alibaba
a share for college students
yiminghe
March 20, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
Other Decks in Technology
See All in Technology
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
240
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
AWS認定を取る中で感じたこと
siromi
1
150
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
11k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
11k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.2k
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
400
Lazy application authentication with Tailscale
bluehatbrit
0
140
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
870
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
280
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
550
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Designing for humans not robots
tammielis
253
25k
Building Applications with DynamoDB
mza
95
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Ace a Technical Interview
jacobian
277
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making Projects Easy
brettharned
116
6.3k
A designer walks into a library…
pauljervisheath
207
24k
KATA
mclloyd
30
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Transcript
KISSY @ Alibaba
[email protected]
承玉
About me • F2E @ Taobao: 承玉 • Code @
github: http://github.com/yiminghe • Blog @ http://yiminghe.me • Mail:
[email protected]
• 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 • 先进思想 • 稳定平台
与其临渊羡鱼,不如退而结网