Ain’t No Party Like a Third‑Party JS Party

Rebecca Murphey / @rmurphey

jQuery Conference / San Diego 2014

wtf3pjs

Rebecca Murphey / @rmurphey

jQuery Conference / San Diego 2014

Firebird

bvapi.js
the “scout” file
bv-primary.js
latest version of the core app
magpie.js
analytics
secondary.js
lazy-loaded resources
batch.json
all the data

Read more about scout files and deploying JS apps from Alex Sexton.

We have one <script> tag.

Our code must Just Work™ …

… even when customers do something crazy find new and exciting ways to keep me employed.

  • modified native objects
  • various JS libraries
  • various plugins of varying quality
  • various back-end systems

$.getScript().andDeleteIt()

bug report

the application is only loading intermittently


<script src="//display-stg.bazaarvoice.com/static/Agileville/en_US/bvapi.js"></script>
						


$.getScript('//display.bazaarvoice.com/static/Agileville/en_US/bvapi.js');
						

var scripts = document.getElementsByTagName('script');
var firstScript = scripts[0];

// later ...

var anotherScript = document.createElement('script');
anotherScript.src = '//display-stg.ugc.bazaarvoice.com/Agileville/bv-primary.js';

firstScript.parentNode.appendChild(anotherScript);
            

uh oh.

the fix:


var scripts = document.getElementsByTagName('script');
var firstScript = scripts[0];
var firstScriptParentNode = firstScript.parentNode;

// later ...

var anotherScript = document.createElement('script');
anotherScript.src = '//display-stg.ugc.bazaarvoice.com/Agileville/bv-primary.js';

firstScriptParentNode.appendChild(anotherScript);
						

body double

bug report

the review submission form appears twice


$('body').length; // lol 2
            

the fix:


function getBody (document) {
  return document.body || document.getElementsByTagName('body')[0];
};
            

undefined

bug report

a firebird component fails to display when it should

the fix:


function showIt (config) {
  var myDiv = config.containerId && $('#' + config.containerId);

  if (myDiv && myDiv.length) {
    myDiv.append('

using configured div

'); } else { $('#fallback').append('

using fallback div

'); } } $('#showIt').click(function () { showIt({ productId : 1234 }); });

keypressn’t

bug report

typing in review submission form doesn’t have any effect

the fix: change yr code


function writeReview () {
  $BV.on('submissionLoad', function () {
    togglePopup();
  });
}
            

lessons

code defensively —
even if you’re first-party

plan for chaos


window.exports = {
  testing : 'all the things',
  breaking : 'code in funky ways',
  haikus : 'add more fun'
};
            

there’s stuff you can’t catch; enable urgent debugging

I’ll be talking more about this at the Front End Ops Conference in April.

Rebecca Murphey

@rmurphey

rmurphey.com/wtf3pjs