< !-- Digital window verification 001 -->

10 JavaScript Libraries and Frameworks You Should Know About

| Get awesome (and free) stuff here


As a new developer, the number of libraries and frameworks available can be overwhelming.

How do you know which ones you should learn to use? Which will be most useful in your coding career? In this special guest post, Erik Hanchett gives us an overview of his top ten JavaScript libraries and frameworks.

Here’s Erik!

—-

In this post we’ll be discussing 10 JavaScript libraries and frameworks. I’ve tried to pick some of the most popular frameworks and libraries, plus a few you may not have heard before.

This list is intended to serve as an introduction for beginners, so you can get an idea about what’s out there and why you should use these libraries and frameworks. When working as a web developer you have a lot of options, which makes it important to know what options are available.

Table of Contents

What's the Difference: Libraries vs. Frameworks

A question I hear quite often is “What’s the difference between a library and framework?” That’s a good question, and there has been a lot of a discussion on it online. I'll cover the differences briefly but you can find some more in-depth guides here, here, and here.

Generally, a library is a reusable piece of code that oftentimes has one primary use case. A library can consist of several functions/objects/methods, depending on the language. Your application can “link” to a library to allow you access to that functionality.

On the other hand, a framework has more control of your app. It helps direct you on the architecture and the project that follows. Frameworks consist of multiple libraries and they provide you with hooks and callbacks, so you can continue to build upon them.

Both are useful and it’s a good idea to experiment and see which ones work best for you.

Do you have a library or framework that you like that I haven’t covered? Leave a comment below!

Libraries

Let’s start with libraries!

jQuery: An Old Classic (But Is It Obsolete?)

In the JavaScript world, jQuery is still, by far, one of the most prolific and popular libraries out there. It was released in 2006 by John Resig and has been used in websites throughout the world. In some estimates over 50% of all known websites use jQuery. That’s hundreds of millions (if not billions) of websites.

So what is jQuery? jQuery is a library used primarily for Document Object Model (DOM) manipulation. The DOM is a tree-like structure that represents all elements on a webpage.

jQuery can select DOM elements, create animations, handle events, and more. Its goal is to be extensible, simple, and clear to use. It takes care of all cross-browser incompatibilities, and it promotes the separation of HTML and JavaScript.

Should you use jQuery? Well, it depends. Some websites insist that jQuery is no longer needed. Modern browsers have greatly improved their DOM Application Programming Interfaces (API). In the past, you might have used jQuery to do simple query selections. You can now easily do that with plain old JavaScript.

Furthermore, with the popularity of single-page-application (SPA) frameworks it doesn’t make sense to use jQuery in many circumstances. For example, most SPAs have some sort of event handling built in. Using jQuery could cause more harm than good in these cases.

At the very least, you should learn the basics of jQuery as a new web developer. You will almost certainly run into older code bases that use jQuery, and it does come in handy in other scenarios from time to time.

Head back to the table of contents »

Underscore and Lodash: Utility Libraries

In 2009, Jeremy Ashkenas created Underscore. Underscore is a utility library that consists over 100 functions. These functions will help you manipulate arrays, objects and other functions.

One of the most powerful features of Underscore is its functional programming helpers. For example, map, filter and reduce are some of the most popular. Functional programming (FP) is a programming paradigm that avoids changing state and mutating data. FP has become increasingly popular in the last few years, but it’s beyond the scope of this article today.

In 2012, Lodash had its first initial release. John-David Dalton created this library to have a more consistent cross-environment iteration support for arrays, strings, and argument objects.

In the process, Lodash has become a superset of Underscore with more features and better documentation. Today most developers have moved over to Lodash from Underscore. Even many of the contributors to Underscore now work on Lodash.

There is concern that Lodash is no longer needed as JavaScript has evolved. As the JavaScript standard evolves, new releases have included some of the utilities that you used to only be able to get from external libraries like Lodash and Underscore.

Nevertheless, Lodash and Underscore are excellent libraries that are especially helpful for any FP apps.

Head back to the table of contents »

D3.js: For Graphing and Visualizations

D3.js is a JavaScript library for visualizing data. This library was developed in 2011 from a previous project called Protovis. Mike Bostock, Jeff Heer, and Vadim Ogievetsky developed D3.js to be more expressive than its predecessor and more compliant with current web standards.

