/* MINDFIRE BLOG */

Introduction

In the rapidly evolving world of web development, the last 15 years have been a testament to remarkable progress and innovation. From the monolithic web pages of the early 2000s to the interactive, dynamic applications we witness today, the transformations have been astounding. A great deal of this evolution is owed to JavaScript, the programming language of the web that has been at the forefront of making the web more interactive and user-friendly.

15 years ago, libraries like jQuery, Lodash, Ember.js, Axios, and others were considered the indispensable cornerstones of JavaScript-based projects. They offered functionalities that JavaScript natively lacked, allowing developers to work around various inconsistencies in web browsers and JavaScript itself. However, clinging to these approaches today is akin to clinging to the relics of a bygone era. The tools and techniques from 15 years ago are no longer the best way to build web applications, as the web has evolved significantly, and so has JavaScript.

Today, many of the features that these libraries provided are inherent in modern JavaScript, rendering the need for these libraries redundant. This transformation enables developers to write more efficient, streamlined code and reduces the extra overhead that comes with incorporating these libraries into projects. This shift reflects not just the evolution of JavaScript, but also the web as a whole, highlighting the importance of adaptation in the rapidly changing landscape of web development.

This article aims to demonstrate this shift from dependence on these libraries to modern JavaScript, highlighting examples that provide insights into how the same functionalities can be achieved with plain JavaScript.

The Rise and Fall of jQuery

jQuery was a revolution when it was first introduced. It brought unprecedented ease to tasks such as DOM manipulation, event handling, and AJAX calls. Browser inconsistencies were a significant issue at the time, and jQuery leveled the playing field by providing a simple, consistent API across all browsers. It would be hard to overstate the impact jQuery made on JavaScript development. It was the cornerstone for a very, very long time!

Here's an example of how jQuery simplified DOM manipulation:

// jQuery
$('#element').addClass('highlight');

However, modern JavaScript now includes much of the functionality that jQuery provided:

// Modern JavaScript
document.querySelector('#element').classList.add('highlight');

With the advent of ECMAScript 2015 (ES6), JavaScript incorporated several features that significantly reduced the need for jQuery. ES6 introduced QuerySelector, which is just as efficient as jQuery at selecting DOM elements. Moreover, functions such as forEach, filter, map, and reduce have essentially made jQuery's utility functions obsolete.

The Redundancy of Lodash

Similar to jQuery, Lodash was introduced to bridge the gap between JavaScript's limitations. It provided a plethora of utility functions for tasks involving arrays, numbers, objects, strings, etc.

For example, the .filter function from Lodash was handy for filtering arrays:

// lodash
const users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred', 'active': false }
];
_.filter(users, function(o) { return !o.active; });

However, JavaScript now has a built-in Array.prototype.filter function that can do the same thing:

// Modern JavaScript
const users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred', 'active': false }
];

users.filter(user => !user.active);

As such, Lodash's previously essential role in JavaScript projects is now diminished, with modern JavaScript providing native methods for most of Lodash's utilities.

Die Ember, Die! I mean use JavaScript instead

Ember.js was another product of JavaScript's limitations. It's a robust framework that facilitated building ambitious web applications. It provided a comprehensive solution for data management, application flow, and user interfaces.

Here's a snippet showing a simple Ember.js application:

// Ember.js
App = Ember.Application.create();

App.Router.map(function() {
  this.route('about');
});

But today, we have advanced JavaScript frameworks like React, Angular, and Vue.js, which offer more flexibility, efficiency, and speed in web application development. They also encourage component-based architecture, which makes code more reusable and easier to maintain.

// Modern JavaScript with React
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import About from './About';

