Many modern websites are data driven. News sites, for example, must constantly refresh their content, making it impossible to reconfigure the setup every few seconds to support these changes. The Data Driven Documents, or D3.js, library is unique in that it puts the data first. The screenshot below shows just a few of the many data presentations you’ll find in D3.js’ visual index:
Clicking an entry in the visual index takes you to a detail page where you can see a full view of the data presentation (shown below), as well as the underlying code and the data used to create the presentation:
The site provides full-fledged examples designed to help you understand the power of the library.
The main advantage of this library is its extremely flexible handling of content. The flip side, however, is that D3.js doesn’t deliver a lot of pizzazz. If you’re working on an e-commerce site, for example, rather than merely presenting information, this library may not be the best choice. In addition to extreme flexibility, D3.js’ relatively streamlined presentation helps improve speed by eschewing a lot of the baggage other libraries use to create bedazzling presentations. And if you find that D3.js is still a bit too much for your needs, consider Chart.js, a smaller library dedicated to providing charting.
jQuery has earned its long-running status as the reigning ruler of the webpage. Many sites still use jQuery for basic Document Object Model (DOM) manipulation for three essential reasons:
- jQuery is incredibly easy to learn. It provides more examples than most libraries, so there is a really good chance you’ll find an example that demonstrates exactly how to accomplish your specific task.
- jQuery is incredibly fast. Because it focuses on performing specific tasks well, jQuery makes it possible to perform those tasks quickly.
- jQuery has a huge installed base. It also has significant amount of community support and project contributors.
You can expect this library to be around for the long haul. The additional development time also means the documentation is quite polished. As you can see below, the documentation breaks topics down into easily understood pieces and you can then delve into additional detail as needed:
Of course, nothing is perfect. For example, there are times when jQuery doesn’t work quite the same across multiple browsers. JQuery is up front about these concerns, and you can find information about browser support on the site.
Finally, unlike other libraries, jQuery isn’t a complete solution. You need another product, such as jQuery UI (see the next entry) to build a complete application. It’s important to realize that your site will be more modular and dependent on more libraries when working with jQuery (which isn’t necessarily a bad thing).
3. jQuery UI
jQuery UI is just one of many add-ons for jQuery, but it’s the one you see most often, which is why we’ve included it here. You use jQuery UI to add basic graphic elements to your application after you incorporate jQuery. The jQuery UI library comes with all sorts of interesting widgets, such as accordions, sliders, tooltips, and datepickers, that make it possible to configure your application to provide useful services.
You can drill down to particular widgets or other controls to see how they work. A page typically contains the control at the top, followed by directions for use and sample code. As with jQuery, you begin with a simple example but drill down as needed to see additions you can make.
This library stands out for several reasons. Most important, JQuery UI works with just about any browser, so users are less likely to complain that your application doesn’t work as expected. jQuery UI also offers a vast number of add-ons. For example, while jQuery UI lacks a time picker, you can get add-ons to perform that task from places such as trentrichardson.com/examples/timepicker.
The one issue with the jQuery group of libraries is that they have gotten big … really big. Sometimes a library simply gets to be too feature rich. The size of JQuery libraries can make them slow to load on smaller devices. Alternative third-party libraries such as Granim.js and Multiple.js have sprung up to provide a subset of jQuery features, sometimes with a focused set of additional features, with significantly faster load times.
Form validation is an essential task. Because data is now so often analyzed by machines, clean data is more essential than ever. Cleaning the data after the fact is time consuming and never as accurate as getting the user to provide correct information in the first place.
Even the supposedly simple validation shown below contains many different validation types, along with the code required to perform the task. It’s amazing how easy it is to accomplish most common validations. (You won’t need heavy coding unless you’re trying to validate complex data.)
The testing functionality provided by many libraries leaves much to be desired. Even if you use a script, manual testing of complex applications is bound to be cumbersome and time consuming—if it can even find all the errors.
You can even use QUnit to test QUnit (assuming you’d ever want to do so)!
Usually considered a library, React is sometimes referred to as a framework. In the context of the Model-View-Controller (MVC) approach to creating large-scale applications, React provides the view portion. It doesn’t assume anything about the underlying technology stack that you’re using to model or control the data. All React is interested in is displaying the data on screen. With this in mind, it doesn’t rely on the browser Document Object Model (DOM), but instead uses a light virtual DOM that displays the information quickly. One of the best things about React is that it’s declarative, which means you tell the framework what you want to do, not how to do it.
The price you pay for the speed and ability to use MVC is some degree of added complexity. Even a small component requires quite a bit of code (as demonstrated by the examples on the React site). What you gain is flexibility and speed when working with really large projects.
Glimmer is a great library that helps with UI components and DOM rendering. It’s built using Ember CLI and uses Git, Node.js, npm, and Yarn. So if you’re looking for a tool to generate components and helpers, help with project layouts, and streamline your process, check out Glimmer.
If you’re playing around with creating interesting background visuals, you should definitely check out Multiple.js. It allows you to share a background image across multiple elements using CSS, which creates a really interesting visual effect. There’s a great example on the site that gives you a glimpse of some possibilities and how it works. Check it out!
Slick is here to solve all of your carousel needs. It’s fully responsive, has tons of options, works with swipe gestures for mobile devices, and so much more. You can even sync two different carousels if you want, to create a stacked effect. Check out the site for some examples.