D3.js is a great tool when creating custom visualizations. This could be something as simple as a bar chart, or as complex as a 3D surface plot. The library has a powerful API that uses selectors, much like the ones you would see in jQuery. After selecting an element in the DOM you can do all sorts of transitions and manipulations.

D3 4.0, the latest version of D3, is a collection of 30 different modules. Each has a different purpose. Some make it easy to work with colors; others work with dragging-and-dropping SVG elements.

If you’re looking to do any sort of visualisation, this is the library to check out!

Head back to the table of contents »

React: Facebook's Favorite Library

In March 2013, Jordan Walke released React while working at Facebook. Since then, React has become one of the most popular front-end libraries and is used in hundreds of thousands of websites around the world.

React (or React.js as it’s sometimes called) is a open-source library backed by Facebook. It’s used to help create small- or large-scale web applications, and is particularly useful in creating interactive websites. Its tag line is “A JavaScript Library For Building User Interfaces”.

React is sometimes called a SPA, or single-page application. This term refers to web applications that can fit on a single web page and don't require constant refreshes from the web browser. Content is loaded dynamically when needed using JavaScript.

It uses components, which help encapsulate code and state. Using components makes it easy to construct complicated user interfaces.

React uses JSX, which is an XML-like syntax that combines JavaScript and HTML. It’s not a templating language; it’s full-on JavaScript. Some new developers might find JSX a little confusing at first. However, after working with it for a while you’ll understand how beneficial it is. For example, JSX makes it easy to wrap JavaScript expressions directly inside your HTML.

React has a lot going for it, and it’s definitely a library you should look out for if you’re into front-end web development.

Head back to the table of contents »

Glimmer.js: UI Components for the Web

Glimmer.js is a relative newcomer to the JavaScript library ecosystem. It was developed by the same people who brought you Ember.js and was released early in 2017. Its tagline is “Fast and light-weight UI components for the web”.

Glimmer.js was built by the Ember team as a response to developers who wanted something smaller and lighter weight than Ember.js. As discussed during the EmberConf 2017 keynote, Tom Dale heard some of the criticism of Ember.js and used that to help construct Glimmer.js.

Glimmer.js features lighter components and a smaller size, and it uses the robust Ember CLI. It can be used with Ember.js as a component, it can run standalone, or it can be added as a web component to an existing application.

We are in the early days of Glimmer.js, but I’m excited to see where it goes!

Frameworks

Now we’ll take a look at frameworks.

Bootstrap: For Those of Us Who Dislike Design

Bootstrap is an open-source front-end framework to help you with designing websites. On the Bootstrap website, the tagline is “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web”.

It was originally named Twitter Blueprint and was developed by Mark Otto and Jacob Thornton while they worked at Twitter. Its first initial release was in 2011.

Bootstrap greatest strength is how easy it is for non-designers to quickly create decent-looking websites. Not to mention, Bootstrap makes it easy to create responsive designs (websites that adjust dynamically according to the device used: tablets, mobile phones etc).

It features a number of CSS styles, icons, components, and JavaScript plugins. These plugins include a lot of common things you might use when building a website. This includes modals, dropdowns, alerts, and buttons, to name a few.

There has been some criticism of Bootstrap. One criticism I see a lot is that because of its popularity, there are a lot of websites built on Bootstrap that look very much alike, making it harder to build a unique-looking website. Keep that in mind.

If you’re starting to learn web development but aren't into the design aspect, check out Bootstrap.

Head back to the table of contents »

Angular and AngularJS: Google's Framework

AngularJS, also known as AngularJS 1.x, is an open-source JavaScript framework created and maintained by Google. Its initial release was in 2010.

AngularJS is a front-end framework that helps you create web applications. It’s also a SPA framework similar to React or Ember.js.

AngularJS uses directives that can be inserted into the HTML to give the application more functionality. It also supports two-way data binding.

Angular, sometimes known as Angular 2, is a TypeScript-based open-source front-end framework. It’s a complete rewrite of AngularJS. It’s more modular, it recommends the use of TypeScript, and a simpler expression syntax.

At first, a lot of people were worried that Google would abandon Angular 1 when Angular 2 came about. Fortunately, it seems that both projects are being maintained.

