A Re-Introduction to Third-Party Scripting
- 1. a re-introduction to third-party scripting techtalksTO Sunday, September 18, 2011
- 2. who invited this guy? • name’s ben • former torontonian • working at disqus in san francisco Sunday, September 18, 2011
- 3. 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
- 4. third-party scripts Sunday, September 18, 2011
- 5. third-party scripts • js written by someone else • executing on your website • loaded from a remote server Sunday, September 18, 2011
- 6. third-party scripts Sunday, September 18, 2011
- 7. simple concept, powerful results Sunday, September 18, 2011
- 8. ad scripts Google AdSense (http://adsense.com) Sunday, September 18, 2011
- 9. analytics CrazyEgg (http://crazyegg.com) Sunday, September 18, 2011
- 10. embedded widgets Disqus (http://disqus.com) Sunday, September 18, 2011
- 11. widgets cont’d Guestlist (http://guestlistapp.com) Sunday, September 18, 2011
- 12. browser plugins Rapportive (http://rapportive.com) Sunday, September 18, 2011
- 13. js apis/sdks LinkedIn (http://developer.linkedin.com/javascript) Sunday, September 18, 2011
- 14. writing them != easy • operate in unknown, uncontrolled environment • shared DOM, globals • browser limitations • debugging remote sites is hard Sunday, September 18, 2011
- 15. the good news Sunday, September 18, 2011
- 16. it’s getting better • new browser features • newly discovered techniques (hacks) • powerful new open source libraries • published literature? Sunday, September 18, 2011
- 17. let’s take the tour Sunday, September 18, 2011
- 18. script loading Sunday, September 18, 2011
- 19. blocking includes • standard script includes block rendering • giving us a bad rep! • culprit: document.write Sunday, September 18, 2011
- 20. document.write Sunday, September 18, 2011
- 21. example: github gists Sunday, September 18, 2011
- 22. embedded gists Sunday, September 18, 2011
- 23. HTML5’s async attr Sunday, September 18, 2011
- 24. async-friendly insert Sunday, September 18, 2011
- 25. async browser support • Firefox 3.6+ • Chrome 7+ • Safari 5.0 • IE 10 (!) • Notably absent: Opera Sunday, September 18, 2011
- 26. dynamic script creation Sunday, September 18, 2011
- 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. shared environment Sunday, September 18, 2011
- 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. namespace your js! Sunday, September 18, 2011
- 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. js libs • you should use ‘em • what if they already exist on the page? Sunday, September 18, 2011
- 33. $.noConflict • utility method for assigning jQuery global ($) to a variable • great for namespacing • becoming a standard pattern Sunday, September 18, 2011
- 34. libs w/ noConflict • LABjs • Underscore.js • Backbone.js • Ender.js and its assoc. microlibs • easyXDM Sunday, September 18, 2011
- 35. destructive libs Sunday, September 18, 2011
- 36. sandboxing • run your code inside a src-less iframe • clean js environment • no global state leak Sunday, September 18, 2011
- 37. twitter @anywhere • twitter widget library • supports multiple lib versions/ instances per page • each version is sandboxed in a separate iframe Sunday, September 18, 2011
- 38. twitter @anywhere iframe A iframe B Sunday, September 18, 2011
- 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. ajax Sunday, September 18, 2011
- 41. 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
- 42. w/o same-origin pol. • What if I hosted a page with the following ... Sunday, September 18, 2011
- 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. CORS headers Cors Example (http://saltybeagle.com/cors) Sunday, September 18, 2011
- 45. JSONP • load JSON using <script> elements • script element bypasses same-origin policy • built-in helpers in most js frameworks Sunday, September 18, 2011
- 46. JSONP example Sunday, September 18, 2011
- 47. JSONP example Sunday, September 18, 2011
- 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 time Sunday, September 18, 2011
- 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. postMessage foo.com bar.com Sunday, September 18, 2011
- 51. iframe tunnels foo.com postMessage bar.com/ xhr tunnel.html bar.com/api Sunday, September 18, 2011
- 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. debugging Sunday, September 18, 2011
- 54. how do you debug this mess? Sunday, September 18, 2011
- 55. switches • serve unminified js for specific sites, users* Sunday, September 18, 2011
- 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.com Sunday, September 18, 2011
- 57. wrapping up Sunday, September 18, 2011
- 58. thanks • @bentlegen • disqus is hiring js/python/django in san francisco • (canadians welcome) • book coming early 2018 Sunday, September 18, 2011