Build your web apps with yql and yui

5,875 views

Published on

World Internet Developers' Summit 2012 (March 6-7, 2012)
Internet Society Hong Kong

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
5,875
On SlideShare
0
From Embeds
0
Number of Embeds
3,445
Actions
Shares
0
Downloads
16
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Build your web apps with yql and yui

  1. 1. Build your web apps with YQL and YUI
  2. 2. Application = Data manipulation + Data visualizationYahoo! Presentation Template, Confidential 2
  3. 3. What are we going to cover?YQL Why and what of YQL Overview of YQL features YQL Console CommunityYUI What is YUI YUI3 CommunityYahoo! Presentation Template, Confidential 3
  4. 4. Why YQL - My application My awesome application
  5. 5. The trouble with Data You need to find data API Get Access, sign up Find data endpoint Read docs to learn the API Get data in different formats Use data after converting and filtering Keep up with API changes Multiply by number of APIs Deal with multiple connectionsYahoo! Presentation Template, Confidential 5
  6. 6. To make data accessible, Yahoo! Created YQLYahoo! Presentation Template, Confidential 6
  7. 7. Why – Entering the world of YQL• Single API spec my awesome application• SQL-like• select/insert/update/delete• Optimization• Powerful• Extensible bindings
  8. 8. What is YQL The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services. Select * from internet SQL-Like Language › Familiar to developers › Synonymous with data access Through the SHOW, DESC commands and the console, we enable developers to discover the available data sources and structure without opening another Web browser.Yahoo! Presentation Template, Confidential 8
  9. 9. What can YQL do show: lists the supported tables desc: describes the structure of a table select: fetches data insert/update/delete: modify data use: use an Open Data Table set: define key-values across Open Data TablesYahoo! Presentation Template, Confidential 9
  10. 10. Filtering, paging, projection Table data can be filtered in the WHERE clause YQL presents data as “rows” › Abstracts away “paging” views of data sources In YQL fields are analogous to the columns of a table, multiple fields are delimited by commasselect Title,Address from local.search wherequery="sushi" and location="san francisco, ca" andRating.AverageRating="4.5" LIMIT 2Yahoo! Presentation Template, Confidential 10
  11. 11. Joining across sources Sub-select works the same as normal select Example: How to get weather forecast of Hong Kong? Join two services from different companies:select * from weather.forecast where location in (select idfrom xml whereurl=“http://xoap.weather.com/search/search?where=hong+kong”) Parallelizes executionYahoo! Presentation Template, Confidential 11
  12. 12. Post-query manipulation YQL includes built-in functions such as sort, unique, truncate, tail, reverse. Simple post-SELECT processing can be performed by appending the “pipe” symbol to the end of the statement
SELECT … | sort(field=item.date)
SELECT … | unique(field=item.title) | … Functions only operate on the data being returned by the query, nothing to do with the tables or data sources themselvesselect * from social.profile where guid in (select guid fromsocial.connections where owner_guid=me) | sort(field="nickname")Yahoo! Presentation Template, Confidential 12
  13. 13. BenefitsYahoo! Presentation Template, Confidential 13
  14. 14. YQL Tables Built-in Tables › Maintained by Yahoo! › fantasy sports, weather, answers, flickr, geo, music, search, upcoming, mail … › Data Tables • Specialized tables to fetch raw data from the web • csv, html, json, xml …
  15. 15. YQL Tables Open tables › Brings the power of YQL to any API Community tables › Someone may have done the work for you already › http://datatables.org › Tables are hosted on GitHub • https://github.com/yql/yql-tables
  16. 16. YQL console http://developer.yahoo.com/yql/console/ Hosted site which executes YQL queries IDE (Swiss Army Knife) for YQL Developers Quickly discover tables and iterate on queries Design, build, and debugYahoo! Presentation Template, Confidential 16
  17. 17. YQL Console
  18. 18. Console tables
  19. 19. Query builder and Explorer
  20. 20. YQL usage Launched October 28, 2008 167 tables and 1244 community tables Powered Yahoo! properties like Livestand, many mobile apps, universal headers notifications, my Yahoo, toolbar. Processing over 100 billion requests a month. Free external community cluster servers 10 billion requests a month.Yahoo! Presentation Template, Confidential 20
  21. 21. YQL Tables on GitHub
  22. 22. ContributingProcess for adding/updating tables on Git 1. Fork the YQL Tables project 2. Clone your Fork 3. Make your changes 4. Push Changes / Commit 5. Make Pull Request 6. YQL Table Admin will moderate and merge changes and generate new push to datatables.org Steps 1-5 are standard Git procedures, step 6 is unique Git Tutorials › http://help.github.com/forking › http://thinkvitamin.com/code/starting-with-git-cheat-sheet Yahoo! Presentation Template, Confidential 22
  23. 23. Information All YQL info on http://developer.yahoo.com/yql/ Latest updates on yqlblog.net › Some recent updates: • New enhancements to console. • YQL Table Health and YQL Lint • Streaming.Yahoo! Presentation Template, Confidential 23
  24. 24. Conclusion More easily build applications › Fewer lines of code › Data processing done away from app › Consistent and familiar syntax for all data access › Iterative environment for developing the queriesYahoo! Presentation Template, Confidential 24
  25. 25. Conclusion Applications that run faster › Service in the cloud does the work • Conversion, filtering, parallel requests › Smaller network footprint • Fewer client calls • Smaller data amounts • Closer to the data, fatter pipes YQL = select * from internetYahoo! Presentation Template, Confidential 25
  26. 26. Introduce YUI 3
  27. 27. Presenter• Name WretchCa News – Zordius m – 陳建宏 Auto Music Joke – 小Z Lifestyle Blog• Job Movie Comic – 2003 ~ now @ Yahoo! Map Pulse – SDE Homepag Wretch e Music – F2E Download 2012/3/12
  28. 28. WHAT IS YUI 28 2012/3/12
  29. 29. What is YUI• YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications• Homepage – http://yuilibrary.com/ 2012/3/12
  30. 30. What is YUI• Why use YUI? – Modular architecture – Small, fast – Handle X browsers for you• May I use other frameworks? – Yes … for small projects – YUI help you more in a large project: modular design, i18n, sandbox, plugins…2012/3/12
  31. 31. What is YUI• jQuery VS YUI 3 jQuery YUI 3 core Dom + Event light Load modules manual include auto DOM access CSS3 selector CSS3 selector operations OO, chaining OO, chaining Versioning strict sandbox Extensions Plugin site YUI gallery 2012/3/12
  32. 32. What is YUI• jQuery code<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script>$("a").click(function(event) { event.preventDefault(); alert(Hello World!);});</script> 2012/3/12
  33. 33. What is YUI• jQuery code<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="moduleA.js"></script><script src="moduleBrequireA.js"></script><script>$("a").click(function(event) { event.preventDefault(); alert(Hello World!);});</script> 2012/3/12
  34. 34. What is YUI• YUI 3 code<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui- min.js"></script><script>YUI().use(node, event, function (Y) { Y.one(a).on(click, function (E) { E.preventDefault(); alert(Hello World!); });});</script> 2012/3/12
  35. 35. What is YUI• YUI 3 code<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui- min.js"></script><script>YUI().use(node, event, moduleBrequireA, function (Y) { Y.one(a).on(click, function (E) { E.preventDefault(); alert(Hello World!); });});</script> 2012/3/12
  36. 36. YUI 3• Reset – removes the browser-provided styling for HTML elements• Base – consistent and basic cross-browser styling• Fonts – applies a baseline font treatment to all HTML elements (Arial , 13px size , 16px line-height)• Grids 2012/3/12
  37. 37. YUI 3• Reset 2012/3/12
  38. 38. YUI 3• Reset 2012/3/12
  39. 39. YUI 3• Reset + Font 2012/3/12
  40. 40. YUI 3• Javascript modules – Utilities, Extensions – Plugins – Widgets• Dynamic loaded2012/3/12
  41. 41. YUI 3 Dynamicyui-min.js loading CORE, Dependency YUI().use() checkingModule System Browser 20.3 K specific Lazy loading Module Module Module Module 2012/3/12
  42. 42. YUI 3• Plugin • Add / remove feature • Simple • Configurable • Y.one(‘#dragdiv’).plug(Y.Plugin.Drag); • Y.all(‘.resize’).plug(Y.Plugin.Resize); 2012/3/12
  43. 43. YUI 3 Plugin.Align  Plugin.NodeFX Plugin.AutoComplete  Plugin.Resize Plugin.Base  Plugin.ResizeConstrained Plugin.Cache  Plugin.ResizeProxy Plugin.CalendarNavigator  Plugin.ScrollViewList Plugin.ConsoleFilters  Plugin.ScrollViewPaginator Plugin.CreateLinkBase  Plugin.ScrollViewScrollbars Plugin.DDConstrained  Plugin.Shim Plugin.DDNodeScroll  Plugin.SortScroll Plugin.DDProxy  Plugin.WidgetAnim Plugin.DDWindowScroll  plugin.NodeFocusManager Plugin.Drag  plugin.NodeMenuNav Plugin.Drop
  44. 44. YUI 3• Widgets • AutoComplete • Calendar • Charts • Dial2012/3/12
  45. 45. COMMUNITY
  46. 46. Community YUI Gallery › 405 modules 2012/3/12
  47. 47. Community Contribute › Host on github › Anyone can fork / request push 2012/3/12
  48. 48. Community Visit http://yuilibrary.com/2012/3/12
  49. 49. Yahoo! Developer Network
  50. 50. Thank you!

×