So what should you start with, Angular 1 or Angular 2? I would recommend starting with 1, since there are a lot more jobs out there for 1 right now. In general, Angular is a great framework to look into if you're a new dev.

Head back to the table of contents »

Ember.js: The Batteries-Included Framework

Ember.js is a open-source JavaScript framework that was initially released in 2011 by Yehuda Katz. It was initially known as SproutCore 2.0 before it came to be known as Ember.js.

It’s no secret that Ember.js is one of my favorite frameworks. I even wrote a book on it! The main thing I liked about Ember is its “batteries included” mentality. Ember features an excellent build tool, that many other SPA frameworks have borrowed, called Ember CLI.

This build tool offers everything you need to get started. Need a router? It’s built in. Need testing? That’s built in too. Need to work with data from a back-end? There is Ember Data.

Ember.js follows many of the same principals that Ruby on Rails has. It’s highly opinionated, flexible, and prefers convention over configuration.

Ember.js is just getting better, and I’d highly recommend it.

Head back to the table of contents »

Aurelia: The Forward-Looking Framework

Aurelia is a front-end, open-source framework created by Rob Eisenberg. Aurelia 1.0 was first released in 2016.

Aurelia's tagline is “A JavaScript framework for mobile, desktop, and web, leveraging simple conventions and empowering creativity”.

Aurelia is another SPA like React, Angular, and Ember.js. It’s powerful and composable. You can use one or all of its different modules to create your application. It offers routing, two-way data binding as well.

Aurelia is a very forward-thinking framework. It uses a lot of newer EcmaScript features (EcmaScrict helps dictate JavaScript standards), and encourages you to write your code using these new features. This is a good thing, since you're not learning a custom syntax that will only work with Aurelia.

Check it out if this sounds interesting to you!

Head back to the table of contents »

Vue.js: The Progressive Framework

Vue.js is an open-source progressive JavaScript framework created initially by Evan You in 2014 while he was working for Google. Since then, Vue.js has changed a lot. It’s been rewritten and refined into a great SPA.

One of Vue’s greatest strengths is its progressiveness. In other words, you can progressively add Vue into your application. Unlike AngularJS and Ember, you can easily mix and match Vue into projects.

Some of its features include components, templates, transitions, and two-way data binding, as well as a focus on reactivity.

Reactivity occurs when you change or update any of Vue’s JavaScript objects. This in turn will update the Vue’s templates. Vue.js uses something called a Shadow DOM that makes rendering the page fast.

I’ve had a lot of time to work on Vue. In fact, I’ve been working on a book on it! If you made it this far, I want to give you the first chapter of my book. Click here and sign up, and I’ll send you information on how to get it. I’ll also be sending out exclusive deals.

Head back to the table of contents »

TL;DR

For those of you that are new to web development – you’ll be hearing a lot of cynical people talk about how the JavaScript world has become too fast paced. They’ll groan that new libraries and frameworks are coming out too quickly, and that everyone is trying to do the same thing.

They aren’t wrong that it's fast-paced, but that shouldn’t stop you from going out and learning about these frameworks and libraries. I’ve only given you a taste of each one. It’s up to you to pick one up and start learning.

When I mentor new developers, I recommend that they pick a team. After you learn the basics (HTML, JavaScript, and CSS) you have a lot of choices. Don't try to do everything at once, though: pick one framework and get good at it. You don’t need to learn them all. You just need to learn at least one so you can get your foot in the door somewhere.

Good luck!

References

https://w3techs.com/technologies/details/js-jquery/all/all
https://github.com/oneuijs/You-Dont-Need-jQuery#query-selector
https://en.wikipedia.org/wiki/JQuery
http://blog.xebia.com/you-might-not-need-lodash-in-your-es2015-project/
https://en.wikipedia.org/wiki/Lodash
https://github.com/lodash/lodash

About the Author

Erik Hanchett is a software developer, YouTuber, blogger, and sushi aficionado. He's been writing code for over 10 years. Erik's authored two books, the Ember.js Cookbook and the soon to be released Vue.js in Action.  He currently resides in Reno, Nevada, with his wife and two kids. You can find more information from Erik at his blog http://www.programwitherik.com.