Should you be using Yepnope?
This is a program that offers a simple API that will help you to order, load and then execute all of your scripts at lightning speed.
Why not just concatenate the scripts, placing them at the very bottom?
Most of the time, the code will be situation specific. Yepnope can capitalize on this simple fact, allowing you to load scripts based upon the situation you are in. A lot of the time, this will manifest at Feature Tests. Such feature tests will check the availability of any feature with the executing browser environment. Generally, when a feature isn’t supported, polyfill will be loaded in as a way to offer backwards compatibility for any non-supporting browser. When you have Yepnope, the only people that are paying the cost of polyfill will be those who actually need it.
Can this be done with other script loaders?
Yes. We simply believe this approach is best suited for this particular use-case, and the other loaders are more geared towards the problems. Many of them are just as awesome!
What About Modernizr?
Right now, Yepnope is included with the special builds of Modernizer because it is the perfect companion for a feature testing library. Modernizr output is a great input to Yepnope. Right now, Yepnope is included and unmodified from the original state, but also is an aliased Modernizer.load. This means that you can use the two on an interchangeable basis, even though we do suggest you stay with one or the other.
yepnope(); Takes – object, string, array of either
Yepnope function is actually where the magic happens, as it is built to take exactly what your input is. Pay close attention.
A string is the most simple thing that you can pass the Yepnope function:
What this does is that it will load your js file in the future, but as soon as possible. This is because Yepnope is actually _asynchronous_ and it does not wait for the script to be done loaded before the next step happens, which is why Yepnope can make apps faster.
Why can’t I just used whatever script I just loaded?
You actually can! If you need to do something once your file is loaded, you need to use a callback function.
No, sorry, that is not how it works. If you are not familiar with asynchronous code, it can be a bit of a chore, but we can go through the ways to make it work like you want it.
This is just like the first example with string, it is just that we are actually able to add to this one. For example, if we can put a callback function so that is it set to run when the file is finished loaded. This is done using ‘callback’ property. From here on, we will refer to this as Test Object, even though there are times it does not have a test that is in it.
If you are someone who is used to using an asynchronous pattern, this is something that will be a bit of a breeze for you. However, if you are not used to using any sort of asynchronous pattern, it will start to seem natural in no time at all. One of the more important parts of Yepnope is that you have the ability to pass in the feature test results to help determine whether or not you need to load a script. This is the Yepnope API for such occasions:
The real power here is that you can parse a JSON string. if your browser is already with built-in support for JSON parsing, it will not require any extra loading time that can hold you back.
We do not have any sort of ‘yep’ script property that is set up. This is because it is not mandatory. If you do not have anything that needs to load when the script passes, you can leave ‘yep’ out. The same will go for ‘nope’. This is a simple example that is based upon an easily replaceable feature of the browser. There are many other things that you can feature test for, often requiring a set of styles and scripts that are not always going to be the exact fill ins for the native counterparts. No matter what, Yepnope will more than likely have a way to help you with the structure.
When looking forward and you find that you want to be able to load more than one script, there will be a few options, all based on your app. It may seem that one of them may feel a bit better than the other one does, and that the Yepnope developers will suggest that you do what feels best.
Load property in the test object can be set to a wide range of urls.
The area of callback, for some, can be a bit confusing once we introduce any multiple file load. As a matter of fact, callback function will get called for each file that you load the test object. Keep this in mind when you are learning the new ways to load your filed. It is time that you learn the parameters that will get passed into your function and what they are for.
url – Without prefixes attached, this is the url that was loaded
result – The result of your test, so treat it as a truthy value
key – If you are given a key mapping for your file, this is the key.
If you do use an array, it is the index of the array that it came from. This can be confusing if there are multiple arrays. If you just use a string for loading a resource, it will be 0.
These will be listed here to help you make the decisions in the callbacks.
As we had noted in a prior example, there can be some times that we end up having to loading more than a single string all at once. Yepnope got its name from the ability to act on the outcome of a test, regardless. Your callback will often need to know how the test came out, without you needing to copy it and then run it again.
Here you will notice another example. Try to just assume that your browser will not be able to support geolocation, and that the ‘nope’ array is fully loaded.
This will bring about two separate alerts that you will notice, each of which contain the exact string, yet minus the prefixes of the url that got loaded in the ‘nope’ array. In a simple case, you may be able to check to find out which url is being loaded up to know to do something specific.
Taking this as an example, it is not going to be just like the previous one, as there is only one alert that is noted. Once the css has loaded, your url will then match in the if-statement and an alert will take place. Seeing how the ur of your ‘geolocation-polyfill .js’ file will not match, there is no alert.
Something else that you may need to know here is about the result of your test. This is the second parameter. If you wanted your alert to mention the styles that were loaded, you may try something that goes like this:
When you take a look at it, this is an example that might seem to be a tad bit unrealistic, but it can actually help you to picture exactly how you can work on using these in whatever your application might be. You might think it is cumbersome to have to repeat these urls of the files you load to write callback functions on them. We completely agree. There can be a wide variety of options that are available to you if you need unique callbacks for scripts. The first is simple, but a bit longer for writing.
Since Yepnope has the ability to successfully support a range of test objects, all that you will need to do is simply separate file declarations.
While it may actually be a bit long, and once all of the files rely on the same test, you still will never want to have to have to go through and rerun the feature test for each of the files that you want to load, simply based on its result. You can use key/value mapping to name your resources. The ‘key’ variable will then allow you to hopefully know exactly what files the callback will be related to.
There is a lot more that you need to know with a succinct way for knowing which of the files the callback is related to. As you could expect, the code you have to write in order to find each key can get ugly rather fast. We also allow you to put out a key value set for the callbacks. This will help you to be able to get the formulation correct.
Just using the specific keys that are actually going to completely match up to any of your files that got loaded will get called. In this particular case, when the geolocation used was not completely supported, you will actually find that the ‘rstyles’ callback will not fire and this can cause an issue for you and your coding.
We never want to come off in this tutorial as though it is some sort of way to read your mind, but we also understand you are asking now that you have split up the callbacks, how can I just run code at the end once everything is loaded?