6 concepts you should know as a Front-end developer

If you are a beginner in front-end development, then chances are that you might only assume that front-end development only deals with HTML, CSS and JavaScript to add functionality to your web pages. While that is true, it is essential as a front-end developer to understand some key concepts so that you could manage your application’s performance and usability in a better way.

Below are some of the concepts which must be understood to become a better developer overall. These concepts help you think outside of the library/framework paradigm. These concepts hold true to any framework or library.

1.) Server side rendering :

In this process, the server forms the required HTML and also the dynamic data, then sends it to the client as a complete page. The client just renders the received HTML page.

Benefit of this approach : This results in faster initial load times

2.) Client side rendering :

In this process, the server sends only an initial. HTML file to the client. Client then uses JavaScript to manipulate or update the contents.

Benefit of this approach : This results in more interactive and responsive user interface.

3.) Caching :

This is by far the trickiest, yet most important concept. If you are familiar with backend development already, then you might have about this word “Cache” a lot. In short, caching is nothing but storing and reusing the data which is not changed frequently.

Here is an example to demonstrate caching (Please note that this is not how data is cached in real world applications)

// Cache object
const cache = {};

// Function to get data with caching
async function getDataWithCache(key) {
  // Check if data is in cache
  if (cache[key]) {
    console.log("Returning cached data");
    return cache[key];
  }

  // If not in cache, fetch data and store in cache
  console.log("Fetching new data");
  const data = await fetchData();
  cache[key] = data; // Store data in cache
  return data;
}


(async function() {
  const key = "myData";

  const data1 = await getDataWithCache(key); // Fetches data
  console.log(data1);

  const data2 = await getDataWithCache(key); // Returns cached data
  console.log(data2);
})();

4.) Debouncing :

Simply put, debouncing is a where you delay the execution of a function until a certain amount of time is passed. This is very helpful in scenarios where events are triggered on mouse click, hover, key up etc. In all these scenarios, there is a chance of executing the function multiple times. To avoid multiple executions, debouncing is used.

// Debounce function
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
}

// Example usage
const onKeyUp = debounce((text) => {
  console.log("Fetching data for:", text);
}, 300);

// Simulate user typing
onKeyUp("H");
onKeyUp("He");
onKeyUp("Hel");
onKeyUp("Hell");
onKeyUp("Hello");  // Only this call will trigger the function after 300ms

5.) Throttling :

Throttling is similar to debouncing. In Throttling, no matter how many times an event is fired, the execution is guaranteed to happen only once.

// Throttle function
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

// Example usage
const handleScroll = throttle(() => {
  console.log("Scrolled!");
}, 1000);

// Attach throttled function to scroll event
window.addEventListener("scroll", handleScroll);

6.) Service-worker :

There is often a misconception that JavaScript is not anything similar to Multithreading in Java, Coroutines in Kotlin, Goroutines in Go, but this is not the case. Even though JavaScript is single threaded, by using Service worker, you can achieve similar results as using Multiple threads. Service workers are used to compute the tasks at the background which should not be blocking the user interface.