Forem: Ray

How to Optimize Your JavaScript Code for Better Performance

Ray — Wed, 18 Jan 2023 00:25:56 +0000

TL;DR:

Minimize the use of global variables
Use the right data structures
Avoid unnecessary function calls
Use the spread operator instead of .concat()
Use lazy loading
Avoid using too much DOM manipulation
Use a linter

By following these tips, you can improve the performance of your JavaScript code, and ensure that your users have a smooth and responsive experience.

JavaScript is a powerful and versatile programming language that is used to build everything from simple websites to complex web applications. However, as your JavaScript codebase grows, it's important to pay attention to performance to ensure that your users have a smooth and responsive experience.

Here are a few tips to help you optimize your JavaScript code for better performance:

1. Minimize the use of global variables

Global variables can slow down your code by taking up unnecessary memory space. Instead, try to use local variables as much as possible and avoid using global variables.

For example:

let globalVariable = "I am a global variable";

function myFunction() {
  let localVariable = "I am a local variable";
  console.log(localVariable);
}

console.log(globalVariable);
myFunction();

2. Use the right data structures

Different data structures are optimized for different types of tasks. For example, if you need to perform a lot of insertions and deletions, an array is probably not the best choice. Instead, consider using a linked list or a hash table.

For example:

let array = [1, 2, 3, 4, 5];

array.splice(2, 0, 6);
console.log(array);

The above code will insert the number 6 in the index 2 of the array, but the time complexity of this operation is O(n) that's why it's not efficient.

3. Avoid unnecessary function calls

Function calls can be costly in terms of performance. To minimize the number of function calls, try to use higher-order functions like .map() and .reduce() instead of for loops.

For example:

let numbers = [1, 2, 3, 4, 5];

let doubleNumbers = numbers.map(function(num) {
  return num * 2;
});

console.log(doubleNumbers);

In this case, the function passed to the map() method is called only once for each element of the array, instead of calling it in a for loop.

4. Use the spread operator instead of .concat()

The spread operator (...) is faster than .concat() when concatenating arrays.

For example:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let concatenated = [...array1, ...array2];
console.log(concatenated);

5. Use lazy loading

Lazy loading is a technique where you only load the resources you need, when you need them. This can greatly improve the performance of your web application, especially on mobile devices.

For example:

let images = document.querySelectorAll(".lazy-load");

const lazyLoad = (target) => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute("data-lazy");

        img.setAttribute("src", src);
        img.classList.add("fade");
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

images.forEach((image) => {
  lazyLoad(image);
});

This example uses the IntersectionObserver API to load images only when they become visible in the viewport. This can significantly improve the performance of the website, especially on mobile devices.

6. Avoid using too much DOM manipulation

Manipulating the DOM can be slow, especially when you do it frequently. Try to minimize the amount of DOM manipulation you do, and use a library like React or Vue.js to handle it for you.

For example:

let element = document.querySelector('#my-element');

// using vanilla JavaScript
element.innerHTML = '<p>Hello World</p>';

// using React
const element = <div>Hello World</div>;

In this example, React will handle the DOM manipulation for you, which can greatly improve the performance of your app.

7. Use a linter

A linter is a tool that checks your code for potential errors and performance issues. A linter can catch problems early on, before they become a performance bottleneck.

For example:

// using ESLint

npm install eslint --save-dev

// create a configuration file

npx eslint --init

By following these tips, you can improve the performance of your JavaScript code, and ensure that your users have a smooth and responsive experience.

How I Went from Vanilla HTML, CSS, and JS to Next.js and Why You Should Too

Ray — Tue, 17 Jan 2023 11:22:50 +0000

When I first started building web applications, I was using vanilla HTML, CSS, and JavaScript. I was able to create some basic websites and even some simple interactive features, but as my projects grew in complexity, I found myself struggling to keep everything organized and maintainable.

That's when I discovered Next.js.

Next.js is a framework for building React-based web applications. It provides a set of features that make it easy to build scalable, high-performance web apps, such as server-side rendering, automatic code splitting, and static site generation.

One of the biggest advantages of using Next.js is that it allows you to easily organize your code. Instead of having all of your HTML, CSS, and JavaScript in a single file, you can use Next.js's file-based routing to separate your code into different pages and components.

For example, in a vanilla HTML, CSS and JS setup, you might have something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="home">
        <h1>Welcome to my website!</h1>
        <p>This is the home page.</p>
      </section>
      <section id="about">
        <h1>About me</h1>
        <p>I'm a web developer.</p>
      </section>
      <section id="contact">
        <h1>Contact me</h1>
        <form>
          <label for="email">Email:</label>
          <input type="email" id="email" required>
          <label for="message">Message:</label>
          <textarea id="message" required></textarea>
          <input type="submit" value="Send">
        </form>
      </section>
    </main>
    <footer>
      <p>Copyright © 2020 My Website</p>
    </footer>
  </body>
</html>

With Next.js you can break it down in different files:

- pages/
  - index.js
  - about.js
  - contact.js
- components/
  - header.js
  - footer.js

And in those files you have your JSX and styles.

Another benefit of using Next.js is that it allows you to take advantage of server-side rendering (SSR). With SSR, your app's initial HTML is generated on the server, which means that the first load of your app is faster and more SEO-friendly.

Next.js also makes it easy to do static site generation (SSG). This is a great way to build fast, lightweight, and secure websites that can be hosted on a CDN. With SSG, you can pre-render your pages at build time, and then serve the static HTML to the user. This means that you don't need to run any server-side code, which can greatly reduce the cost and complexity of deploying your app.

Here's an example of how to use static site generation in Next.js:

import { getStaticProps } from 'next/static'

export const getStaticProps = async () => {
    // Fetch data from an external API or database
    const data = await fetchData()

    // Pass the fetched data to the props
    return {
        props: {
            data
        }
    }
}

const Home = ({ data }) => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                {data.map(item => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    )
}

export default Home

Finally, one of the best things about using Next.js is its fast reloading feature 🔥. With traditional web development, you might have to wait several seconds for your changes to show up in the browser. But with Next.js, your changes are reflected almost instantly 🤯. This makes the development process much more efficient and enjoyable 😎. So, if you're tired of waiting around for your changes to compile, give Next.js a try and experience the lightning-fast reloads for yourself! 🚀

All in all, I highly recommend giving Next.js a try. Whether you're a beginner or an experienced developer, you'll find that it makes building web apps faster, easier, and more enjoyable. With Next.js you can take advantage of the benefits of React and its ecosystem, while leveraging the features that Next.js provides, such as file-based routing, server-side rendering and static site generation.