re-introduction to third-party scripting
DESCRIPTION
TRANSCRIPT
a re-introductionto third-party scripting
techtalksTOSunday, September 18, 2011
who invited this guy?
• name’s ben• former torontonian• working at disqus in san francisco
Sunday, September 18, 2011
DISQUS
• dis·cuss • dĭ-skŭs'• third-party commenting platform• customers: CNN, MLB, IGN, and other
exciting acronyms• 500 million visitors/month
Sunday, September 18, 2011
third-party scripts
Sunday, September 18, 2011
third-party scripts
• js written by someone else• executing on your website• loaded from a remote server
Sunday, September 18, 2011
third-party scripts
Sunday, September 18, 2011
simple concept, powerful results
Sunday, September 18, 2011
ad scripts
Google AdSense (http://adsense.com)
Sunday, September 18, 2011
analytics
CrazyEgg (http://crazyegg.com)
Sunday, September 18, 2011
embedded widgets
Disqus (http://disqus.com)
Sunday, September 18, 2011
widgets cont’d
Guestlist (http://guestlistapp.com)
Sunday, September 18, 2011
browser plugins
Rapportive (http://rapportive.com)
Sunday, September 18, 2011
js apis/sdks
LinkedIn (http://developer.linkedin.com/javascript)
Sunday, September 18, 2011
writing them != easy
• operate in unknown, uncontrolled environment
• shared DOM, globals• browser limitations• debugging remote sites is hard
Sunday, September 18, 2011
the good news
Sunday, September 18, 2011
it’s getting better
• new browser features• newly discovered techniques (hacks)• powerful new open source libraries• published literature?
Sunday, September 18, 2011
let’s take the tour
Sunday, September 18, 2011
script loading
Sunday, September 18, 2011
blocking includes
• standard script includes block rendering
• giving us a bad rep!• culprit: document.write
Sunday, September 18, 2011
document.write
Sunday, September 18, 2011
example: github gists
Sunday, September 18, 2011
embedded gists
Sunday, September 18, 2011
HTML5’s async attr
Sunday, September 18, 2011
async-friendly insert
Sunday, September 18, 2011
async browser support
• Firefox 3.6+• Chrome 7+• Safari 5.0• IE 10 (!)• Notably absent: Opera
Sunday, September 18, 2011
dynamic script creation
Sunday, September 18, 2011
first impressions count
• hard to get website owners to update their script includes
• people are still using blocking disqus include (deprecated mid-2009)
• who still uses blocking GA include?
Sunday, September 18, 2011
shared environment
Sunday, September 18, 2011
global collisions
• unknown scripts executing on same page
• may introduce conflicting variables• DOM queries may inadvertently
select your elements (or vice versa)
Sunday, September 18, 2011
namespace your js!
Sunday, September 18, 2011
bonus points: html
• id=”dsq-comment-8”• class=”dsq-comment”• data-dsq-username=”jimbob”• Bad: class=”dsq-comment active”
Sunday, September 18, 2011
js libs
• you should use ‘em• what if they already exist on the
page?
Sunday, September 18, 2011
$.noConflict
• utility method for assigning jQuery global ($) to a variable
• great for namespacing• becoming a standard pattern
Sunday, September 18, 2011
libs w/ noConflict
• LABjs• Underscore.js• Backbone.js• Ender.js and its assoc. microlibs• easyXDM
Sunday, September 18, 2011
destructive libs
Sunday, September 18, 2011
sandboxing
• run your code inside a src-less iframe• clean js environment• no global state leak
Sunday, September 18, 2011
twitter @anywhere
• twitter widget library• supports multiple lib versions/
instances per page• each version is sandboxed in a
separate iframe
Sunday, September 18, 2011
twitter @anywhere
iframe A
iframe B
Sunday, September 18, 2011
hiro.js
• QUnit-like js testing library• each test suite runs in a new iframe• optional: seed iframe environment
Hiro (http://github.com/antonkovalyov/hiro)
Sunday, September 18, 2011
ajax
Sunday, September 18, 2011
cross-domain ajax
• can’t initiate XmlHttpRequest from foo.com to bar.com
• same-origin policy (host, port, protocol)
• subdomains a#ected too
Sunday, September 18, 2011
w/o same-origin pol.
• What if I hosted a page with the following ...
Sunday, September 18, 2011
CORS
• Cross-Origin Resource Sharing• special http headers that permit XD
access to resources• W3C working draft• Firefox 3.5+, Chrome 3+, Safari 4+,
IE8+
Sunday, September 18, 2011
CORS headers
Cors Example (http://saltybeagle.com/cors)Sunday, September 18, 2011
JSONP
• load JSON using <script> elements• script element bypasses same-origin
policy• built-in helpers in most js frameworks
Sunday, September 18, 2011
JSONP example
Sunday, September 18, 2011
JSONP example
Sunday, September 18, 2011
JSONP cont’d
• only supports GET requests• script loading can’t detect 400, 500
errors (rely on timeouts)• caching complications when
generating new response each time
Sunday, September 18, 2011
postMessage
• HTML5 API for cross-window communication
• works with iframes, new windows• Firefox 3+, Safari 4+, Chrome (all),
IE8+
Sunday, September 18, 2011
postMessagefoo.com
bar.com
Sunday, September 18, 2011
iframe tunnels
foo.com
bar.com/tunnel.html bar.com/api
xhrpostMessage
Sunday, September 18, 2011
easyXDM
• postMessage-like API for window objs• uses Flash, obscure transport
protocols when postMessage is n/a• wider browser support• Disqus, Twitter, Scribd, LinkedIn ...
easyXDM (http://easyxdm.net)
Sunday, September 18, 2011
debugging
Sunday, September 18, 2011
how do you debug this mess?
Sunday, September 18, 2011
switches
• serve unminified js for specific sites, users*
Sunday, September 18, 2011
proxies
• send all http tra$c to a proxy server• rewrite production urls• from widget.com to ...• localhost• staging.widget.com• newfeature.staging.widget.com
Sunday, September 18, 2011
wrapping up
Sunday, September 18, 2011
thanks
• @bentlegen• disqus is hiring js/python/django
in san francisco• (canadians welcome)• book coming early 2018
Sunday, September 18, 2011