Download as PDF, PPTX
![Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUIN](https://cdn.slidesharecdn.com/ss_thumbnails/howtocontrbiute-131017101627-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Building Distributed JavaScript Widgets with jQuery
- 1. Distributed JavaScript Widgets w/ jQuery jQueryConf Boston 2010 Sunday, October 17, 2010
- 2. Who invited thisguy? • 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.
- 6.
- 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, October17, 2010
- 10.
- 11.
- 12. widget.js cont’d Sunday, October17, 2010
- 13. Where’s jQuery? Sunday, October17, 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, October17, 2010
- 16. More problems Sunday, October17, 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, October17, 2010
- 19. Back to ourwidget Sunday, October 17, 2010
- 20.
- 21. How to getthis? Sunday, October 17, 2010
- 22.
- 23. Reading script QS Sunday,October 17, 2010
- 24.
- 25. Another approach Sunday, October17, 2010
- 26. Getting the data Sunday,October 17, 2010
- 27. Talking to theserver Sunday, October 17, 2010
- 28. Making the request Sunday,October 17, 2010
- 29.
- 30. XDR flavours • JSONP • window.postMessage • Server-side proxy • url fragment (#) • window.name • CORS Sunday, October 17, 2010
- 31. There’s a talkfor that “Breaking the Cross Domain Barrier” by Alex Sexton @ TXJS ’10 Sunday, October 17, 2010
- 32.
- 33.
- 34.
- 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.
- 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, October17, 2010
- 40. Render our data Sunday,October 17, 2010
- 41.
- 42. cleanslate.css • Like reset.css, but works on a container • http://github.com/premasagar/cleanslate Sunday, October 17, 2010
- 43.
- 44.
- 45. A quick noteabout security Sunday, October 17, 2010
- 46. What if ... Sunday,October 17, 2010
- 47. Play it safewith 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.
- 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 apro • 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