Introduction to kissy for adc 2013
-
date post
12-Sep-2014 -
Category
Technology
-
view
549 -
download
0
description
Transcript of Introduction to kissy for adc 2013
![Page 2: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/2.jpg)
KISSY
• 概况
• 为什么选择 KISSY
• 架构
• 功能
• 测试
• gallery 社区
![Page 3: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/3.jpg)
概况
• 诞生 3 年多
• github
– https://github.com/kissyteam/kissy
• 应用于
– Taobao/tmall/etao/alibaba/ …
![Page 4: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/4.jpg)
Why KISSY
• 中文文档
• 国内社区
• 成熟的解决方案
• 站在巨人肩膀
• 应用场景广泛
![Page 5: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/5.jpg)
架构
![Page 6: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/6.jpg)
• 功能
![Page 7: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/7.jpg)
模块化
• 包
• add/require 模块
• use 模块 ,combo
• 工具
![Page 8: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/8.jpg)
模块化
• 包
![Page 9: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/9.jpg)
模块化
• add/require 模块
![Page 10: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/10.jpg)
模块化
• 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](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/11.jpg)
模块化
• 工具
– ant/nodejs
– KISSY Module Compiler( java, nodejs )
– KISSY PIE
![Page 12: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/12.jpg)
组件
• Extend/extension/plugin
• Template
–模版+数据
• Decorate
–已有 Html
![Page 13: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/13.jpg)
组件
• overlay
![Page 15: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/15.jpg)
设备普适性
• 适用多种设备 – t ouch/mobile/screen reader/pc/nodejs
• 部分模块按照设备能力条件加载 – selector/json/dom
• 部分专用的设备模块 – Gesture
– KISSY mobile app toolkit
![Page 16: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/16.jpg)
测试
• jasmine
• nodejs
• phantomjs
• Travis-ci
![Page 17: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/17.jpg)
社区组件
• gallery.kissyui.com
![Page 18: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/18.jpg)
社区组件
![Page 19: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/19.jpg)
未来发展
• 国内成熟稳定的前端解决方案
–更小的初始代码引入
–更细粒度的模块划分
–更高效的多终端适配
–更一致的通用组件集
–更开放的社区
![Page 20: Introduction to kissy for adc 2013](https://reader034.fdocuments.net/reader034/viewer/2022052215/541306308d7f720c4e8b4769/html5/thumbnails/20.jpg)
Thank you
• 期待你的参与