building distributed javascript widgets with jquery
Post on 15-Jan-2015
17.912 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Sunday, October 17, 2010
Vague definition
• 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 conflicts
• What if it already exists? (Likely)
• Use $.noConflict
• 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 flavours
• 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
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
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
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
• Difficult 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 hiringhttp://disqus.com/jobs
Sunday, October 17, 2010
top related