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
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
550
AI導入の理想と現実~コストと浸透〜
oprstchn
0
180
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
120
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
11k
How Community Opened Global Doors
hiroramos4
PRO
1
140
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
300
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
950
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
390
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
1
210
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
170
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Done Done
chrislema
184
16k
Gamification - CAS2011
davidbonilla
81
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
It's Worth the Effort
3n
185
28k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
4 Signs Your Business is Dying
shpigford
184
22k
Navigating Team Friction
lara
187
15k
How GitHub (no longer) Works
holman
314
140k
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 • 先进思想 • 稳定平台
与其临渊羡鱼,不如退而结网