kissy at alibaba - Speaker Deck

kissy at alibaba

by yiminghe

Slide 1

Slide 1 text

KISSY @ Alibaba [email protected] 承玉

Slide 2

Slide 2 text

About me • F2E @ Taobao: 承玉 • Code @ github: http://github.com/yiminghe • Blog @ http://yiminghe.me • Mail: [email protected] • 2010 年毕业后加入淘宝 • KISSY 核心开发者 @ http://kissyui.com

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

TaoBao 2010

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

手工作坊

Slide 9

Slide 9 text

我们想要的

Slide 10

Slide 10 text

定制性，可控性

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

KISSY Overview • 分层架构

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

KISSY.add • 定义模块

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

browsers • ie • Mouse • Touch

Slide 20

Slide 20 text

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 ……

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

OOP

Slide 24

Slide 24 text

定义类

Slide 25

Slide 25 text

使用类

Slide 26

Slide 26 text

UI Component

Slide 27

Slide 27 text

定义组件

Slide 28

Slide 28 text

使用组件

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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