A Re-Introduction to Third-Party Scripting
-
Upload
benvinegar -
Category
Technology
-
view
4.249 -
download
2
description
Transcript of A Re-Introduction to Third-Party Scripting
![Page 1: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/1.jpg)
a re-introductionto third-party scripting
techtalksTOSunday, September 18, 2011
![Page 2: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/4.jpg)
third-party scripts
Sunday, September 18, 2011
![Page 5: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/6.jpg)
third-party scripts
Sunday, September 18, 2011
![Page 7: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/7.jpg)
simple concept, powerful results
Sunday, September 18, 2011
![Page 8: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/8.jpg)
ad scripts
Google AdSense (http://adsense.com)
Sunday, September 18, 2011
![Page 9: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/9.jpg)
analytics
CrazyEgg (http://crazyegg.com)
Sunday, September 18, 2011
![Page 10: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/10.jpg)
embedded widgets
Disqus (http://disqus.com)
Sunday, September 18, 2011
![Page 11: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/11.jpg)
widgets cont’d
Guestlist (http://guestlistapp.com)
Sunday, September 18, 2011
![Page 12: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/12.jpg)
browser plugins
Rapportive (http://rapportive.com)
Sunday, September 18, 2011
![Page 13: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/13.jpg)
js apis/sdks
LinkedIn (http://developer.linkedin.com/javascript)
Sunday, September 18, 2011
![Page 14: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/15.jpg)
the good news
Sunday, September 18, 2011
![Page 16: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/17.jpg)
let’s take the tour
Sunday, September 18, 2011
![Page 18: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/18.jpg)
script loading
Sunday, September 18, 2011
![Page 19: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/20.jpg)
document.write
Sunday, September 18, 2011
![Page 21: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/21.jpg)
example: github gists
Sunday, September 18, 2011
![Page 22: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/22.jpg)
embedded gists
Sunday, September 18, 2011
![Page 23: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/23.jpg)
HTML5’s async attr
Sunday, September 18, 2011
![Page 24: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/24.jpg)
async-friendly insert
Sunday, September 18, 2011
![Page 25: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/26.jpg)
dynamic script creation
Sunday, September 18, 2011
![Page 27: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/28.jpg)
shared environment
Sunday, September 18, 2011
![Page 29: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/30.jpg)
namespace your js!
Sunday, September 18, 2011
![Page 31: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/32.jpg)
js libs
• you should use ‘em• what if they already exist on the
page?
Sunday, September 18, 2011
![Page 33: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/35.jpg)
destructive libs
Sunday, September 18, 2011
![Page 36: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/38.jpg)
twitter @anywhere
iframe A
iframe B
Sunday, September 18, 2011
![Page 39: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/40.jpg)
ajax
Sunday, September 18, 2011
![Page 41: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/42.jpg)
w/o same-origin pol.
• What if I hosted a page with the following ...
Sunday, September 18, 2011
![Page 43: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/44.jpg)
CORS headers
Cors Example (http://saltybeagle.com/cors)Sunday, September 18, 2011
![Page 45: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/46.jpg)
JSONP example
Sunday, September 18, 2011
![Page 47: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/47.jpg)
JSONP example
Sunday, September 18, 2011
![Page 48: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/50.jpg)
postMessagefoo.com
bar.com
Sunday, September 18, 2011
![Page 51: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/51.jpg)
iframe tunnels
foo.com
bar.com/tunnel.html bar.com/api
xhrpostMessage
Sunday, September 18, 2011
![Page 52: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/53.jpg)
debugging
Sunday, September 18, 2011
![Page 54: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/54.jpg)
how do you debug this mess?
Sunday, September 18, 2011
![Page 55: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/55.jpg)
switches
• serve unminified js for specific sites, users*
Sunday, September 18, 2011
![Page 56: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/html5/thumbnails/57.jpg)
wrapping up
Sunday, September 18, 2011
![Page 58: A Re-Introduction to Third-Party Scripting](https://reader033.fdocuments.in/reader033/viewer/2022052823/55579743d8b42ad4278b53b5/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