What if you could use a resource loader that only loads the scripts users need? This is precisely what yepnope does. This asynchronous conditional resource loader is extremely fast and only loads the scripts that are needed.
Yepnope 1.5 – whats new?
- A few changes have been made to the new version of yepnope. If two scripts have the same URL, they will not be executed twice but callbacks will fire in the right order.
- A complete function will behave like a callback function thanks to the recursive yepnope feature.
- An official plugin is used for CSS load callbacks since few users needed them. Your old code will still work properly but callbacks will fire on CSS if you don’t use the CSS load plugin.
- You can now access the injection functions since we decided to expose yepnope.injectJs as well as yepnope.injectCss.
- You can now use value pairs and keys in prefixes.
- There is a new built-in profix that allows you to override the yepnope.errorTimeout by setting a specific timeout for each script.
- We improved the way CSS files are detected even if the CSS prefix plugin is not used.
- You can now write filters and prefixes and you can choose arbitrary attributes for the script and link tags.
- The old demo/ folder is gone and we now use the test folders for new features.
- If you use compress scripts, we are assuming that you use closure compilers and uglifyjs.
- Yepnope can not create keys automatically if you do not want to create your own labels for different resource callbacks.
- You can also run tests locally now
The Yepnope API
You need to know a few things before using yepnope. There are five different functions that you can use and you need to familiarize yourself with them.
The yepnope function is the main one. It was designed to make your life easier. You can use this function with an array of test objects. This isa consistent function that was created to make your code lookbetter and to help you maintain it.
If you are only working with one test group, there is no need to create an array. You can just use an object. And if you like simplicity, your best option is to use a string.
You can have test objects inside of your array. You can even have arrays inside of an array or string literals. All you have to do is send what you have and yepnope will be able to work with it, as long as yu have a string, array or a test object.
What Should You Put In Your Test Objects?
This is a very valid question. There are many different things you can put in your test object before sending it to yepnope. Keep in mind that these properties are optional and that you can use as many or as few of them as you want.
You can use yepnope to load JS or CSS files. If you do not use the .css extension, a resource will be considered as a JS file. The latest version of yepnope, yepnope 1.5, can detect cachebusting query parameters for your CSS files. If you do not use .css extensions for your files, download the CSS prefix plugin that can be found in the github repository. Add the plugin at the end of your yepnope file.
Why Should You Use Yepnope And Not Another Script Loader?
There are so many new script loaders out there. I think it is great that there are many options to choose from. The fact that there are many script loaders shows that there are many benefits associated with using script and resource loaders. The yepnope prototype was first introduced in November 2010 at the JSConfEU. We have been improving it since then by using the best techniques other script loaders rely on and by creating a comprehensive API that is easy to use.
You should know about the advantages of using yepnope and also understand in which cases yepnope might not be your best option.
The pros of using yepnope:
– yepnops.js is a small file (1.7 kb) compared to other similar loaders.
– There is a full test suite in QUnit that can be run in different browsers. We always run it with TestSwarm when testing a new browser.
– You choose when your resource is executed and can easily change the order since yepnope decouples preloading and execution.
– The API is very easy to use and allows you to access resources.
– yepnope is a modular resource loader. This means you can easily add customized functionalities. You will also find a few examples that show you how to create your own prefixes and filters.
– The API is designed to help you only load the resources that are needed. Yepnope is not the fastest script loader, but it could still be the most performing one by only loading what you need.
– Integration with Modernizr is supported.
– Things are executed in the order you list them. This is an advantage if you have a specific order you want to follow. You have the possibility to override this functionality if you use a different system for your priorities.
– Yepnope supports resource fallbacks and you can use it to download a dependent script in parallel with your first script.
Yepnope will load jQuery is serial, which can be slow and not very convenient. You will also wait for jQuery to execute if another action depends from it or if something else comes after jQuery. However, yepnope can download ‘jquery.plugin.js’ right away in parallel with the google cdn version of jQuery. The downloads will occur simulatneously and the scripts will be executed in order. You will have to wait for the second jQuery to load if fallback is needed. This is where the decoupled preloading and executing functionality is an advantage.
There are a few things you need to keep in mind about yepnope:
– Yepnope is not the fastest resource loader. You can use labjs or other script loaders if you need a tool that is optimized for speed. Run some tests to determine which loader is the best option for you.
– You need to use proper cache headers. Some loaders are able to rely on local resources if there are no proper cache headers.
– Yepnope does not have a lot of features compared to RequireJS and other tools with larger libraries. If you need to design and maintain an application from scratch, you will be better off with RequireJS or another similar tool with more functionalities and an API.
– Things are executed in the order they are listed by default. This can slow things down and might now be an ideal option for you.
It is important to choose the right script loader for your application. You should go over the documentation carefully to get a better idea of the different situations in which yepnope.js would not be an ideal choice. However, yepnope is a good option if you need a tool that is easy to use and has built-in functionalities.
Send us an email or a tweet if you have any questions about yepnope. You will find that script loader authors do not compete against each other and we will be glad to help you find the right tool for your needs. We have been using RequireJS and LABjs for some of our projects because they are awesome script loaders and won’t push yepnope if this isn’t the right tool for you.