progress about kissy 1.5 (kissy5)

1. KISSY 1.5 Progress
承玉
2014-03

2. • kissy
• kissy mini
• kimi
• zepto

5. 结局

6. KISSY 1.5

8. JDK5

9. KISSY5
• Major.Minor.Bugfix
• 2014.03.28

10. Docs again

11. seed
• Loader 独立
• http://dev.kissyui.com/kissy/build/loader-min.js
• loader-min.js
• gzip: 6.6kb
• Seed 精简
• http://dev.kissyui.com/kissy/build/seed-min.js
• 去除 uri/path 依赖
• seed-min.js
• gzip: 13.8kb

12. seed
• 细化模块拆分
• util
• S.extend/S.isArray/S.each
• ua
• UA.ie/UA.webkit/UA.ieMode
• feature
• Feature.isMsPointerSupport/Feature.isQuerySelectorSupported
• path
• path.relative/path.resolve
• uri
• new Uri(‘http://www.g.cn’)

13. Load kissy modules in nodejs
• kissy/lib/xx
• npm install kissy
• require(‘kissy/lib/base’)
• require(‘kissy/lib/xtemplate’)

14. anim
• 条件加载
• Css3 transition supported: anim/transition
• Old browser: anim/timer
• node
• Animate api
• 依赖于 anim，同样减小
• 强制使用定时器动画模块
• use(‘anim/timer’)

15. xtemplate
• 支持 express 下直接使用
• app.set('view engine', 'html');
• app.set('views', path.join(__dirname, 'views'));
• app.engine('html', require(‘kissy/lib/xtemplate').__express);
• 性能大幅提升
• > jade > ejs

16. 语法修改
• 靠拢 js 语法
• 内置
• {{#if x>1&&y<2}}x{{/if}} => {{#if (x>1 && y<2) }}x{{/if}}
• 自定义命令
• {{custom x y}} => {{custom (x, y) }}
• 嵌套调用
• {{custom1 (custom2 (x, y))}}

17. 继承机制
• Layout.html
• Header {{block(‘body’)}}layout{{/block}} footer
• List.html
• {{extend(‘./layout’)}} Header {{block(‘body’)}}list{{/block}} footer
• render(‘list’)
• Header list footer

18. 自定义异步命令
• {{ tms (id) }}
• .render(function (err, content) {
});

19. 其他
• Event
• 默认不载入需要手动 use
• 拆出 event/gesture/shake
• 增加 event/gesture/drag
• Combobox
• 去除 filter-select
• 拆出 combobox.MultiValueCombobox
• use(‘combobox/multi-word’)

20. • Touch Application Framework

21. router
• expressjs 语法的路由
• 支持 hash 和 pushState

22. navigation-view

23. navigation-view
• view 生命周期
• 初始化
• 缓存
• 销毁
• view 切换
• Loading 蒙层
• 特效
• 整合 scroll-view

24. summary

25. Scenario
• 网页型
• OPOA
• Touch WebApp