kissy at alibaba

Transcript

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. 与其临渊羡鱼，不如退而结网