Building Distributed JavaScript Widgets with jQuery

Distributed JavaScript Widgets w/ jQuery jQueryConf Boston 2010 Sunday, October 17, 2010

Who invited this guy? • Ben Vinegar • Front-end Engineer at Disqus • Former team lead at FreshBooks • Somewhere in there, Guestlist Sunday, October 17, 2010

• dis·cuss • dĭ-skŭs' • Distributed commenting platform • Served on over 300k sites • ~200m unique visitors per month Sunday, October 17, 2010

What’s a distributed JavaScript widget? Sunday, October 17, 2010

Sunday, October 17, 2010

Vague deﬁnition • Begins with a JavaScript snippet • Lives on somebody else’s website • Visible, interactive UI elements Sunday, October 17, 2010

Let’s make one Sunday, October 17, 2010

The pitch Sunday, October 17, 2010

index.html Sunday, October 17, 2010

widget.js Sunday, October 17, 2010

widget.js cont’d Sunday, October 17, 2010

Where’s jQuery? Sunday, October 17, 2010

Some choices • Distribute jQuery include with snippet • Copy/paste into widget.js • Dynamic script include from widget.js Sunday, October 17, 2010

Dynamic include Sunday, October 17, 2010

More problems Sunday, October 17, 2010

jQuery conﬂicts • What if it already exists? (Likely) • Use $.noConﬂict • Does more than let you use Dojo, Mootools, Prototype ... Sunday, October 17, 2010

Our jquery.js Sunday, October 17, 2010

Back to our widget Sunday, October 17, 2010

widget.js Sunday, October 17, 2010

How to get this? Sunday, October 17, 2010

Server-side Sunday, October 17, 2010

Reading script QS Sunday, October 17, 2010

Alternatively Sunday, October 17, 2010

Another approach Sunday, October 17, 2010

Getting the data Sunday, October 17, 2010

Talking to the server Sunday, October 17, 2010

Making the request Sunday, October 17, 2010

Same-origin policy Sunday, October 17, 2010

XDR ﬂavours • JSONP • window.postMessage • Server-side proxy • url fragment (#) • window.name • CORS Sunday, October 17, 2010

There’s a talk for that “Breaking the Cross Domain Barrier” by Alex Sexton @ TXJS ’10 Sunday, October 17, 2010

JSONP Sunday, October 17, 2010

postMessage Sunday, October 17, 2010

postMessage • Lets you send messages to windows/frames • Oh, and receive them too Sunday, October 17, 2010

postMessage big picture Sunday, October 17, 2010

requestTalkData Sunday, October 17, 2010

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

Home stretch Sunday, October 17, 2010

Render our data Sunday, October 17, 2010

renderWidget Sunday, October 17, 2010

cleanslate.css • Like reset.css, but works on a container • http://github.com/premasagar/cleanslate Sunday, October 17, 2010

attachEvents Sunday, October 17, 2010

A quick note about security Sunday, October 17, 2010

What if ... Sunday, October 17, 2010

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

Parting if-I-have-time wisdom Sunday, October 17, 2010

Blocking scripts • You can’t guarantee users will put your snippet at the end of the page • Their mistake, but your app’s reputation • Difﬁcult to change later Sunday, October 17, 2010

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

Thanks • Ben Vinegar • @bentlegen | http://benv.ca • Disqus is hiring http://disqus.com/jobs Sunday, October 17, 2010

http://einztein.com	185
http://speakerrate.com	107
http://lanyrd.com	71
http://alexisperrier.com	38
http://127.0.0.1:8000	18
http://webcache.googleusercontent.com	8
http://paper.li	2
http://us-w1.rockmelt.com	2
http://beta.einztein.com	2
http://204.232.206.121	1
https://twitter.com	1

Building Distributed JavaScript Widgets with jQuery

by benvinegar

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 435

Statistics