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
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
OPENLOGI Company Profile for engineer
hr01
1
34k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
120
プライベートクラウドでの効率的な証明書配布戦略 / Efficient Certificate Distribution Strategy in Private Cloud
lycorptech_jp
PRO
0
110
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
440
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Done Done
chrislema
184
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Balancing Empowerment & Direction
lara
1
420
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Optimizing for Happiness
mojombo
379
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Rails Girls Zürich Keynote
gr2m
94
14k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Into the Great Unknown - MozCon
thekraken
39
1.9k
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 • 先进思想 • 稳定平台
与其临渊羡鱼,不如退而结网