third party javascript: or, how i learned to stop worrying and … · 2019-11-22 · third-party...
Post on 03-Jun-2020
6 Views
Preview:
TRANSCRIPT
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
top related