Are you looking for a JS library or framework but don’t know where to start?
Then this article is for you!
What is the difference between a library and a framework?
A library fulfills one or more functionalities thanks to reusable pieces of code. By using a library, you reuse code that other developers have already implemented.
A framework is a set of libraries that allow you to do more things.
A library can consist of several functions/objects/methods/components, depending on the language.
For example, React.JS is a library because React needs ReactDOM and many other libraries to work.
A framework offers a more comprehensive set of features for your project.
For example, Angular is considered a framework because, with it, you have everything you need.
Let’s start with the libraries!
It was created in 2006 by John Resig and is present everywhere on the Internet. By some estimates, over 77.7% of all known websites use jQuery.
That’s hundreds of millions of websites.
What is jQuery?
jQuery is a library used primarily for Document Object Model (DOM) manipulation.
The DOM is a tree structure that represents all the elements of an HTML page.
jQuery, therefore, makes it possible to interact with the elements of a web page in a much more efficient and optimized way than normal JS.
The library is still present on most websites and I use it myself to interact with web pages via the console of the web browser I use.
The jQuery library can select DOM elements, create animations, handle events, and add, modify, and remove nodes. Its goal is to be extensible, simple, and clear to use.
Should I learn jQuery in 2023?
Also when using a more complete library or framework, the use of jQuery is no longer necessary. And even worse, jQuery’s event handling can interfere with that of your favorite framework.
As a new web developer, you should at least learn the basics of jQuery. You will most certainly come across older codebases that use jQuery, and jQuery sometimes comes in handy in other scenarios.
2. Underscore and Lodash
In 2009, Jeremy Ashkenas created Underscore.
One of Underscore’s most powerful features is its functional programming aids. For instance,
reduce are among the most popular.
Functional programming is a programming paradigm that avoids state change and data mutation. Functional Programming has become increasingly popular over the past few years.
In 2012, Lodash had its first release. John-David Dalton created this library for the purpose of improving Underscore.
In the process, Lodash became an Underscore overlay with more features and better documentation. Today, most developers have switched from Underscore to Lodash.
This library was developed in 2011 from a previous project called Protovis in order to make it more expressive than its predecessor and more in line with current web standards.
The creators of D3.js are Mike Bostock, Jeff Heer, and Vadim Ogievetsky
D3.js is a great tool for creating custom visualizations. It can 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, like those found in jQuery. After selecting an element in the DOM, you can perform all sorts of transitions and manipulations on it.
If you intend to do visualization, whatever it is, this is the JS library to look at!
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 worldwide.
React (or React.js as it’s sometimes called) is an open-source library maintained by Facebook.
React has a lot going for it, and it’s a library you shouldn’t miss if you’re interested in front-end web development.
React works on the principle of “reactivity”, you can imagine this concept by imagining an Excel or Google Sheets table, when you modify a cell, the other cells that depend on it update directly.
React is also very popular for the component systems (components) it offers developers, with which you can develop independent UI elements such as buttons that you can then reuse in your different projects or share with other developers.
This equally means that you can use components from other developers!
In addition to developing ultra-optimized websites by following all the latest industry standards, you can also develop mobile, desktop, VR, and AR applications and much more!
It was developed by the same people who created Ember.js and was released in early 2017.
Glimmer.js was built by the Ember team as an answer to developers who wanted something smaller and lighter than Ember.js.
As discussed during the EmberConf 2017 keynote, Tom Dale heard some of the criticism leveled at Ember.js and was inspired to build Glimmer.js.
Glimmer.js features lighter components and reduced size, and it uses the robust Ember CLI.
It can be used with Ember.js as a component, it can work standalone or be added as a web component to an existing application.
Bootstrap is an open-source front-end framework that helps you design websites.
It was originally named Twitter Blueprint and was developed by Mark Otto and Jacob Thornton while working at Twitter. Its first initial version dates from 2011.
Bootstrap’s greatest strength is how easily non-designers can build quality websites quickly. Not to mention that Bootstrap makes it easy to create responsive designs (websites that dynamically adjust according to the screen size of the device used: tablets, mobile phones, etc.).
Bootstrap has come under some criticism. One of them is due to its popularity, many websites built with Bootstrap look very similar, which makes it more difficult to create a unique website.
If you’re starting to learn web development but aren’t interested in the design aspect, take a look at Bootstrap.
7. Angular and AngularJS
AngularJS is a front-end framework that helps you build web applications. It is also a SPA framework similar to React or Ember.js.
AngularJS uses “directives” which can be inserted into the HTML to give more functionality to the application.
Angular, sometimes known as Angular 2+, is an open-source TypeScript-based front-end framework. This is a complete rewrite of AngularJS. It is more modular, it recommends the use of TypeScript and simpler expression syntax.
At first, many people feared that Google would abandon Angular 1 when Angular 2+ was released. Fortunately, it seems that the two projects are maintained.
This construction tool offers everything you need to get started.
Do you need a router? It is integrated.
Do you need tests? It is also integrated.
Need to work with data from a back end? There is Ember Data.
Ember.js follows many of the same principles as Ruby on Rails. It is very flexible and prefers conventions to configuration.
Aurelia is a front-end, open-source framework created by Rob Eisenberg. Aurelia 1.0 was first released in 2016.
Aurelia allows you to build SPAs like React, Angular, and Ember.js. It is powerful and composable. You can use one or all of its different modules to build your application. It also offers a route system.
Aurelia is a very avant-garde framework. It uses a lot of new ECMAScript features and encourages you to write your code using these new features.
One of Vue’s greatest strengths is its progressiveness. In other words, you can gradually add Vue to your application. Unlike AngularJS and Ember, you can easily combine Vue in your projects.
Some of its features include components, templates, and transitions along with a focus on responsiveness.
Other JS Libraries and Frameworks
In addition to the main frameworks we have seen in this article, there are many more or less popular alternatives.
Learning one or the other therefore comes down to choosing according to what you want to do or the job offers that interest you if you are looking for a job as a developer.
Here is a list of some JS libs and frameworks you may come across:
Still more JS libraries and frameworks
When new developers ask me which tool to choose, I tell them to start with a library like React and go from there.
However, don’t try to do everything at once: choose an easy library or framework and master it. You don’t need to learn them all. You just need to learn at least one “thoroughly” in order to create your first complex projects or find your first job.