狠狠撸

狠狠撸Share a Scribd company logo

驰鲍滨肠辞苍蹿2010介绍

?Download as PPT, PDF?
?
ling yu
ling yu
1 of 32
YUIConf2010 介绍 灵玉 2010-12-10
YUI 3 Performance (yui3 性能 ) Events Evolved ( 事件扩展 , 比如自定义事件 , 事件监听 , 组件应用等 ) Building YUI 3 Custom Modules ( 创建 yui3 客户端模块 , 如支持多个配置对象 , 自定义模块 ,user.add()) Creating Beautiful Documentation with YUI Doc(YUI Doc 的 ant build 脚本 ) Automated Integration Testing with YUITest Keynote The YUI 3 roadmap The widget infrastructure YUIConf2009 回顾
YUIConf 2010 Sessions An Introduction to YQL YQL + YUI: Building End-to-End Applications Building Open Data Tables with YQL Execute Using (Not Abusing) YQL Introducing YUI 3 AutoComplete Handling Data in YUI 3 High Performance JavaScript and much, much more!
什么是 YQL ？ ( Yahoo Query Language ) YQL Console 实践中的 YQL YQL: An Introduction
YQL: An Introduction 应用程序 复杂数据源 多种数据格式 多个连接 多种 API 改变处理
YQL: An Introduction 唯一 API 规范 熟悉的 SQL 语法 插入 / 删除 / 修改 / 条件 / 过滤 / 排序 xml/json/csv 统一转换最终格式 让 YQL 优化查询 强壮的后台 Yahoo Query Language
show : 显示数据列表 desc : 描述数据列表的结构 select : 获取数据 insert/update/delete : 操作数据表 use : 应用一个开源数据表 set : 定义 key-values So what can YQL do?
select Subject,Date from answers.getbycategory(0,5) where category_id=2115500137 and type="resolved" limit 5 YQL: fetches data 过滤、分页、字段 通过数据源连接 select * from weather.forecast where location in ( select id from xml where url="http://xoap.weather.com/search/search?where=prague" and itemPath="search.loc") 查询后的操作 (sort/ unique/…) select * from social.profile where guid in (select guid from social.connections where owner_guid=me) | sort (field="nickname")
执行 YQL 查询的托管网站 快速设计和调试 default tables – 175 community tables – 772 all – 947 http://developer.yahoo.com/yql/console/ YQL Console
从 YQL Console 开始 YUI + YQL Use the YQL YUI module Use the DataSource.Get YUI module Use the YQL YUI Module with 2 legged OAuth YQL + YUI: Building End-to-End Applications
Various console parameters /?debug=true select * from html where url=http://yuiblog.com /?env=store://257Bv7SEAYewPfoOdKMEvB select * from netflix.catalog where term = "breaking away" /?_uiFocus=flickr select * from flickr.photos.interestingness(20)
Use the YQL YUI module
Use the YQLRequest Module http://developer.yahoo.com/yui/3/api/YQLRequest.html
Use the DataSource.Get YUI modele
Use the YQL YUI Module with 2 legged OAuth http://developer.yahoo.com/yui/3/yql/
Building Open Data Tables with YQL Execute Open Data Tables YQL Execute(JS API) YQL Storage
Open Data Tables – hello world
Open Data Tables – hello world http://developer.yahoo.com/yql/guide/yql-execute-examples.html# yql-execute-example-helloworld
Using (Not Abusing) YQL for Caching, Filtering and Collating Data 使用 YQL 不会浪费时间去学习 API 文档，是一个简单的工作。 在服务端过滤数据并且返回你需要的格式数据。 使用快速的 YQL 服务可以省掉大量的需求 写你自己的 JS APIs 用以执行 使用本地存储并且不要丢掉缓存 去做简单的效果
Node.js + YUI 3 Node.js 是服务器端的 JavaScript 运行环境，它具有无阻塞 (non-blocking) 和事件驱动 (event-driven) 等的特色， Node.js 采用 V8 引擎，同样， Node.js 实现了类似 Apache 和 nginx 的 web 服务，让你可以通过它来搭建基于 JavaScript 的 Web App 。 http://www.douban.com/group/node.js/ http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:share2010#nodejs_ 实践 _ 拔赤
Handling Data in YUI3 检索 Retrieval(Y.DataSource) 解析 Parsing (Y.DataSchema) 标准化 Normalization(Y.DataType) 显示 Display (widgets)
Handling Data in YUI3
Events
?
?
什么时候使用 跨多个组件共享数据 (Share data across widgets) 转化数据格式 (Transform data) 不可用在 YQL(When data is not available in YQL) Y.DataSource 不控制输入数据 (No control of incoming data) 转换成 json(Want to turn data to JSON) 前后端不依赖 (Ensure Front-end codeless reliant) Y.DataSchema Y.DataType 数据格式间的转换 (Formatting)
Introducing YUI 3 AutoComplete 模块化结构 提供 JSONP , YQL 使用很少的代码实现客户端结果数据的格式化 已经应用 YUI3.3.0 YUILibrary: http://yuilibrary.com/gallery/show/autocomplete
High Performance JavaScript 减少缓慢的 js 加载 js 置于底部，合并 js ，动态 js ，延迟 js ，异步 js 减少执行缓慢的 js 不要让 js 执行超过 50ms ，分离过长的 js 进程 减少太多的 UI 渲染 先把 DOM 移除，更改后重新添加， display ： none ， DocumentFragment
Measuring the Web With Boomerang 某个页面可感知的性能表现 - 考虑的是用户打开页面的那段时间 动态页面性能 用户带宽 组件加载时间 网络延迟 github ： http://yahoo.github.com/boomerang/doc/ https://github.com/yahoo/boomerang/tree/gh-pages
Porting Flickr to YUI 3 解决延迟的 js 动态排队 解决很长的 combo-handler 算法 组件真的降低成本吗 ? Y.delegate() 和 Y.on() 轮询，建议使用 Y.all().on() Ie6/ie7 滚动不稳定 深入的挖掘 js 文档库
Panel Discussion: "The Future of Web Development" JavaScript 已经成为在世界上最重要的编程语言 CSS 也是不可撼动的一部分 (CSS grid and CSS layout ) node.js 服务器与浏览器共享代码的愿景
Thanks!

