Integrating Pollyfills With Foundry
Foundry was built with newer browsers in mind using the latest HTML5 technologies. Now we explore how to bolt on support for older browsers using the many Pollyfills that are available.
In the previous tutorial, we explored how to load modules based on the
current viewport dimensions. We noted that the native matchMedia function is
used to enable this feature, but older browsers do not support this. Now it's
time to add support to those older browsers by using a Pollyfill. This tutorial
explains how to seamlessly integrate Pollyfills with Foundry.
What You'll Need For This Tutorial
- The Foundry Starter Project
- A copy of yepnope.js
- A copy of the matchMedia pollyfill by Paul Irish
Using Foundry.pollyfill(...)
Foundry comes with a method called pollyfill, which is used as a generic
wrapper for any pollyfill library. Currently only yepnope.js is supported,
but it does add support for a true complete callback so that Foundry is
initialized only after all pollyfills have been downloaded. First, let's take a
look at the HTML we need:
<body>
...
<script type="text/javascript">
var app;
Foundry
.pollyfill({
test: !!window.matchMedia,
nope: [
"/js/matchMedia.js",
"/js/matchMedia.addListener.js"
]
})
.afterAll(function() {
app = Foundry.run(function(dependencies, options) {
options.lazyLoadModules = true;
});
})
.start();
</script>
</body>
The Foundry Starter Project comes with yepnope.js straight
out of the box. Initializing the application is a little different now, since we
must call Foundry.pollyfill(...). This method returns an instance of
Foundry.PollyfillPromise. The afterAll callback is executed after all
pollyfills have been downloaded. The start method begins the pollyfill
downloads.
It's in the afterAll callback that we then call Foundry.run(...) to get our
application object.
The call to Foundry.pollyfill(...) can receive an unlimited number of yepnope
tests.
Foundry
.pollyfill({
!!window.matchMedia,
nope: [ ... ]
}, {
test: !!document.documentElement.classList,
nope: [ ... ]
}, {
test: !!document.querySelector,
nope: "pollyfill/for/querySelector.js"
})
.afterAll(function() {
app = Foundry.run(...);
})
.start();
Demo: Integrating Pollyfills
Many great pollyfills exist. HTML5Please.com has a pretty comprehensive list available.