Building Distributed JavaScript Widgets with jQuery

20,479 views
20,235 views

Published on

jQuery Conf 2010, Boston, MA

Published in: Technology
3 Comments
29 Likes
Statistics
Notes
  • For those who is in need of JavaScript widgets: http://perfectwidgets.com/Main. I just couldn’t but share this library of 300+ gauges.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • become a freelancer and offer ur skillz and service on underbidbob.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Currently writing a widget for one of our client and this tutorial is really helpful. One error thought needs mentioning, if(jQuery) should be if( typeof(jQuery) != 'undefined' ), else you get a js error.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
20,479
On SlideShare
0
From Embeds
0
Number of Embeds
1,274
Actions
Shares
0
Downloads
289
Comments
3
Likes
29
Embeds 0
No embeds

No notes for slide

Building Distributed JavaScript Widgets with jQuery

  1. 1. Distributed JavaScript Widgets w/ jQuery jQueryConf Boston 2010 Sunday, October 17, 2010
  2. 2. Who invited this guy? • Ben Vinegar • Front-end Engineer at Disqus • Former team lead at FreshBooks • Somewhere in there, Guestlist Sunday, October 17, 2010
  3. 3. • dis·cuss • dĭ-skŭs' • Distributed commenting platform • Served on over 300k sites • ~200m unique visitors per month Sunday, October 17, 2010
  4. 4. What’s a distributed JavaScript widget? Sunday, October 17, 2010
  5. 5. Sunday, October 17, 2010
  6. 6. Sunday, October 17, 2010
  7. 7. Vague definition • Begins with a JavaScript snippet • Lives on somebody else’s website • Visible, interactive UI elements Sunday, October 17, 2010
  8. 8. Let’s make one Sunday, October 17, 2010
  9. 9. The pitch Sunday, October 17, 2010
  10. 10. index.html Sunday, October 17, 2010
  11. 11. widget.js Sunday, October 17, 2010
  12. 12. widget.js cont’d Sunday, October 17, 2010
  13. 13. Where’s jQuery? Sunday, October 17, 2010
  14. 14. Some choices • Distribute jQuery include with snippet • Copy/paste into widget.js • Dynamic script include from widget.js Sunday, October 17, 2010
  15. 15. Dynamic include Sunday, October 17, 2010
  16. 16. More problems Sunday, October 17, 2010
  17. 17. jQuery conflicts • What if it already exists? (Likely) • Use $.noConflict • Does more than let you use Dojo, Mootools, Prototype ... Sunday, October 17, 2010
  18. 18. Our jquery.js Sunday, October 17, 2010
  19. 19. Back to our widget Sunday, October 17, 2010
  20. 20. widget.js Sunday, October 17, 2010
  21. 21. How to get this? Sunday, October 17, 2010
  22. 22. Server-side Sunday, October 17, 2010
  23. 23. Reading script QS Sunday, October 17, 2010
  24. 24. Alternatively Sunday, October 17, 2010
  25. 25. Another approach Sunday, October 17, 2010
  26. 26. Getting the data Sunday, October 17, 2010
  27. 27. Talking to the server Sunday, October 17, 2010
  28. 28. Making the request Sunday, October 17, 2010
  29. 29. Same-origin policy Sunday, October 17, 2010
  30. 30. XDR flavours • JSONP • window.postMessage • Server-side proxy • url fragment (#) • window.name • CORS Sunday, October 17, 2010
  31. 31. There’s a talk for that “Breaking the Cross Domain Barrier” by Alex Sexton @ TXJS ’10 Sunday, October 17, 2010
  32. 32. JSONP Sunday, October 17, 2010
  33. 33. JSONP Sunday, October 17, 2010
  34. 34. postMessage Sunday, October 17, 2010
  35. 35. postMessage • Lets you send messages to windows/frames • Oh, and receive them too Sunday, October 17, 2010
  36. 36. postMessage big picture Sunday, October 17, 2010
  37. 37. requestTalkData Sunday, October 17, 2010
  38. 38. easyXDM • Exposes a postMessage-like interface to communicate with windows/frames • But backwards compatible with older browsers using whatever-works • http://easyxdm.net Sunday, October 17, 2010
  39. 39. Home stretch Sunday, October 17, 2010
  40. 40. Render our data Sunday, October 17, 2010
  41. 41. renderWidget Sunday, October 17, 2010
  42. 42. cleanslate.css • Like reset.css, but works on a container • http://github.com/premasagar/cleanslate Sunday, October 17, 2010
  43. 43. attachEvents Sunday, October 17, 2010
  44. 44. Sunday, October 17, 2010
  45. 45. A quick note about security Sunday, October 17, 2010
  46. 46. What if ... Sunday, October 17, 2010
  47. 47. Play it safe with iframes • Don’t expose vulnerable actions on the website host • Hide them behind an iframe • Restrict endpoint requests to originate from iframe Sunday, October 17, 2010
  48. 48. Sunday, October 17, 2010
  49. 49. Parting if-I-have-time wisdom Sunday, October 17, 2010
  50. 50. Blocking scripts • You can’t guarantee users will put your snippet at the end of the page • Their mistake, but your app’s reputation • Difficult to change later Sunday, October 17, 2010
  51. 51. Version like a pro • You will inevitably have multiple versions • Can you serve both at the same time, on the same page? • Getting people to upgrade is hard Sunday, October 17, 2010
  52. 52. Thanks • Ben Vinegar • @bentlegen | http://benv.ca • Disqus is hiring http://disqus.com/jobs Sunday, October 17, 2010

×