More Related Content

驰鲍滨肠辞苍蹿2010介绍

  • 2. YUI 3 Performance (yui3 性能 ) Events Evolved ( 事件扩展 , 比如自定义事件 , 事件监听 , 组件应用等 ) Building YUI 3 Custom Modules ( 创建 yui3 客户端模块 , 如支持多个配置对象 , 自定义模块 ,user.add()) Creating Beautiful Documentation with YUI Doc(YUI Doc 的 ant build 脚本 ) Automated Integration Testing with YUITest Keynote The YUI 3 roadmap The widget infrastructure YUIConf2009 回顾
  • 3. YUIConf 2010 Sessions An Introduction to YQL YQL + YUI: Building End-to-End Applications Building Open Data Tables with YQL Execute Using (Not Abusing) YQL Introducing YUI 3 AutoComplete Handling Data in YUI 3 High Performance JavaScript and much, much more!
  • 4. 什么是 YQL ？ ( Yahoo Query Language ) YQL Console 实践中的 YQL YQL: An Introduction
  • 5. YQL: An Introduction 应用程序 复杂数据源 多种数据格式 多个连接 多种 API 改变处理
  • 6. YQL: An Introduction 唯一 API 规范 熟悉的 SQL 语法 插入 / 删除 / 修改 / 条件 / 过滤 / 排序 xml/json/csv 统一转换最终格式 让 YQL 优化查询 强壮的后台 Yahoo Query Language
  • 7. show : 显示数据列表 desc : 描述数据列表的结构 select : 获取数据 insert/update/delete : 操作数据表 use : 应用一个开源数据表 set : 定义 key-values So what can YQL do?
  • 8. select Subject,Date from answers.getbycategory(0,5) where category_id=2115500137 and type="resolved" limit 5 YQL: fetches data 过滤、分页、字段 通过数据源连接 select * from weather.forecast where location in ( select id from xml where url="http://xoap.weather.com/search/search?where=prague" and itemPath="search.loc") 查询后的操作 (sort/ unique/…) select * from social.profile where guid in (select guid from social.connections where owner_guid=me) | sort (field="nickname")
  • 9. 执行 YQL 查询的托管网站 快速设计和调试 default tables – 175 community tables – 772 all – 947 http://developer.yahoo.com/yql/console/ YQL Console
  • 10. 从 YQL Console 开始 YUI + YQL Use the YQL YUI module Use the DataSource.Get YUI module Use the YQL YUI Module with 2 legged OAuth YQL + YUI: Building End-to-End Applications
  • 11. Various console parameters /?debug=true select * from html where url=http://yuiblog.com /?env=store://257Bv7SEAYewPfoOdKMEvB select * from netflix.catalog where term = "breaking away" /?_uiFocus=flickr select * from flickr.photos.interestingness(20)
  • 12. Use the YQL YUI module
  • 13. Use the YQLRequest Module http://developer.yahoo.com/yui/3/api/YQLRequest.html
  • 15. Use the YQL YUI Module with 2 legged OAuth http://developer.yahoo.com/yui/3/yql/
  • 16. Building Open Data Tables with YQL Execute Open Data Tables YQL Execute(JS API) YQL Storage
  • 17. Open Data Tables – hello world
  • 18. Open Data Tables – hello world http://developer.yahoo.com/yql/guide/yql-execute-examples.html# yql-execute-example-helloworld
  • 19. Using (Not Abusing) YQL for Caching, Filtering and Collating Data 使用 YQL 不会浪费时间去学习 API 文档，是一个简单的工作。 在服务端过滤数据并且返回你需要的格式数据。 使用快速的 YQL 服务可以省掉大量的需求 写你自己的 JS APIs 用以执行 使用本地存储并且不要丢掉缓存 去做简单的效果
  • 20. Node.js + YUI 3 Node.js 是服务器端的 JavaScript 运行环境，它具有无阻塞 (non-blocking) 和事件驱动 (event-driven) 等的特色， Node.js 采用 V8 引擎，同样， Node.js 实现了类似 Apache 和 nginx 的 web 服务，让你可以通过它来搭建基于 JavaScript 的 Web App 。 http://www.douban.com/group/node.js/ http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:share2010#nodejs_ 实践 _ 拔赤
  • 21. Handling Data in YUI3 检索 Retrieval(Y.DataSource) 解析 Parsing (Y.DataSchema) 标准化 Normalization(Y.DataType) 显示 Display (widgets)
  • 24. ?
  • 25. ?
  • 26. 什么时候使用 跨多个组件共享数据 (Share data across widgets) 转化数据格式 (Transform data) 不可用在 YQL(When data is not available in YQL) Y.DataSource 不控制输入数据 (No control of incoming data) 转换成 json(Want to turn data to JSON) 前后端不依赖 (Ensure Front-end codeless reliant) Y.DataSchema Y.DataType 数据格式间的转换 (Formatting)
  • 27. Introducing YUI 3 AutoComplete 模块化结构 提供 JSONP , YQL 使用很少的代码实现客户端结果数据的格式化 已经应用 YUI3.3.0 YUILibrary: http://yuilibrary.com/gallery/show/autocomplete
  • 28. High Performance JavaScript 减少缓慢的 js 加载 js 置于底部，合并 js ，动态 js ，延迟 js ，异步 js 减少执行缓慢的 js 不要让 js 执行超过 50ms ，分离过长的 js 进程 减少太多的 UI 渲染 先把 DOM 移除，更改后重新添加， display ： none ， DocumentFragment
  • 29. Measuring the Web With Boomerang 某个页面可感知的性能表现 - 考虑的是用户打开页面的那段时间 动态页面性能 用户带宽 组件加载时间 网络延迟 github ： http://yahoo.github.com/boomerang/doc/ https://github.com/yahoo/boomerang/tree/gh-pages
  • 30. Porting Flickr to YUI 3 解决延迟的 js 动态排队 解决很长的 combo-handler 算法 组件真的降低成本吗 ? Y.delegate() 和 Y.on() 轮询，建议使用 Y.all().on() Ie6/ie7 滚动不稳定 深入的挖掘 js 文档库
  • 31. Panel Discussion: "The Future of Web Development" JavaScript 已经成为在世界上最重要的编程语言 CSS 也是不可撼动的一部分 (CSS grid and CSS layout ) node.js 服务器与浏览器共享代码的愿景