KISSY @ Alibaba
yiminghe@gmail.com
承玉
About me
• F2E @ Taobao: 承玉
• Code @ github: http://github.com/yiminghe
• Blog @ http://yiminghe.me
• Mail: yiminghe@gmail...
• 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: 订单确...
跨终端
• 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....
• npm install kissy
• xtemplate on nodejs
• 模板的前后端共享
• xtemplate for expressjs
• var XTemplate = require(‘kissy/lib/xtempl...
一致性/扩展性
• 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
to...
生态圈建设
• 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
• 先进思想
• 稳定平台
与其临渊羡鱼,不如退而结网
Upcoming SlideShare
Loading in …5
×

kissy at alibaba

689 views
426 views

Published on

a share for college students

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
689
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

kissy at alibaba

  1. 1. KISSY @ Alibaba yiminghe@gmail.com 承玉
  2. 2. About me • F2E @ Taobao: 承玉 • Code @ github: http://github.com/yiminghe • Blog @ http://yiminghe.me • Mail: yiminghe@gmail.com • 2010 年毕业后加入 淘宝 • KISSY 核心开发者 @ http://kissyui.com
  3. 3. • A Powerful Javascript Framework From Alibaba 自主开发 跨终端 使用简单 (KISS) 模块化 接口一致 组件齐全高扩展性
  4. 4. KISSY @ Alibaba • 淘宝,天猫,一淘 • PC, Mobile, Pad • Webpage, Webapp • Browser, Nodejs
  5. 5. 为什么需要 kissy • 时代背景 2010 YUI2 YUI3.0.0
  6. 6. TaoBao 2010
  7. 7. 前端开发 • 庞大的单一文件公用库: YUI2 + widgets • Suggest/switchable/tabs/editor • 单人单文件开发 • YAHOO.namespace • 手工压缩 • YUI Compressor
  8. 8. 手工作坊
  9. 9. 我们想要的
  10. 10. 定制性,可控性
  11. 11. • 模块化 • 跨终端 • 一致性/扩展性 • 生态圈 • 工具支持 • 开源 • 未来
  12. 12. KISSY Overview • 分层架构
  13. 13. Module System • 解决多人协作 • API • KISSY.add • KISSY.use • KISSY.config
  14. 14. KISSY.add • 定义模块
  15. 15. KISSY.use • 入口使用/动态加载
  16. 16. KISSY.config KISSY.use(‘biz/run’) -> http://cdn.com/biz/run.js http://cdn.com/biz/transform.js http://kissy/dom.js
  17. 17. Packages In Alibaba • 通用包 • gallery: KISSY Gallery 社区通用组件库 • tbc: taobao 组件库 • mui: 天猫组件库 • … • 业务包 • cart: 购物车 • buy: 订单确认 • fp: 首页 • …
  18. 18. 跨终端 • PC • IE • Screen reader (UI Components) • Chrome/safari/opera/firefox • Touch • Mobile • Pad • nodejs
  19. 19. browsers • ie • Mouse • Touch
  20. 20. 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 ……
  21. 21. • npm install kissy • xtemplate on nodejs • 模板的前后端共享 • xtemplate for expressjs • var XTemplate = require(‘kissy/lib/xtemplate’) • CLI tools • Kissy-xtemplate • …
  22. 22. 一致性/扩展性 • Module System • OOP • UI Component System
  23. 23. OOP
  24. 24. 定义类
  25. 25. 使用类
  26. 26. UI Component
  27. 27. 定义组件
  28. 28. 使用组件
  29. 29. Core UI Components button combobox date/picker editor menu filter-menu menubutton overlay scroll-view split-button tabs toolbar tree
  30. 30. 生态圈建设 • http://gallery.kissyui.com
  31. 31. 工具支持 • 模块合并 • KISSY Module Compiler • 项目开发规范工具 • KISSY Cake/XCake • gallery 组件提交工具 • KISSY Package Manger (KPM)
  32. 32. 开源 • 开源 github npm bower • 代码规范 jshint jscs • 测试框架 jasmine • 覆盖率工具 jscover • 持续集成平台 travis/phantomjs • 开发服务器 expressjs
  33. 33. Future • 先进思想 • 稳定平台
  34. 34. 与其临渊羡鱼,不如退而结网

×