DEV Community

Cover image for JavaScript Libraries and Frameworks with Examples
Jayashree
Jayashree

Posted on

JavaScript Libraries and Frameworks with Examples

#webdev #javascript #react #beginners

What is a Library?

A Library is a collection of pre-written code that helps developers perform specific tasks quickly.

Example:
When riding a bike, you decide where to go and how to ride.

You are in control.

1. React

What is React?

React is a JavaScript library used to build User Interfaces (UI).

Developed by: Meta

Real-World Example

In Instagram:

  • Navbar
  • Stories
  • Posts
  • Comments

Each section can be created as a separate component.

function Header() {
  return <h1>Instagram</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Why Use React?

  • Reusable Components
  • Fast Rendering
  • Virtual DOM
  • Easy State Management

Companies Using React

  • Meta
  • Netflix
  • Airbnb

Example Projects

  • Social Media Apps
  • E-commerce Websites
  • Dashboards
  • Chat Applications

2. jQuery

What is jQuery?

jQuery is a JavaScript library that simplifies DOM manipulation and event handling.

Without jQuery

document.getElementById("btn").style.color = "red";
Enter fullscreen mode Exit fullscreen mode

With jQuery

$("#btn").css("color", "red");
Enter fullscreen mode Exit fullscreen mode

Why Use jQuery?

  • Less Code
  • Easy DOM Manipulation
  • Easy Event Handling
  • Animations

Example Uses

  • Button Click Events
  • Form Validation
  • Show/Hide Elements
  • Animations 
$("#btn").click(function () {
  alert("Button Clicked");
});
Enter fullscreen mode Exit fullscreen mode

3. Lodash

What is Lodash?

Lodash is a utility library that provides helpful functions for working with arrays, objects, and data.

Example

Remove duplicate values from an array:

const arr = [1, 2, 2, 3, 3];

_.uniq(arr);
Enter fullscreen mode Exit fullscreen mode

Output:

[1, 2, 3];

Common Functions

  • _.uniq();
  • _.sortBy();
  • _.filter();
  • _.groupBy();
  • _.find();

Real-World Uses

  • Data Filtering
  • Sorting
  • Searching
  • Data Transformation

4. Axios

What is Axios?

Axios is a library used to make HTTP requests to APIs.

Example

axios.get("/users")
  .then((response) => {
    console.log(response.data);
  });
Enter fullscreen mode Exit fullscreen mode

Why Use Axios?

It helps the frontend communicate with the backend.

Real-World Example

Login Form
    ↓
  Axios
    ↓
   API
    ↓
Database
Enter fullscreen mode Exit fullscreen mode

Common Methods

  • axios.get();
  • axios.post();
  • axios.put();
  • axios.delete();

Used In

  • React
  • Angular
  • Vue
  • Next.js

5. Chart.js

What is Chart.js?

Chart.js is a library used to create charts and graphs.

Example Data

January = 100
February = 200
March = 300

Chart.js converts this data into visual charts.

Chart Types

  • Bar Chart
  • Pie Chart
  • Line Chart
  • Doughnut Chart

Real-World Uses

  • Sales Reports
  • Dashboards
  • Analytics Systems
  • Student Result Portals

What is a Framework?

A Framework provides a complete structure and rules for building applications.

Example:

Library = Ingredients

Framework = Complete Recipe + Cooking Rules

6. Angular

What is Angular?

Angular is a full-featured frontend framework.

Developed by: Google

Technologies Used

  • TypeScript
  • HTML
  • CSS

Features

  • Routing
  • Forms
  • API Integration
  • Dependency Injection
  • State Management

Project Structure

src
 ├── app
 │    ├── components
 │    ├── services
 │    └── routing
Enter fullscreen mode Exit fullscreen mode

Real-World Uses

  • Banking Applications
  • ERP Systems
  • Enterprise Software

7. Vue.js

What is Vue.js?

Vue.js is a lightweight and easy-to-learn frontend framework.

Example

<p>{{ name }}</p>
data() {
  return {
    name: "John"
  };
}
Enter fullscreen mode Exit fullscreen mode

Output:

John

Why Use Vue?

  • Easy Learning Curve
  • Lightweight
  • Fast Development

Real-World Uses

  • Dashboards
  • Admin Panels
  • Small and Medium Websites

8. Next.js

What is Next.js?

Next.js is a framework built on top of React.

Problem with React

SEO can be challenging in traditional React applications.

Next.js Solution

  • Server-Side Rendering (SSR)
  • SEO Optimization
  • File-Based Routing
  • API Routes

Routing Example

app/
  about/
    page.js
Enter fullscreen mode Exit fullscreen mode

URL:

/about

Real-World Uses

  • Blogs
  • E-commerce Websites
  • Business Websites
  • Portfolio Sites

9. Express.js

What is Express.js?

Express.js is a backend framework for Node.js.

Example

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello World");
});
Enter fullscreen mode Exit fullscreen mode

Why Use Express?

  • Build APIs Quickly
  • Handle Requests and Responses
  • Connect Databases
  • Implement Authentication

Real-World Flow

React
   ↓
Axios
   ↓
Express API
   ↓
Database
Enter fullscreen mode Exit fullscreen mode

Common Uses

  • REST APIs
  • CRUD Applications
  • Authentication Systems

10. NestJS

What is NestJS?

NestJS is a TypeScript-based backend framework.

It provides a structured architecture for large applications.

Architecture

UserModule
UserController
UserService
Enter fullscreen mode Exit fullscreen mode

Request Flow

Request
   ↓
Controller
   ↓
Service
   ↓
Database
Enter fullscreen mode Exit fullscreen mode

Why Use NestJS?

  • Clean Architecture
  • TypeScript Support
  • Scalable Applications
  • Enterprise-Level Development

Real-World Uses

  • Banking Systems
  • Enterprise APIs
  • Large Backend Applications

Quick Summary

Technology Purpose
React Build User Interfaces
jQuery DOM Manipulation
Lodash Utility Functions
Axios API Calls
Chart.js Charts and Graphs
Angular Full Frontend Framework
Vue.js Lightweight Frontend Framework
Next.js React Framework with SEO
Express.js Backend API Development
NestJS Enterprise Backend Development

Easy Memory Trick

Frontend

  • React
  • Angular
  • Vue.js
  • Next.js

Backend

  • Express.js
  • NestJS

Helper Libraries

  • Axios → API Calls
  • Lodash → Utility Functions
  • Chart.js → Charts
  • jQuery → DOM Manipulation

A common Full Stack flow is:

React / Next.js
       ↓
     Axios
       ↓
 Express / NestJS
       ↓
    Database
Enter fullscreen mode Exit fullscreen mode

Top comments (0)