Explore top JavaScript libraries and frameworks like jQuery, Lodash, React, Angular, and Vue.js to accelerate development and build dynamic web applications.
Nobody writes everything from scratch. The moment you need to manipulate the DOM, wrangle a date, or build a screen that updates itself, you reach for something someone else already built. That is what Day 13 of our 30 Days of JavaScript series is about: the libraries and frameworks that do the heavy lifting so you can focus on your actual product. We will look at six of the big ones, what each is good at, and where each one bites you. By the end you will know which tool fits which job, and just as important, when you do not need one at all.
Table of Contents
- jQuery: the one that shaped the web
- Lodash: the utility belt
- Moment.js: dates, with a warning
- React: building interfaces
- Angular: the full framework
- Vue.js: approachable and flexible
- How to actually choose
- Conclusion
jQuery: the one that shaped the web
jQuery earned its place. For years it was the reason you could write one line and have it work the same in every browser, back when browsers agreed on almost nothing. It smooths over DOM manipulation, event handling, and AJAX with a syntax that takes an afternoon to learn.
Here’s a quick example of jQuery in action:
/**
* Hides an element when the button is clicked using jQuery.
*
* @returns {void}
*/
$("#hideButton").click(function(){
$("#element").hide();
});
Here is the honest part. Most of what made jQuery special is now built into the language and the browser. querySelector, classList, and fetch cover a lot of the old ground with no dependency at all. jQuery is not dead, and you will still meet it in plenty of running sites and WordPress themes, but you probably should not start a new project on it. Learn it so you can read the code you inherit, not so you can write more of it.
Lodash: the utility belt
Lodash is a bag of small, well-tested functions for the fiddly work: slicing and grouping arrays, digging safely into nested objects, deduping, deep-cloning. None of it is glamorous, and all of it is the kind of thing you would otherwise write wrong at 5pm on a Friday.
Here’s an example of Lodash in action:
/**
* Chunks an array into smaller arrays using Lodash.
*
* @returns {Array}
*/
var users = [1, 2, 3, 4, 5];
var groupedUsers = _.chunk(users, 2);
// Output: [[1, 2], [3, 4], [5]]
Import only the functions you use and Lodash stays small. But check the language first. Modern JavaScript has native map, filter, reduce, spread, and optional chaining, and for a lot of everyday tasks those are all you need. Reach for Lodash when a native equivalent does not exist or would be genuinely painful to write, not out of habit.
Moment.js: dates, with a warning
Dates in JavaScript are miserable, and for a long time Moment.js was the answer. It formats, parses, adds, subtracts, and handles time zones with a friendly API. You will find it in a huge number of older codebases for exactly that reason.
Here’s how you can format dates with Moment.js:
/**
* Formats today's date using Moment.js.
*
* @returns {void}
*/
var today = moment();
console.log(today.format('MMMM Do YYYY')); // 'June 3rd 2023'
Read this before you install it. The Moment.js maintainers themselves have declared it a legacy project in maintenance mode and openly recommend against using it for new work. No new features, no fix for its large bundle size, no immutable API. For anything new, use the native Intl.DateTimeFormat and Date, a smaller library like day.js or date-fns, or the new Temporal API as it lands. Moment still works, and you will maintain plenty of it, but do not add it to a fresh project.
React: building interfaces
React, maintained by Meta, is a library for building user interfaces out of components. You describe what a piece of UI should look like for a given state, and React keeps the screen in sync as that state changes. Its component model makes reuse natural, which is why it powers so many single-page apps.
Here’s an example of a simple React component:
/**
* Defines a React component that displays a greeting message.
*
* @returns {JSX.Element}
*/
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}One note on the example above: it is a class component. Modern React leans on function components and Hooks instead, so most new code you read will look different, but the idea of props and state is identical. React is a library, not a framework, which means routing, data fetching, and build tooling are your choices to make. That is freedom and it is also a learning curve, on top of JSX and state management. Powerful, but you assemble the rest of the stack yourself.
Angular: the full framework
Angular, from Google, is the opposite bet: a complete framework with routing, forms, HTTP, and testing built in and opinions about how you wire them together. One quick clarification, because people mix these up: the modern Angular shown here is not the old AngularJS. AngularJS (version 1) reached end of life in January 2022 and should not be used for anything new. When people say “Angular” today they mean the rewritten, TypeScript-based framework.
Here’s an example of an Angular component:
/**
* Angular component that displays a greeting message.
*
* @returns {void}
*/
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
name = 'Angular';
}Because so much is included and consistent, Angular pays off on large, long-lived apps with a team, where structure beats flexibility. The trade is real: more concepts up front, more ceremony, and a steeper climb for beginners than React or Vue. If your project is small, this is more scaffolding than you need.
Vue.js: approachable and flexible
Vue splits the difference. You can drop it into one corner of an existing page, or build a full single-page app with it. Its templates read like HTML, its reactivity is easy to follow, and most developers get productive fast. That gentle on-ramp is the whole appeal.
Here’s an example of Vue.js in action:
/**
* Creates a Vue instance that displays a message.
*
* @returns {void}
*/
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
Worth flagging: that new Vue() call is Vue 2 syntax. Vue 3 is the current major version and bootstraps with createApp instead, and it added the Composition API alongside the older Options API, which the team kept rather than replaced. The core idea in the example is unchanged. Vue is a genuine pleasure on small and medium projects; just plan your state management deliberately before it grows large.
How to actually choose
There is no winner here, only fit. Building a big, structured app with a team that values one blessed way to do things? Angular. Want a component-driven UI and freedom to pick the rest of your stack? React. Need to move fast or add interactivity to part of an existing page? Vue. Just poking at the DOM in an old codebase? jQuery is still fine. Heavy array and object wrangling? Lodash, once you have checked native methods first. And for dates, prefer the native tools or a modern library over Moment.js on anything new.
Conclusion
Day 13 was a tour of the tools that carry most of the JavaScript ecosystem. jQuery and Lodash smooth over the small stuff. Moment.js tamed dates, though its own maintainers now point you elsewhere. React, Angular, and Vue give you three different philosophies for building serious interfaces: a library you compose, a framework that includes everything, and a middle path you can grow into.
Pick by the job, not by the hype. Weigh project size, team experience, how long the code has to live, and how much you will have to maintain. The best tool is the one your team can use well and still understand a year from now, and sometimes that tool is plain JavaScript with no dependency at all.
What’s Next?
In Day 14, we get into Object-Oriented JavaScript. You will learn how objects, classes, and OOP principles help you structure code so it stays readable and maintainable as your projects get bigger. See you there.