Skip to content
This repository has been archived by the owner on Jun 26, 2018. It is now read-only.

WIP: DP-8602: Cleanup third party JS in Mayflower #798

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from

Conversation

rbayliss
Copy link
Contributor

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

This PR accomplishes the following:

  • Remove slick slider, which we're not using.
  • Remove polyfills from Mayflower JS and assume a base level of browser functionality, which can be ensured using Polyfill.io.
  • Convert from Bower to NPM for third party JS dependencies.

Related Issue / Ticket

Steps to Test

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

@todo

Today I learned...

@rbayliss
Copy link
Contributor Author

@mrjmd - Here's a POC for what things might look like with polyfill.io. Just stepping back for a moment, this is coming up now for a couple reasons:

  1. We're working on improving the front end performance of the site, which is pretty bad. Polyfills are a tiny part of that, but a majority of our users are on browsers that don't actually need to be polyfilled.
  2. We're trying to move from Bower to NPM, and it seems like an opportunity to address this (doesn't have to be though).
  3. I'm discovering that we're using features that actually aren't polyfilled correctly (eg: MutationObserver).
  4. As we do future JS work, it would be nice to have a standard level of browser compatibility guaranteed so we can use the features effectively and avoid duplication. Ideally, I'd love to polyfill all of ES6 + fetch and Promise to make this simpler for JS developers in the future, but ES6 might be too big a set of features.

Anyway, I think that leaves us with the following options:

  1. Leave the polyfills alone for now.
  2. Use polyfill.io as suggested in this PR.
  3. Use polyfill.io with the async option, and find a way to delay $(document).ready() until it's loaded. $(document).holdReady() is a thing, but would require some legwork to implement.
  4. Do some kind of conditional polyfilling from our own servers. For simplicity's sake, I don't think we should get too crazy with this. I'm picturing a single polyfill.js file that's conditionally loaded if !(window.fetch && window.Promise && Array.prototype.find ...).

Interested in hearing any thoughts you have here!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant