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