dev.to

Learning JS frameworks with me(Part 1)

Introduction I gotta admit. When I first started working with JavaScript, I found the native DOM API frustrating. Selecting elements felt 'त्रास'(troublesome), event handling was inconsistent across browsers, and animations required writing dozens of lines of code. Then I discovered jQuery, and it felt like someone had handed me a superpower. "Write less, do more" wasn't just jQuery's tagline—it was a revolutionary promise that transformed how an entire generation of developers (myself included) approached frontend development. Despite being created back in 2006, jQuery's influence is so profound that its patterns are still visible in modern frameworks today. As I continue my journey through JavaScript frameworks, I'm taking you along for the ride. Today, we're exploring jQuery—the framework that democratized dynamic web development and paved the way for everything that followed. The Rise and Reign of jQuery Before diving into code, let's understand why jQuery became the dominant force in frontend development for nearly a decade. In the mid-2000s, web development was a nightmare of browser inconsistencies. I remember building my first interactive websites and maintaining separate codebases for Internet Explorer, Firefox, and the emerging Chrome browser. Each had its own quirks, bugs, and implementation differences. jQuery emerged as a solution to a very real problem: write once, run everywhere. Its creator, John Resig, built a sleek abstraction layer that normalized browser differences behind a consistent, intuitive API. The result? jQuery adoption exploded. At its peak, jQuery powered over 70% of the top 10 million websites on the internet. Even today, despite the rise of modern frameworks like React and Vue, jQuery remains on approximately 77% of all websites using JavaScript libraries. Why jQuery Still Matters in 2025 You might be wondering: "With all these modern frameworks, why should I bother learning jQuery?" Great question! Here's why I believe understanding jQuery remains valuable: Legacy Codebase Maintenance: Countless websites and applications still run on jQuery. During my first dev job, I inherited a 50,000-line jQuery codebase that powered a critical business application. Conceptual Foundation: jQuery introduced patterns that influenced React, Vue, and other modern frameworks. Understanding where these ideas originated gives you deeper insight into why modern frameworks work the way they do. Lightweight Solution: Sometimes a full framework is overkill. I still reach for jQuery when building simple websites that need a touch of interactivity without the overhead of a larger framework. WordPress Integration: If you work with WordPress (powering ~40% of the web), jQuery comes bundled with it and is deeply integrated into its ecosystem. Job Market Reality: Browse job listings and you'll still see jQuery mentioned frequently, especially for roles maintaining established systems. Setting Up Your First jQuery Project Let's get our hands dirty with some actual code. I'll walk you through setting up a project using the same basic structure we used in our vanilla JS exploration. Step 1: Create Your Project Structure jquery-project/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js Step 2: Set Up Your HTML File jQuery Task List My jQuery Task App Task List Add Task Step 3: Use The Same CSS For this project, we'll use the exact same CSS from our vanilla JS project. If you haven't read that post yet, you might want to check it out to understand the styling we're applying to our task app. Step 4: The jQuery Magic Now here's where things get interesting. Remember all that vanilla JavaScript code we wrote for our task manager? Let's rewrite it using jQuery and see the difference: // js/main.js $(document).ready(function() { // Get DOM elements with jQuery const $taskForm = $('#task-form'); const $taskInput = $('#task-input'); const $taskList = $('#task-list'); // Load tasks from localStorage let tasks = JSON.parse(localStorage.getItem('tasks')) || []; // Render initial tasks renderTasks(); // Add task event $taskForm.on('submit', function(e) { e.preventDefault(); const taskText = $taskInput.val().trim(); if (taskText === '') return; // Create new task object const task = { id: Date.now(), text: taskText, completed: false }; // Add to tasks array tasks.push(task); // Save to localStorage saveTasksToStorage(); // Render tasks renderTasks(); // Clear input $taskInput.val('').focus(); }); // Event delegat

Mar 9, 2025 - 20:42
 0
Learning JS frameworks with me(Part 1)

Introduction

I gotta admit. When I first started working with JavaScript, I found the native DOM API frustrating. Selecting elements felt 'त्रास'(troublesome), event handling was inconsistent across browsers, and animations required writing dozens of lines of code. Then I discovered jQuery, and it felt like someone had handed me a superpower.

"Write less, do more" wasn't just jQuery's tagline—it was a revolutionary promise that transformed how an entire generation of developers (myself included) approached frontend development. Despite being created back in 2006, jQuery's influence is so profound that its patterns are still visible in modern frameworks today.

As I continue my journey through JavaScript frameworks, I'm taking you along for the ride. Today, we're exploring jQuery—the framework that democratized dynamic web development and paved the way for everything that followed.

The Rise and Reign of jQuery

Before diving into code, let's understand why jQuery became the dominant force in frontend development for nearly a decade.

In the mid-2000s, web development was a nightmare of browser inconsistencies. I remember building my first interactive websites and maintaining separate codebases for Internet Explorer, Firefox, and the emerging Chrome browser. Each had its own quirks, bugs, and implementation differences.

jQuery emerged as a solution to a very real problem: write once, run everywhere. Its creator, John Resig, built a sleek abstraction layer that normalized browser differences behind a consistent, intuitive API.

The result? jQuery adoption exploded. At its peak, jQuery powered over 70% of the top 10 million websites on the internet. Even today, despite the rise of modern frameworks like React and Vue, jQuery remains on approximately 77% of all websites using JavaScript libraries.

Why jQuery Still Matters in 2025

You might be wondering: "With all these modern frameworks, why should I bother learning jQuery?"

Great question! Here's why I believe understanding jQuery remains valuable:

  1. Legacy Codebase Maintenance: Countless websites and applications still run on jQuery. During my first dev job, I inherited a 50,000-line jQuery codebase that powered a critical business application.

  2. Conceptual Foundation: jQuery introduced patterns that influenced React, Vue, and other modern frameworks. Understanding where these ideas originated gives you deeper insight into why modern frameworks work the way they do.

  3. Lightweight Solution: Sometimes a full framework is overkill. I still reach for jQuery when building simple websites that need a touch of interactivity without the overhead of a larger framework.

  4. WordPress Integration: If you work with WordPress (powering ~40% of the web), jQuery comes bundled with it and is deeply integrated into its ecosystem.

  5. Job Market Reality: Browse job listings and you'll still see jQuery mentioned frequently, especially for roles maintaining established systems.

Setting Up Your First jQuery Project

Let's get our hands dirty with some actual code. I'll walk you through setting up a project using the same basic structure we used in our vanilla JS exploration.

Step 1: Create Your Project Structure 

jquery-project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

Step 2: Set Up Your HTML File 


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>jQuery Task List<span class="nt">
     rel="stylesheet" href="css/style.css">
    
    


    

        
My jQuery Task App

    


    

         class="todo-app">
            
Task List

             id="task-form">
                 type="text" id="task-input" placeholder="Add a new task..." required>
                 type="submit">Add Task
            
             id="task-list">