function App() {
  return (
    <Router>
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

These modern frameworks have, to a significant extent, rendered Ember less attractive for many developers.

Moment.js vs. Modern JavaScript and the Date Object

For a long time, Moment.js has been the go-to library for handling dates and times in JavaScript. It provided a simple, expressive API to parse, manipulate, and display dates and times. Here is an example of how Moment.js might be used:

// Moment.js
var moment = require('moment');

var date = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log(date); // outputs something like 'June 21st 2023, 1:15:20 pm'

While Moment.js is still somewhat useful, many of its features have been incorporated into modern JavaScript, particularly with the built-in Date object and other internationalization APIs. Here's how you can accomplish the same with modern JavaScript:

// Modern JavaScript
const date = new Date();
console.log(date.toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }));
// outputs something like 'June 21, 2023, 1:15:20 PM'

While the Date object has always been a part of JavaScript, it has become more robust and capable over the years. It now supports a wide range of functionalities, including parsing dates, setting/getting date components, and formatting dates. Moreover, for more complex operations, Internationalization API (Intl.DateTimeFormat) can be leveraged.

Additionally, if you need timezone support, which was one of the main reasons to use Moment.js, you can now use Intl.DateTimeFormat:

// Modern JavaScript
const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZone: 'America/Los_Angeles', timeZoneName: 'short' };
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// outputs something like 'June 21, 2023, 1:15:20 PM PDT'

It's also worth noting that Moment.js is now considered a legacy project in maintenance mode. The Moment.js team itself recommends using other, more modern libraries like Luxon or date-fns for newer projects. These libraries provide similar functionalities but are more lightweight and modular, aligning well with the modern trends in JavaScript development.

As JavaScript continues to evolve, it is reducing the need for external libraries like Moment.js by incorporating more and more functionalities natively. This allows developers to write more efficient code and reduces the extra overhead that comes with incorporating external libraries into projects. It also demonstrates the versatility and power of modern JavaScript, which is more capable and flexible than ever before.

Axios Vs Fetch API

Axios has been a popular choice for making HTTP requests. It's easy to use, supports older browsers, and automatically transforms JSON data. But it really offers no additional value over the modern JavaScript fetch API, but it's included in nearly as many projects as jQuery!

Here's an Axios request:

// Axios
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });

But with the introduction of the Fetch API in modern JavaScript, making HTTP requests has never been simpler:

// Modern JavaScript Fetch API
fetch('/user?ID=12345')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Fetch API is a powerful, flexible, and efficient alternative to Axios, further demonstrating how modern JavaScript eliminates the need for additional libraries.

Conclusion

JavaScript has experienced a transformative journey from being a language reliant on libraries to one that is robust and complete on its own. With the constant evolution of JavaScript and the introduction of ES6 and beyond, developers can accomplish the same tasks once necessitating libraries like jQuery, Lodash, Ember, and Axios directly within JavaScript.

Eliminating these libraries isn't only about writing more efficient and streamlined code, but it's also about enhancing safety and debuggability. Modern JavaScript provides more secure, reliable operation, reducing the risk of incorporating third-party libraries that might be compromised. Also, debugging becomes more straightforward with plain JavaScript as developers can directly interact with native features and syntax, eliminating the convoluted debugging processes that some libraries entail.

While these libraries, and many others, played a crucial role in their time and continue to do so for certain legacy projects, their importance has undeniably diminished for modern JavaScript development. By understanding and leveraging the capabilities of modern JavaScript, developers can now write more efficient, scalable, and maintainable code without the extra overhead of these libraries.

This, of course, does not undermine the contribution of these libraries. They were integral in shaping the modern JavaScript landscape and served as a driving force for the adoption of many features that are now natively supported in JavaScript. It's a testament to the ongoing evolution of web development and a clear indication of what the future holds: a JavaScript ecosystem that's becoming more potent and autonomous.

Embracing this shift doesn't just mean ditching old tools; it's about understanding the evolving needs of web development, enhancing the safety and debuggability of applications, and adapting to these new realities. After all, staying adaptable is what has kept JavaScript relevant through all these years, and it's what will keep it thriving in the years to come.

So now you know why every time you directly use jQuery in a project, a unicorn does! Won’t you consider the poor unicorn the next time you start a JavaScript project?

Did I forget your favorite obsolete JavaScript framework, leave a comment below.

Do you have a JavaScript project that you need help with? Let’s chat!