a share for college students

1. KISSY @ Alibaba
yiminghe@gmail.com
承玉

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. • A Powerful Javascript Framework From Alibaba
自主开发
跨终端 使用简单 (KISS)
模块化
接口一致
组件齐全高扩展性

4. KISSY @ Alibaba
• 淘宝，天猫，一淘
• PC, Mobile, Pad
• Webpage, Webapp
• Browser, Nodejs

5. 为什么需要 kissy
• 时代背景 2010
YUI2
YUI3.0.0

6. TaoBao 2010

7. 前端开发
• 庞大的单一文件公用库: YUI2 + widgets
• Suggest/switchable/tabs/editor
• 单人单文件开发
• YAHOO.namespace
• 手工压缩
• YUI Compressor

8. 手工作坊

9. 我们想要的

10. 定制性，可控性

11. • 模块化
• 跨终端
• 一致性/扩展性
• 生态圈
• 工具支持
• 开源
• 未来

12. KISSY Overview
• 分层架构

13. Module System
• 解决多人协作
• API
• KISSY.add
• KISSY.use
• KISSY.config

14. KISSY.add
• 定义模块

15. KISSY.use
• 入口使用/动态加载

16. KISSY.config
KISSY.use(‘biz/run’) -> http://cdn.com/biz/run.js
http://cdn.com/biz/transform.js
http://kissy/dom.js

17. Packages In Alibaba
• 通用包
• gallery: KISSY Gallery 社区通用组件库
• tbc: taobao 组件库
• mui: 天猫组件库
• …
• 业务包
• cart: 购物车
• buy: 订单确认
• fp: 首页
• …

18. 跨终端
• PC
• IE
• Screen reader (UI Components)
• Chrome/safari/opera/firefox
• Touch
• Mobile
• Pad
• nodejs

19. browsers
• ie
• Mouse
• Touch

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. • npm install kissy
• xtemplate on nodejs
• 模板的前后端共享
• xtemplate for expressjs
• var XTemplate = require(‘kissy/lib/xtemplate’)
• CLI tools
• Kissy-xtemplate
• …

22. 一致性/扩展性
• Module System
• OOP
• UI Component System

23. OOP

24. 定义类

25. 使用类

26. UI Component

27. 定义组件

28. 使用组件

29. Core UI Components
button
combobox
date/picker
editor
menu filter-menu
menubutton
overlay
scroll-view split-button
tabs
toolbar
tree

30. 生态圈建设
• http://gallery.kissyui.com

31. 工具支持
• 模块合并
• KISSY Module Compiler
• 项目开发规范工具
• KISSY Cake/XCake
• gallery 组件提交工具
• KISSY Package Manger (KPM)

32. 开源
• 开源 github npm bower
• 代码规范 jshint jscs
• 测试框架 jasmine
• 覆盖率工具 jscover
• 持续集成平台 travis/phantomjs
• 开发服务器 expressjs

33. Future
• 先进思想
• 稳定平台

34. 与其临渊羡鱼，不如退而结网