THIRD PARTY JAVASCRIPT: OR, HOW I LEARNED TO STOP WORRYING AND LOVE BEING BLAMED FOR EVERYONE ELSE'S BAD WEB DESIGN

HAILEY BOBELLA

DEVELOPER WEEK 2019, AUSTIN TX

WHO AM I?

¯\_(ツ)_/¯

My Credentials:

• Linguistics Major, NYU

• Musician

• Full stack software engineer

• Bazaarvoice

• Hack Reactor

• Hello World

WHAT I BUILD Beautiful, performant, scalable third party JS for displaying ratings and reviews

HOW IT FEELS

WELCOME TO THE WILD

WEST.

WHAT IS THIRD PARTY

JS?

Third-party JavaScript often refers to scripts that can be

embedded into any site directly from a third-party

vendor. These scripts can include ads, analytics, widgets

and other scripts that make the web more dynamic and

interactive.

- Google Developer Docs

WHAT’S THE DIFFERENCE? BUILDING A SKYSCRAPER

VS.

BUILDING A HOUSE ON TOP OF A SKYSCRAPER

WHAT’S THE DIFFERENCE?

BUILDING YOUR OWN SITES/APPS

• You control everything (except maybe

browser/device)

• You can make assumptions

• You decide flow

• You control domains, cookies, etc.

WRITING THIRD PARTY JS

• Your code executes in a hostile

environment

• You can’t assume anything

• You’re competing for resources

• By definition, your code is a

vulnerability

PERFORMANCE

PREPARE TO BE BLAMED FOR EVERYBODY ELSE’S SLOW SITE

THINGS TO CONSIDER

HOW MANY BYTES ARE YOU SHIPPING?

WHAT CAN BE CACHED/PRE-

RENDERED AND WHAT NEEDS TO BE BUILT AT

RUN-TIME?

WHEN ARE YOU TRYING TO

LOAD/RENDER?

ONE BIG FILE OR MULTIPLE SMALLER

FILES?

HOW DO YOU STAY FAST WHEN

COMPETING WITH OTHER RESOURCES?

RESOURCE SIZE

• Every byte matters

• Do you really need that

library?

• Get comfortable with vanilla JS

– Mutation Observers, DOM

manipulation, native browser

API’s

• Audit your resource size during

development!

WHAT TO BUILD AND WHEN

• Server side rendering/hydration

• Genericize components and functionality wherever possible!

• Build custom bundles/files for individual deployments

• Can you externalize config data?

• Memoize promises, network requests and otherwise

PAGE TIMING

• Load resources only when

there’s time (async)

• Trigger paints/renders only

when certain DOM elements are

visible

• Think of what can be deferred

and what can’t

• Record diagnostic analytics!!

BREAK IT UP

• HTTP/2 means requests are

multiplexed

• Sometimes, more small requests are

faster than one big one

• Think async! Wherever possible,

eliminate synchronous dependencies

CASE STUDY: TOO MANY REQUESTS

Complaint: You are sending so many network

requests, you’re slowing down our page!!

CASE STUDY: TOO MANY REQUESTS

Response: Those are all HTTP/2.0 and are less

than 5KB each. You are loading upwards of

2MB of images before you even load our first

script at 6 seconds, and another 3MB after that.

BV Client

CASE STUDY: SLOW JS

Complaint: Your JS is taking too long to

execute and you’re tanking our Lighthouse

metrics!!

CASE STUDY: SLOW JS

Response: Our gross JS execution time is sub 2

seconds, and a lot of that is happening in

parallel. Your BV div elements show up at 11

seconds, and we were done rendering by ~11.8

seconds.

Time Blocking Main Thread: 89ms, <4%

Total CPU Use Time: 249ms, <3%

ENVIRONMENT

JUST LIKE DRIVING, ASSUME EVERYONE ELSE HAS NO IDEA WHAT THEY ARE DOING

THINGS TO CONSIDER

ARE YOU POLYFILLING ALL METHODS THAT NEED IT?

ARE YOU RELYING ON GLOBALS OR PROVIDING

THEM YOURSELF?

ARE YOU VERIFYING ALL THE ESSENTIAL BUILDING

BLOCKS OF YOUR SCRIPTS?

ARE YOU INSULATING ALL YOUR STYLES?

POLYFILLS

• What is a polyfill?

• “A polyfill is a piece of code (usually JavaScript

on the Web) used to provide modern functionality

on older browsers that do not natively support it.”

• Not just for old browsers!

• Think locales, popular alternate usages, etc.

• Get familiar with caniuse.com

• Consider dynamically incorporating polyfills to save

space

GLOBALS

• NEVER count on an object

being there and being the

shape you expect it to be

• Scope your variables to your

own packages

• Webpack, Rollup, etc.

• Nothing is sacred

CROSS YOUR T’S AND DOT YOUR I’S

• Make sure everything has a fallback

• If you need to share info across apps,

think async – consider promises or queues

• Be good about semver, especially if you

have multiple apps interacting

• try/catch is your best friend!*

*in moderation

PROTECT YOUR STYLES

• CSS resets, clean slate

• all: unset; isn’t always enough

• Shadow DOM

CASE STUDY: THE DISAPPEARING IFRAME

Complaint: My BV content is completely

broken, it’s not rendering on the page at all.

CASE STUDY: THE DISAPPEARING IFRAME

Response: The script tag you’re using to load

our scout file is inside of an iframe in the

head that you’re only dynamically adding as

the result of another script.

CASE STUDY: JQUERY HIJINX

Complaint: My BV application is broken,

when it tries to initialize it breaks the entire

website!!

CASE STUDY: JQUERY HIJINX

Response: Even though several of your

page’s resources depend on jQuery, you are

importing a custom version, modifying, and

then overwriting the global version, and for

some reason also overwriting the global

postMessage API with a jQuery function so

when we try to use it every app that uses

jQuery blows up.

window.jQuery = window.$ = jQuery;

CASE STUDY: BV-LOADER & THE CASE OF THE BODY SNATCHERS

Complaint: Our BV content loads fine on

initial page load when I first come to the site,

but whenever I navigate to a new page it

breaks!

CASE STUDY: BV-LOADER & THE CASE OF THE BODY SNATCHERS

This one is my favorite 😉

Response: Your site is set up as an SPA, but

for some reason you are completely deleting

and then reattaching the entire body element

every time you navigate to a new page. You

destroy our MutationObservers in the process,

and they don’t get reinvoked since you left

the head alone and our scout file doesn’t get

reloaded.

*screams in

poorly

implemented

SPA*

THANK YOU FOR LISTENING! HAILEY JANE BOBELLA haileybobella@gmail.com

haileybobella.com

linkedin.com/in/haileybobella

medium.com/@haileyjanebobella