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
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
Other Decks in Technology
See All in Technology
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
AWS reInvent 2024 関西組 事前勉強会
shinyayamada
0
100
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
110
バクラクにおける可観測性向上の取り組み
yuu26
3
430
Gradle: The Build System That Loves To Hate You
aurimas
2
150
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
Amazon CloudWatch Network Monitor 導入ガイド_デモ説明付き
yukimmmm
0
110
フルカイテン株式会社 採用資料
fullkaiten
0
36k
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
7.1k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Rails Girls Zürich Keynote
gr2m
93
13k
Navigating Team Friction
lara
183
14k
Git: the NoSQL Database
bkeepers
PRO
426
64k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Docker and Python
trallard
40
3.1k
Producing Creativity
orderedlist
PRO
341
39k
Done Done
chrislema
181
16k
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 • 先进思想 • 稳定平台
与其临渊羡鱼,不如退而结网