For a new project I’m working on, I’ve chosen Preact to handle the frontend. Preact is a Fast 3kB alternative to React with the same ES6 API. So far I’m very happy with choosing Preact but that’s a story for a different blog post. Having never worked with ES6 before, choosing Preact also introduced me to cool new functions/concepts like
Promise. But web development wouldn’t be web development without browser support issues now would it?
fetch() isn’t supported on IE11, older Android Browsers (<= 4.4.4) and any iOS Safari browser yet.
Promise used in it’s normal way is more widely supported, using it Async isn’t.
But wait. Why don’t you just use jQuery?
.ajax() is an easy and quick way to handle XMLHttpRequests. But this new project isn’t being build in WordPress, so there’s no jQuery library included by default. So for the first time in a very long time I had to decide if I wanted to use jQuery. I decided not to.
Without turning this post into a jQuery is great/bad library, here are my reasons not to use it for this project.
jQuery claims to leave a Lightweight Footprint, Only 32kB minified and gzipped. Which might sound good, until you realize the complete Preact library is 3kB and my full application is including all dependencies and libraries is 170kB. This means including jQuery to solve my XMLHttpRequests would increase my application’s size by 19%.
Don’t Manipulate DOM
Due to the way Preact (and React) are setup and work, you should not directly manipulate the DOM that is output by Preact. Most of the jQuery library is setup around the idea of manipulating DOM directly, so this isn’t a great match.
The solution, a Polyfill
Instead of switching to an alternative technique for all browsers, we offer a custom solution for browsers that don’t support the newer techniques yet. This way we don’t punish modern/good browsers for the lack of support of older browsers. Just so we’re all on the same page what a Polyfill is:
For you, as the the developer using the polyfill, its use is very similar to how it’ll behave for browsers. Because it replaces a browser native function, there’s no need to change your code. You can simply, in this example, keep using
fetch(), leaving the polyfill to automatically kick in when needed. The fetch polyfill I’m using doesn’t even need any setup besides including it in my project.
The fetch() Polyfill
For my project I decided to us the whatwg-fetch fetch polyfill. Because I’m using npm, installation was as simple as
npm install whatwg-fetch --save. After installation I only had to include it in my Preact application and it was up and running. Including is simply adding
import 'whatwg-fetch'; to your import statements.
More information regarding this fetch polyfill, including installation instructions for other setups, can be found here: https://github.com/github/fetch
The Promise Polyfill
Because of how fetch() works, you’ll also need a Promise polyfill. As recommended by the whatwg-fetch package, I decided to go for the promise-polyfill package. Installation again as simple as
npm install promise-polyfill --save. This polyfill needs a little more setup, after including the package you need to manually replace the
Promise property of the global
Window variable. Which sounds a lot more complicated than it really is:
More information regarding this Promise polyfill, including installation instructions for other setups, can be found here: https://github.com/taylorhakes/promise-polyfill
That’s it. After adding and setting up these 2 polyfills, you can safely use
fetch() and Promises in your project, fully supporting all browsers.