0
a re-introduction                 to third-party scripting                                    techtalksTOSunday, September...
who invited this guy?               •     name’s ben               •     former torontonian               •     working at...
DISQUS               •     dis·cuss • dĭ-skŭs               •     third-party commenting platform               •     cust...
third-party scriptsSunday, September 18, 2011
third-party scripts               •     js written by someone else               •     executing on your website          ...
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, 2...
writing them != easy               •     operate in unknown, uncontrolled                     environment               • ...
the good newsSunday, September 18, 2011
it’s getting better               •     new browser features               •     newly discovered techniques (hacks)      ...
let’s take the tourSunday, September 18, 2011
script loadingSunday, September 18, 2011
blocking includes               •     standard script includes block                     rendering               •     giv...
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       ...
dynamic script creationSunday, September 18, 2011
first impressions count               •     hard to get website owners to                     update their script includes ...
shared environmentSunday, September 18, 2011
global collisions               •     unknown scripts executing on same                     page               •     may i...
namespace your js!Sunday, September 18, 2011
bonus points: html               •     id=”dsq-comment-8”               •     class=”dsq-comment”               •     data...
js libs               •     you should use ‘em               •     what if they already exist on the                     p...
$.noConflict               •     utility method for assigning jQuery                     global ($) to a variable          ...
libs w/ noConflict               •     LABjs               •     Underscore.js               •     Backbone.js             ...
destructive libsSunday, September 18, 2011
sandboxing               •     run your code inside a src-less iframe               •     clean js environment            ...
twitter @anywhere               •     twitter widget library               •     supports multiple lib versions/          ...
twitter @anywhere                                           iframe A                                           iframe BSun...
hiro.js               •     QUnit-like js testing library               •     each test suite runs in a new iframe        ...
ajaxSunday, September 18, 2011
cross-domain ajax               •     can’t initiate XmlHttpRequest from                     foo.com to bar.com           ...
w/o same-origin pol.               •     What if I hosted a page with the                     following ...Sunday, Septemb...
CORS               •     Cross-Origin Resource Sharing               •     special http headers that permit XD            ...
CORS headers                                     Cors Example (http://saltybeagle.com/cors)Sunday, September 18, 2011
JSONP               •     load JSON using <script> elements               •     script element bypasses same-origin       ...
JSONP exampleSunday, September 18, 2011
JSONP exampleSunday, September 18, 2011
JSONP cont’d               •     only supports GET requests               •     script loading can’t detect 400, 500      ...
postMessage               •     HTML5 API for cross-window                     communication               •     works wit...
postMessage        foo.com                               bar.comSunday, September 18, 2011
iframe tunnels                                 foo.com                             postMessage    bar.com/                ...
easyXDM               •     postMessage-like API for window objs               •     uses Flash, obscure transport        ...
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             ...
wrapping upSunday, September 18, 2011
thanks               •     @bentlegen               •     disqus is hiring js/python/django                     in san fra...
Upcoming SlideShare
Loading in...5
×

Re-Introduction to Third-party Scripting

1,851

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,851
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Re-Introduction to Third-party Scripting"

  1. 1. a re-introduction to third-party scripting techtalksTOSunday, September 18, 2011
  2. 2. who invited this guy? • name’s ben • former torontonian • working at disqus in san franciscoSunday, September 18, 2011
  3. 3. 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
  4. 4. third-party scriptsSunday, September 18, 2011
  5. 5. third-party scripts • js written by someone else • executing on your website • loaded from a remote serverSunday, September 18, 2011
  6. 6. third-party scriptsSunday, September 18, 2011
  7. 7. simple concept, powerful resultsSunday, September 18, 2011
  8. 8. ad scripts Google AdSense (http://adsense.com)Sunday, September 18, 2011
  9. 9. analytics CrazyEgg (http://crazyegg.com)Sunday, September 18, 2011
  10. 10. embedded widgets Disqus (http://disqus.com)Sunday, September 18, 2011
  11. 11. widgets cont’d Guestlist (http://guestlistapp.com)Sunday, September 18, 2011
  12. 12. browser plugins Rapportive (http://rapportive.com)Sunday, September 18, 2011
  13. 13. js apis/sdks LinkedIn (http://developer.linkedin.com/javascript)Sunday, September 18, 2011
  14. 14. writing them != easy • operate in unknown, uncontrolled environment • shared DOM, globals • browser limitations • debugging remote sites is hardSunday, September 18, 2011
  15. 15. the good newsSunday, September 18, 2011
  16. 16. it’s getting better • new browser features • newly discovered techniques (hacks) • powerful new open source libraries • published literature?Sunday, September 18, 2011
  17. 17. let’s take the tourSunday, September 18, 2011
  18. 18. script loadingSunday, September 18, 2011
  19. 19. blocking includes • standard script includes block rendering • giving us a bad rep! • culprit: document.writeSunday, September 18, 2011
  20. 20. document.writeSunday, September 18, 2011
  21. 21. example: github gistsSunday, September 18, 2011
  22. 22. embedded gistsSunday, September 18, 2011
  23. 23. HTML5’s async attrSunday, September 18, 2011
  24. 24. async-friendly insertSunday, September 18, 2011
  25. 25. async browser support • Firefox 3.6+ • Chrome 7+ • Safari 5.0 • IE 10 (!) • Notably absent: OperaSunday, September 18, 2011
  26. 26. dynamic script creationSunday, September 18, 2011
  27. 27. 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
  28. 28. shared environmentSunday, September 18, 2011
  29. 29. 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
  30. 30. namespace your js!Sunday, September 18, 2011
  31. 31. bonus points: html • id=”dsq-comment-8” • class=”dsq-comment” • data-dsq-username=”jimbob” • Bad: class=”dsq-comment active”Sunday, September 18, 2011
  32. 32. js libs • you should use ‘em • what if they already exist on the page?Sunday, September 18, 2011
  33. 33. $.noConflict • utility method for assigning jQuery global ($) to a variable • great for namespacing • becoming a standard patternSunday, September 18, 2011
  34. 34. libs w/ noConflict • LABjs • Underscore.js • Backbone.js • Ender.js and its assoc. microlibs • easyXDMSunday, September 18, 2011
  35. 35. destructive libsSunday, September 18, 2011
  36. 36. sandboxing • run your code inside a src-less iframe • clean js environment • no global state leakSunday, September 18, 2011
  37. 37. twitter @anywhere • twitter widget library • supports multiple lib versions/ instances per page • each version is sandboxed in a separate iframeSunday, September 18, 2011
  38. 38. twitter @anywhere iframe A iframe BSunday, September 18, 2011
  39. 39. 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
  40. 40. ajaxSunday, September 18, 2011
  41. 41. 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
  42. 42. w/o same-origin pol. • What if I hosted a page with the following ...Sunday, September 18, 2011
  43. 43. 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
  44. 44. CORS headers Cors Example (http://saltybeagle.com/cors)Sunday, September 18, 2011
  45. 45. JSONP • load JSON using <script> elements • script element bypasses same-origin policy • built-in helpers in most js frameworksSunday, September 18, 2011
  46. 46. JSONP exampleSunday, September 18, 2011
  47. 47. JSONP exampleSunday, September 18, 2011
  48. 48. 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
  49. 49. postMessage • HTML5 API for cross-window communication • works with iframes, new windows • Firefox 3+, Safari 4+, Chrome (all), IE8+Sunday, September 18, 2011
  50. 50. postMessage foo.com bar.comSunday, September 18, 2011
  51. 51. iframe tunnels foo.com postMessage bar.com/ xhr tunnel.html bar.com/apiSunday, September 18, 2011
  52. 52. 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
  53. 53. debuggingSunday, September 18, 2011
  54. 54. how do you debug this mess?Sunday, September 18, 2011
  55. 55. switches • serve unminified js for specific sites, users*Sunday, September 18, 2011
  56. 56. 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
  57. 57. wrapping upSunday, September 18, 2011
  58. 58. thanks • @bentlegen • disqus is hiring js/python/django in san francisco • (canadians welcome) • book coming early 2018Sunday, September 18, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×