Building Distributed JavaScript Widgets with jQuery
- 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