kissy at alibaba
Post on 12-Sep-2014
213 views
DESCRIPTION
a share for college studentsTRANSCRIPT
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.jshttp://cdn.com/biz/transform.jshttp://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-menumenubutton
overlay
scroll-view split-button
tabs
toolbar
tree
工具支持
• 模块合并• KISSY Module Compiler
• 项目开发规范工具• KISSY Cake/XCake
• gallery 组件提交工具• KISSY Package Manger (KPM)
开源
• 开源 github npm bower
• 代码规范 jshint jscs
• 测试框架 jasmine
• 覆盖率工具 jscover
• 持续集成平台 travis/phantomjs
• 开发服务器 expressjs
Future
• 先进思想
• 稳定平台
与其临渊羡鱼，不如退而结网