Appendix A. DOM Scripting Libraries
Throughout the book you've focused on learning the basics of the DOM. You used the standard set of DOM methods to perform common tasks and learned how best to apply those methods in your scripts. You may have noticed that sometimes your code was a little verbose and repetitive. Restricting yourself to only DOM methods such as document.getElementById
can get tiring, especially when libraries provide almost magical functions like $
that do even more.
Libraries are packages of reusable code that offer a number of advantages.
Their code has been tested and proven by a large user base.
They can easily fit into your existing development frameworks.
They provide quick, elegant solutions for most of your mundane day-to-day DOM scripting tasks, reducing multiple lines of code down to a single function.
They provide cross-browser solutions so you don't have to worry about every different browser.
Libraries free you to work on the good stuff in your applications, vastly increasing your productivity. They are wonderful, but using a library is not the bandage for every problem.
Libraries are created by others, not you. That means you might not understand what's going on inside and dealing with bugs or problems may be more difficult.
To use a library, you need to include that library along with your scripts. This adds another request to your page load and may use up valuable bandwidth.
Mixing and matching libraries can lead to conflicts or a lot of redundant features.
Libraries can also become a crutch if you never venture beyond them. Before diving in, be sure to take the time to actually learn both JavaScript and the DOM as you have in this book. Since , I've emphasized the necessity of learning how things work and not simply what they do. There are many wonderful libraries out there, some of which I'll point out here, but having no understanding of what's going on behind the scenes will be detrimental to both you and your web application. Without that deeper understanding, you'll be lost in the small details that a library often assumes you already know.
Just to be clear, I'm not personally affiliated with any of these libraries, so I have no personal bias towards one or the other. I'm also not saying these libraries are ultimately the best for every situation nor are they the only ones available. These examples simply provide some of the cleanest alternative solutions for tasks you've already worked through in the book.
We're going to revisit some of the topics you've already seen, including these:
You'll see how libraries can handle these tasksoften with much less code for youleaving more time to focus on business logic instead of repetitive boring scripting.
Note
Each library can accomplish pretty much every task in one way or another, so I'll point out one or two methods that I consider the best or most useful for each areaI won't be covering every aspect of each library, so be sure to check the documentation for each to find out what else is available.
Before you begin to work with libraries, it's important to choose the right one. Let's look at a few things that might help you decide.
Choosing a library
When you decide it's time to investigate a library, the biggest problem is choosing among the hundreds that are available. There are several criteria you should consider in your decision:
Does it have all the features you're looking for? Mixing and matching libraries can be problematic. Common methods such as $()
or get()
often use the same syntax but handle things differently. Additionally, if you use more than one library at the same time, you'll usually end up with a lot of duplicated features and redundant code.
Does it have more features than you need? Having too few features is one problem, but a bulky library with way too many is also a problem. When a library has more features than you need, or you're not taking advantage of them all, you may want to consider a lighter version that won't take as long to download. This is especially important in mobile environments.
Is it modular? Libraries with abundant features often work around file size by modularizing features into different files. This lets you minimize file size by loading only the files and features you need. Most of the time, you'll have to be sure to include all the necessary files, but a few libraries may offer a dynamic loading mechanism where you only need to include one file and that file will fetch others as necessary. Just be careful about the number of requests you anticipate. Often one large request is better than several smaller ones.
Is it well supported? Lack of an active developer community means no bug fixes or feature improvements. Also, having many eyes looking at and sharing the same library means fewer bugs and more reliable results. A good community behind the library brings not only fixes and features but also a lot of support when you run into a problem and need more help.
Does it have documentation? Without documentation, you'll be lost. Sure, you might come across some example that others have hacked together, but a lack of official documentation usually indicates a lack of enthusiasm by developers and thus a project that may be going nowhere.
Does it have the right license? Just because you can view the source online doesn't mean it's free for the taking. Before using a library, verify that its license covers what you intended to do with it and that you've met any special requirements.
Once you've chosen an appropriate library and you're producing great things, don't forget to try to contribute back to the community! These libraries are all built by dedicated developers who are often working with what little spare time they have to improve the tools you use daily. If you can't help with development efforts or bug testing, you could always provide examples and tutorials or simply help build the documentationany effort is helpful and will make the library even better.
A few libraries
For this Appendix I've selected a few examples based on the preceding criteria as well as general popularity and a bit of personal preference. Most examples use jQuery but there are several other libraries with similar features. Each has its own pros and cons as outlined here.
jQuery (http://jquery.com
) describes itself as "a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." jQuery's extremely powerful selection method, chaining syntax, and simplified Ajax and event methods will make your code compact and easy to follow. There is also a very large community behind jQuery with a number of different plug-in developers who've added features beyond the library basics.
Prototype (http://prototypejs.org
) describes itself as "a JavaScript Framework that aims to ease development of dynamic web applications." Prototype has a number of great DOM-manipulation functions as well as one of the more popular Ajax objects. It was one of the first popular JavaScript libraries and was the library that originated the