Part Two: Deploying into the jungle
You're sitting in your office and sipping your first morning coffee. Outside the half-open window you can hear spring birds chirping. Ah, bliss you think taking another sip and leaning back into your creaky chair.
Suddenly the door to your office bursts open and it's your spiky-haired boss jogging into your room. Hey! I know that last project was extremely arduous and I know I promised you'd get some time to refactor it today.
However, I kind of need to do this other thing that's really urgent.
You see, we have this newsletter signup that marketing decided that we need to deploy on all our sites. Even deployed to the very old ones where we have a ton of rogue CSS and JavaScript floating around. The site's are heavily visited and yet so old that nobody remembers how to work with the existing CSS and JavaScript. We just keep on piling on !important rules and setInterval() logic...
Here's an example of the volatile web environment:
Anything that goes into here will get palms on it.
Try adding an input field or button, and it will be eaten up.
So, yeah it's quite bad. What I need you to make is this:
- A newsletter signup form that can exist withing the-jungle without being tampered with.
- It's should be a proper form element with an input field that does (simple) e-mail validation.
- There should also be a submit button next to the input field that when pressed will submit the data to a given URL. You can use requestbin.net or something similar for testing.
- You'll need to create this as a web component that wraps some JS-framework. My other subordinates recognize that a web component is needed here but they would like to have the form logic generated by some dynamic web library.
- Since there is no build pipeline for the older sites this component needs to work without a build step. Here are some suggestions:
- this.attachShadow({mode: "closed"}) returns a shadowRoot that can't be reached by other JavaScript code.
- https://requestbin.net/ is useful for when you need to be able to post data somewhere.
- Calling Requestbin from the browser will throw a CORS error. Thus, recommend using a browser plugin for temporarily disabling CORS.