As a new developer, the number of libraries and frameworks available can be overwhelming.
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!
Let’s start with libraries!
jQuery: An Old Classic (But Is It Obsolete?)
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.
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.
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 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.
Nevertheless, Lodash and Underscore are excellent libraries that are especially helpful for any FP apps.
D3.js: For Graphing and Visualizations
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!
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.
It uses components, which help encapsulate code and state. Using components makes it easy to construct complicated user interfaces.
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.
Glimmer.js: 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!
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).
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.
Angular and AngularJS: Google's Framework
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.
Ember.js: The Batteries-Included Framework
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.
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 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.
Check it out if this sounds interesting to you!
Vue.js: The Progressive Framework
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.
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.
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.
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.