jQuery Conf 2010, Boston, MA

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