Transcript
Page 1: Introduction to kissy for adc 2013

Introduction to KISSY

承玉

[email protected]

Page 2: Introduction to kissy for adc 2013

KISSY

• 概况

• 为什么选择 KISSY

• 架构

• 功能

• 测试

• gallery 社区

Page 3: Introduction to kissy for adc 2013

概况

• 诞生 3 年多

• github

– https://github.com/kissyteam/kissy

• 应用于

– Taobao/tmall/etao/alibaba/ …

Page 4: Introduction to kissy for adc 2013

Why KISSY

• 中文文档

• 国内社区

• 成熟的解决方案

• 站在巨人肩膀

• 应用场景广泛

Page 5: Introduction to kissy for adc 2013

架构

Page 6: Introduction to kissy for adc 2013

• 功能

Page 7: Introduction to kissy for adc 2013

模块化

• 包

• add/require 模块

• use 模块 ,combo

• 工具

Page 8: Introduction to kissy for adc 2013

模块化

• 包

Page 9: Introduction to kissy for adc 2013

模块化

• add/require 模块

Page 10: Introduction to kissy for adc 2013

模块化

• Use

• Network – http://a.tbcdn.cn/s/kissy/??dom/base,json/native.js

– http://localhost/myapp/??a.js,main.js

Page 11: Introduction to kissy for adc 2013

模块化

• 工具

– ant/nodejs

– KISSY Module Compiler( java, nodejs )

– KISSY PIE

Page 12: Introduction to kissy for adc 2013

组件

• Extend/extension/plugin

• Template

–模版+数据

• Decorate

–已有 Html

Page 13: Introduction to kissy for adc 2013

组件

• overlay

Page 14: Introduction to kissy for adc 2013

组件

• 后台组件集 bui

– http://www.builive.com/start/index.php

Page 15: Introduction to kissy for adc 2013

设备普适性

• 适用多种设备 – t ouch/mobile/screen reader/pc/nodejs

• 部分模块按照设备能力条件加载 – selector/json/dom

• 部分专用的设备模块 – Gesture

– KISSY mobile app toolkit

Page 16: Introduction to kissy for adc 2013

测试

• jasmine

• nodejs

• phantomjs

• Travis-ci

Page 17: Introduction to kissy for adc 2013

社区组件

• gallery.kissyui.com

Page 18: Introduction to kissy for adc 2013

社区组件

Page 19: Introduction to kissy for adc 2013

未来发展

• 国内成熟稳定的前端解决方案

–更小的初始代码引入

–更细粒度的模块划分

–更高效的多终端适配

–更一致的通用组件集

–更开放的社区

Page 20: Introduction to kissy for adc 2013

Thank you

• 期待你的参与


Top Related