Re-Introduction to Third-party Scripting
Upcoming SlideShare
Loading in...5
×
 

Re-Introduction to Third-party Scripting

on

  • 2,114 views

 

Statistics

Views

Total Views
2,114
Views on SlideShare
2,114
Embed Views
0

Actions

Likes
3
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Re-Introduction to Third-party Scripting Re-Introduction to Third-party Scripting Presentation Transcript

  • a re-introduction to third-party scripting techtalksTOSunday, September 18, 2011
  • who invited this guy? • name’s ben • former torontonian • working at disqus in san franciscoSunday, September 18, 2011
  • DISQUS • dis·cuss • dĭ-skŭs • third-party commenting platform • customers: CNN, MLB, IGN, and other exciting acronyms • 500 million visitors/monthSunday, September 18, 2011
  • third-party scriptsSunday, September 18, 2011
  • third-party scripts • js written by someone else • executing on your website • loaded from a remote serverSunday, September 18, 2011
  • third-party scriptsSunday, September 18, 2011
  • simple concept, powerful resultsSunday, 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 hardSunday, September 18, 2011
  • the good newsSunday, 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 tourSunday, September 18, 2011
  • script loadingSunday, September 18, 2011
  • blocking includes • standard script includes block rendering • giving us a bad rep! • culprit: document.writeSunday, September 18, 2011
  • document.writeSunday, September 18, 2011
  • example: github gistsSunday, September 18, 2011
  • embedded gistsSunday, September 18, 2011
  • HTML5’s async attrSunday, September 18, 2011
  • async-friendly insertSunday, September 18, 2011
  • async browser support • Firefox 3.6+ • Chrome 7+ • Safari 5.0 • IE 10 (!) • Notably absent: OperaSunday, September 18, 2011
  • dynamic script creationSunday, 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 environmentSunday, 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 patternSunday, September 18, 2011
  • libs w/ noConflict • LABjs • Underscore.js • Backbone.js • Ender.js and its assoc. microlibs • easyXDMSunday, September 18, 2011
  • destructive libsSunday, September 18, 2011
  • sandboxing • run your code inside a src-less iframe • clean js environment • no global state leakSunday, September 18, 2011
  • twitter @anywhere • twitter widget library • supports multiple lib versions/ instances per page • each version is sandboxed in a separate iframeSunday, September 18, 2011
  • twitter @anywhere iframe A iframe BSunday, 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
  • ajaxSunday, 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 tooSunday, 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 frameworksSunday, September 18, 2011
  • JSONP exampleSunday, September 18, 2011
  • JSONP exampleSunday, 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 timeSunday, 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
  • postMessage foo.com bar.comSunday, September 18, 2011
  • iframe tunnels foo.com postMessage bar.com/ xhr tunnel.html bar.com/apiSunday, 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
  • debuggingSunday, 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.comSunday, September 18, 2011
  • wrapping upSunday, September 18, 2011
  • thanks • @bentlegen • disqus is hiring js/python/django in san francisco • (canadians welcome) • book coming early 2018Sunday, September 18, 2011