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

Building Distributed JavaScript Widgets with jQuery

Embed Size (px)

DESCRIPTION

jQuery Conf 2010, Boston, MA

Citation preview

Page 1: Building Distributed JavaScript Widgets with jQuery

Distributed JavaScript Widgets w/ jQuery

jQueryConf Boston 2010

Sunday, October 17, 2010

Page 2: Building Distributed JavaScript Widgets with jQuery

Who invited this guy?

• Ben Vinegar

• Front-end Engineer at Disqus

• Former team lead at FreshBooks

• Somewhere in there, Guestlist

Sunday, October 17, 2010

Page 3: Building Distributed JavaScript Widgets with jQuery

• dis·cuss • dĭ-skŭs'

• Distributed commenting platform

• Served on over 300k sites

• ~200m unique visitors per month

Sunday, October 17, 2010

Page 4: Building Distributed JavaScript Widgets with jQuery

What’s a distributed JavaScript widget?

Sunday, October 17, 2010

Page 5: Building Distributed JavaScript Widgets with jQuery

Sunday, October 17, 2010

Page 6: Building Distributed JavaScript Widgets with jQuery

Sunday, October 17, 2010

Page 7: Building Distributed JavaScript Widgets with jQuery

Vague definition

• Begins with a JavaScript snippet

• Lives on somebody else’s website

• Visible, interactive UI elements

Sunday, October 17, 2010

Page 8: Building Distributed JavaScript Widgets with jQuery

Let’s make one

Sunday, October 17, 2010

Page 9: Building Distributed JavaScript Widgets with jQuery

The pitch

Sunday, October 17, 2010

Page 10: Building Distributed JavaScript Widgets with jQuery

index.html

Sunday, October 17, 2010

Page 11: Building Distributed JavaScript Widgets with jQuery

widget.js

Sunday, October 17, 2010

Page 12: Building Distributed JavaScript Widgets with jQuery

widget.js cont’d

Sunday, October 17, 2010

Page 13: Building Distributed JavaScript Widgets with jQuery

Where’s jQuery?

Sunday, October 17, 2010

Page 14: Building Distributed JavaScript Widgets with jQuery

Some choices

• Distribute jQuery include with snippet

• Copy/paste into widget.js

• Dynamic script include from widget.js

Sunday, October 17, 2010

Page 15: Building Distributed JavaScript Widgets with jQuery

Dynamic include

Sunday, October 17, 2010

Page 16: Building Distributed JavaScript Widgets with jQuery

More problems

Sunday, October 17, 2010

Page 17: Building Distributed JavaScript Widgets with jQuery

jQuery conflicts

• What if it already exists? (Likely)

• Use $.noConflict

• Does more than let you use Dojo, Mootools, Prototype ...

Sunday, October 17, 2010

Page 18: Building Distributed JavaScript Widgets with jQuery

Our jquery.js

Sunday, October 17, 2010

Page 19: Building Distributed JavaScript Widgets with jQuery

Back to our widget

Sunday, October 17, 2010

Page 20: Building Distributed JavaScript Widgets with jQuery

widget.js

Sunday, October 17, 2010

Page 21: Building Distributed JavaScript Widgets with jQuery

How to get this?

Sunday, October 17, 2010

Page 22: Building Distributed JavaScript Widgets with jQuery

Server-side

Sunday, October 17, 2010

Page 23: Building Distributed JavaScript Widgets with jQuery

Reading script QS

Sunday, October 17, 2010

Page 24: Building Distributed JavaScript Widgets with jQuery

Alternatively

Sunday, October 17, 2010

Page 25: Building Distributed JavaScript Widgets with jQuery

Another approach

Sunday, October 17, 2010

Page 26: Building Distributed JavaScript Widgets with jQuery

Getting the data

Sunday, October 17, 2010

Page 27: Building Distributed JavaScript Widgets with jQuery

Talking to the server

Sunday, October 17, 2010

Page 28: Building Distributed JavaScript Widgets with jQuery

Making the request

Sunday, October 17, 2010

Page 29: Building Distributed JavaScript Widgets with jQuery

Same-origin policy

Sunday, October 17, 2010

Page 30: Building Distributed JavaScript Widgets with jQuery

XDR flavours

• JSONP

• window.postMessage

• Server-side proxy

• url fragment (#)

• window.name

• CORS

Sunday, October 17, 2010

Page 31: Building Distributed JavaScript Widgets with jQuery

There’s a talk for that

“Breaking the Cross Domain Barrier” by Alex Sexton @ TXJS ’10

Sunday, October 17, 2010

Page 32: Building Distributed JavaScript Widgets with jQuery

JSONP

Sunday, October 17, 2010

Page 33: Building Distributed JavaScript Widgets with jQuery

JSONP

Sunday, October 17, 2010

Page 34: Building Distributed JavaScript Widgets with jQuery

postMessage

Sunday, October 17, 2010

Page 35: Building Distributed JavaScript Widgets with jQuery

postMessage

• Lets you send messages to windows/frames

• Oh, and receive them too

Sunday, October 17, 2010

Page 36: Building Distributed JavaScript Widgets with jQuery

postMessage big picture

Sunday, October 17, 2010

Page 37: Building Distributed JavaScript Widgets with jQuery

requestTalkData

Sunday, October 17, 2010

Page 38: Building Distributed JavaScript Widgets with jQuery

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

Page 39: Building Distributed JavaScript Widgets with jQuery

Home stretch

Sunday, October 17, 2010

Page 40: Building Distributed JavaScript Widgets with jQuery

Render our data

Sunday, October 17, 2010

Page 41: Building Distributed JavaScript Widgets with jQuery

renderWidget

Sunday, October 17, 2010

Page 42: Building Distributed JavaScript Widgets with jQuery

cleanslate.css

• Like reset.css, but works on a container

• http://github.com/premasagar/cleanslate

Sunday, October 17, 2010

Page 43: Building Distributed JavaScript Widgets with jQuery

attachEvents

Sunday, October 17, 2010

Page 44: Building Distributed JavaScript Widgets with jQuery

Sunday, October 17, 2010

Page 45: Building Distributed JavaScript Widgets with jQuery

A quick note about security

Sunday, October 17, 2010

Page 46: Building Distributed JavaScript Widgets with jQuery

What if ...

Sunday, October 17, 2010

Page 47: Building Distributed JavaScript Widgets with jQuery

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

Page 48: Building Distributed JavaScript Widgets with jQuery

Sunday, October 17, 2010

Page 49: Building Distributed JavaScript Widgets with jQuery

Parting if-I-have-time wisdom

Sunday, October 17, 2010

Page 50: Building Distributed JavaScript Widgets with jQuery

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

Page 51: Building Distributed JavaScript Widgets with jQuery

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

Page 52: Building Distributed JavaScript Widgets with jQuery

Thanks

• Ben Vinegar

• @bentlegen | http://benv.ca

• Disqus is hiringhttp://disqus.com/jobs

Sunday, October 17, 2010