Your SlideShare is downloading. ×
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Distributed JavaScript Widgets with jQuery

18,565

Published on

jQuery Conf 2010, Boston, MA

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
18,565
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
280
Comments
3
Likes
29
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Distributed JavaScript Widgets w/ jQuery jQueryConf Boston 2010 Sunday, October 17, 2010
  • 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. • dis·cuss • dĭ-skŭs' • Distributed commenting platform • Served on over 300k sites • ~200m unique visitors per month Sunday, October 17, 2010
  • 4. What’s a distributed JavaScript widget? Sunday, October 17, 2010
  • 5. Sunday, October 17, 2010
  • 6. Sunday, October 17, 2010
  • 7. Vague definition • Begins with a JavaScript snippet • Lives on somebody else’s website • Visible, interactive UI elements Sunday, October 17, 2010
  • 8. Let’s make one Sunday, October 17, 2010
  • 9. The pitch Sunday, October 17, 2010
  • 10. index.html Sunday, October 17, 2010
  • 11. widget.js Sunday, October 17, 2010
  • 12. widget.js cont’d Sunday, October 17, 2010
  • 13. Where’s jQuery? Sunday, October 17, 2010
  • 14. Some choices • Distribute jQuery include with snippet • Copy/paste into widget.js • Dynamic script include from widget.js Sunday, October 17, 2010
  • 15. Dynamic include Sunday, October 17, 2010
  • 16. More problems Sunday, October 17, 2010
  • 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. Our jquery.js Sunday, October 17, 2010
  • 19. Back to our widget Sunday, October 17, 2010
  • 20. widget.js Sunday, October 17, 2010
  • 21. How to get this? Sunday, October 17, 2010
  • 22. Server-side Sunday, October 17, 2010
  • 23. Reading script QS Sunday, October 17, 2010
  • 24. Alternatively Sunday, October 17, 2010
  • 25. Another approach Sunday, October 17, 2010
  • 26. Getting the data Sunday, October 17, 2010
  • 27. Talking to the server Sunday, October 17, 2010
  • 28. Making the request Sunday, October 17, 2010
  • 29. Same-origin policy Sunday, October 17, 2010
  • 30. XDR flavours • JSONP • window.postMessage • Server-side proxy • url fragment (#) • window.name • CORS Sunday, October 17, 2010
  • 31. There’s a talk for that “Breaking the Cross Domain Barrier” by Alex Sexton @ TXJS ’10 Sunday, October 17, 2010
  • 32. JSONP Sunday, October 17, 2010
  • 33. JSONP Sunday, October 17, 2010
  • 34. postMessage Sunday, October 17, 2010
  • 35. postMessage • Lets you send messages to windows/frames • Oh, and receive them too Sunday, October 17, 2010
  • 36. postMessage big picture Sunday, October 17, 2010
  • 37. requestTalkData Sunday, October 17, 2010
  • 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. Home stretch Sunday, October 17, 2010
  • 40. Render our data Sunday, October 17, 2010
  • 41. renderWidget Sunday, October 17, 2010
  • 42. cleanslate.css • Like reset.css, but works on a container • http://github.com/premasagar/cleanslate Sunday, October 17, 2010
  • 43. attachEvents Sunday, October 17, 2010
  • 44. Sunday, October 17, 2010
  • 45. A quick note about security Sunday, October 17, 2010
  • 46. What if ... Sunday, October 17, 2010
  • 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. Sunday, October 17, 2010
  • 49. Parting if-I-have-time wisdom Sunday, October 17, 2010
  • 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. 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. Thanks • Ben Vinegar • @bentlegen | http://benv.ca • Disqus is hiring http://disqus.com/jobs Sunday, October 17, 2010

×