Vanilla JS: Embracing the Fundamentals for Cleaner Code

When it comes to building web applications, frameworks and libraries like React, Vue, and Angular often steal the spotlight. However, there’s a growing appreciation for Vanilla JS—plain, unadorned JavaScript that serves as the backbone of every web project. In this post, we’ll explore the advantages of using Vanilla JS and share some best practices to help you write efficient, maintainable code.

Why Choose Vanilla JS?

1. Lightweight and Fast

Without the extra overhead of frameworks, Vanilla JS offers a faster load time and reduced file size. This means less data for users to download and a smoother, more responsive experience overall.

2. Deep Understanding of JavaScript

Working directly with JavaScript encourages a deeper understanding of its core concepts. By mastering the fundamentals, you gain the flexibility to build robust solutions without being limited by the abstractions of libraries or frameworks.

3. Greater Control and Flexibility

Vanilla JS gives you complete control over your code. You can structure your application exactly as you see fit, without needing to conform to a framework’s conventions. This can be especially beneficial for small projects or when performance is a key concern.

4. No Dependency Lock-In

Relying on external libraries can sometimes lead to compatibility issues or the need for frequent updates. With Vanilla JS, you’re free from the constraints of third-party dependencies, making your codebase more future-proof and easier to maintain.

Best Practices for Writing Vanilla JS

Write Modular Code

Breaking your code into smaller, reusable modules makes it easier to maintain and test. With ES6 modules, you can import and export functionality as needed:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3

Use let and const Instead of var

Modern JavaScript offers let and const for block-scoped variable declarations. This not only helps avoid issues with hoisting but also makes your code more predictable:

const PI = 3.14159;
let radius = 10;
let area = PI * radius * radius;

Embrace the Power of the DOM API

Instead of reaching for jQuery or another library to manipulate the DOM, learn the native methods. Functions like document.querySelector(), document.createElement(), and addEventListener() are powerful tools when used correctly.

Practice Event Delegation

For dynamic content, attach a single event listener to a parent element instead of multiple listeners on individual elements. This can improve performance and simplify your code:

document.querySelector('#parent').addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    // Handle the click event for .child elements
  }
});

Keep Your Code DRY (Don’t Repeat Yourself)

Refactor repetitive code into functions or modules. This not only reduces the chance of bugs but also makes your code easier to update and extend.
Follow a Consistent Coding Style

Using a linter like ESLint can help enforce best practices and maintain consistency across your codebase. Adopting a style guide (such as Airbnb’s or StandardJS) ensures that everyone on your team writes clean, readable code.

Optimize Performance

Pay attention to performance bottlenecks. Use browser dev tools to profile your code and identify areas for improvement. Whether it’s minimizing DOM reflows or optimizing loops and function calls, every little bit helps.
Conclusion

Vanilla JS is more than just the foundation of web development—it’s a powerful tool that, when mastered, offers unparalleled control and efficiency. By embracing the fundamentals and following best practices, you can write code that is not only clean and maintainable but also highly performant.

Ready to dive deeper into the world of Vanilla JS? Keep experimenting, refactoring, and learning. The more you understand the core language, the better equipped you’ll be to build innovative web applications without unnecessary bloat.

Happy coding!

Comments

[Peter Vivo]

My advice is use const instead of var. My experience is just on a rare ocassion need to use let.
As you written well instead function best to use arrow function which is course to declare as const.
For vanilla JS type safe will use JSDoc: dev.to/pengeszikra/jsdoc-evangelis...

[Aad Pouw]

It's all true but 'and what I learned ' , it begins with a proper structure first otherwise you will end up with a mess.
The heart of your brews should be let say an 'index.js'.
This file should have an 'async iife', where all brews are coming together.
Then behind that there should be a folder structure that groups the different types of tasks and so on!