Forem: Nicolas B.

How Javascript projects works : Deep dive into Transpilers, Bundlers, and More

Nicolas B. — Tue, 20 Aug 2024 07:00:54 +0000

Introduction

Understanding how a JavaScript project truly functions has always intrigued me. While many of us are proficient in writing code, not everyone can clearly explain what happens under the hood once the code is written.
In this article, we’ll explore how everything works behind the scenes.

Over 98.7% of websites use JavaScript.
Source: Radixweb

Overview

When you build your app, a lot of tools are cooking to provide a beautiful and performent app :

⚙️ The transpiler : It job is to ensure that your code works across different environments! Think of it as making sure your grandma’s old PC can handle your app without a hitch!
🦸🏻‍♂️ The bundler : Like a superhero, it optimizes your code, making it more efficient to load and execute. It bundles all your assets into a single file, reducing the number of requests your app has to make.
🏭 Task Runners : These are the Dark Knights of your development process. They automate routine tasks such as file minification (compressing code), compilation (converting SCSS to CSS), and image optimization. They save us from having to handle these tedious tasks manually.

These tools work together to create a streamlined development process, allowing developers to focus on building features rather than dealing with compatibility or performance issues.

Deep dive : How they work

When you build a project, the task runners orchestrate the process, coordinating the transpiler and bundler to ensure a streamlined and efficient build.

A transpiler, such as Babel, takes source code in modern Javascript (ES6+) or Typescript and transform it to a compatible Javascript for older browsers (ES5).

The bundler like Webpack takes all the files (Javascript, CSS, Images, etc...) and compiles them into smaller files or even a single file.
During this process, Webpack also optimizes the code by minimizing and compressing it, which reduces load times and improves performance.

But my project can work without these tools ?

Yes and No, you project can work if there is not a lot of complexity.
If you start to add complexity, the absence of these tools can lead to significant challenges :

Code Compatibility: Without a transpiler, your JavaScript code might not run correctly on older browsers, limiting your audience.
Performance: Without a bundler, your application may suffer from slower load times due to unoptimized code delivery.
Efficiency: Without a task runner, you would need to handle repetitive tasks manually, leading to inefficiencies and potential errors in the build process.

Example Workflow

1 - Write Modern JavaScript Code:
You write ES6+ or TypeScript in your source files.

2 - Run Build Command:
You execute a build command (npm run build) that triggers the transpiler.

-- Starting build process --
3 - Transpile Code:
The transpiler (e.g., Babel) converts your ES6+ code into ES5.

4 - Bundle Files:
The bundler (e.g., Webpack) then takes the transpiled files and combines them into a single or few optimized files.
-- End of the build process --

5 - Deploy:
The final bundled files are ready to be deployed to the server.

Task runners are not part of the build process itself but orchestrate it. They automate and manage tasks like transpilation and bundling by integrating with tools such as Babel and Webpack. Essentially, task runners streamline and coordinate the entire build process, ensuring tasks are executed in the correct sequence.

Thank you for reading 🚀

Unveiling the Hidden Gem of React: The Power of Compound Components

Nicolas B. — Thu, 14 Mar 2024 13:56:13 +0000

Introducing Compound Components: a transformative approach revolutionizing the development of design systems with a heightened focus on developer experience. In today's development landscape, where developer satisfaction is paramount, Compound Components offer unparalleled flexibility and streamline workflows within React applications.

Thanks

Before delving into the heart of the matter, I'd like to extend my heartfelt thanks to Tristan 🫶 from Ornikar 🚗 for introducing me to Compound Components. I greatly appreciate his insight into this fascinating aspect of React development. Thank you, Tristan, for this discovery!

Unleash Innovation in Design Systems

Prepare to embark on a journey into the heart of React's hidden gem: Compound Components. This captivating concept isn't just another tool in the developer's arsenal—it's a game-changer for design systems. By empowering developers with the ability to craft modular, customizable interfaces, Compound Components redefine the boundaries of what's possible in modern web development.

But what is this ?

Imagine you're building a house. Rather than stacking bricks haphazardly, you create modular parts that fit together harmoniously to form a coherent whole. With Compound Components, you're not just assembling UI elements—you're orchestrating an immersive user and developer experience. Each component serves as a building block, seamlessly integrating with its counterparts to create cohesive, dynamic interfaces.

Understanding Compound Components with examples

To truly grasp the power of Compound Components, let's compare examples with and without their utilization. We'll explore how Compound Components streamline development and enhance code organization.

Imagine a Modal where the header, the body and the footer is customizable :

Without Compound Components

export const Modal = ({ header, body, footer }) => {
  return (
    <div className="modal">
      <div className="modal-header">{header}</div>
      <div className="modal-body">{body}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}

In this approach, we've coded a component just for its style and to implement a precise layout.
Now if we want to use it, it will look like this :

<Modal
  header={<header>My title</header>}
  body={
    <div>
      <bold>My bold element</bold>
      <p>
        My text <span>with a span</span>
      </p>
    </div>
  }
  footer={
    <footer>
      <div>Element1</div>
      <div>Element2</div>
      <a href="#">My link</a>
    </footer>
  }
/>

You can see that in terms of developer experience, it's not great. It's heavy, it's ugly!

With Compound Components

Now, let's see how Compound Components offer a more flexible solution:

export const Modal = ({ children }) => {
  return (
    <div className="modal">
      {children}
    </div>
  );
}

Modal.Header = ({ children }) => {
  return (
    <div className="modal-header">{CHILDREN}</div>
  )
}

Modal.Body = ({ children }) => {
  return (
    <div className="modal-body">{children}</div>
  )
}

Modal.Footer = ({ children }) => {
  return (
    <div className="modal-footer">{children}</div>
  )
}

Now if you want to use your modal, you can use it like this :

<Modal>
  <Modal.Header>Title of the Modal</Modal.Header>
  <Modal.Body>Content of the Modal</Modal.Body>
  <Modal.Footer>
    <button onClick={closeModal}>Close</button>
  </Modal.Footer>
</Modal>

And you can choose whether or not to use certain elements :

<Modal>
  <Modal.Header>Title of the Modal</Modal.Header>
  <Modal.Body>Content of the Modal</Modal.Body>
</Modal>

By composing these Compound Components, we create a modal that's highly customizable and easily maintainable. Any changes to the modal structure, styling, or functionality can be made by simply adjusting the components' arrangement or adding/removing components, without touching their implementation details.

Conclusion

In conclusion, Compound Components provide a superior approach to building modular and customizable interfaces compared to traditional methods. By decoupling structure from implementation, Compound Components offer enhanced flexibility, code organization, and reusability. Incorporate Compound Components into your React projects to unlock their full potential and streamline your development workflow.

Unveiling the Power of the Visitor Pattern in JavaScript Development

Nicolas B. — Mon, 11 Dec 2023 07:30:00 +0000

Understanding the Visitor Pattern with a Real-World Development Scenario
Advantages of Using the Visitor Pattern
Conclusion

Within the realm of JavaScript development, design patterns serve as invaluable tools for crafting organized, maintainable, and efficient codebases. Among these patterns, the Visitor pattern emerges as a solution for handling complex object structures, allowing operations on various elements without altering their structure. Let's delve into a concrete example to understand how the Visitor pattern can be beneficial, especially for beginners in programming.

Understanding the Visitor Pattern with a Real-World Development Scenario

Scenario: Task Management in a Development Project

Imagine you're working on a project management application where different tasks need to be executed, such as developing features, fixing bugs, or optimizing code. Each type of task requires specific actions without altering the underlying structure of the tasks.

Implementing the Visitor Pattern

Let's leverage the Visitor pattern to manage different tasks without directly embedding the logic within the individual task classes.

Task Classes

class FeatureTask {
  accept(visitor) {
    visitor.visitFeature(this);
  }
}

class BugFixTask {
  accept(visitor) {
    visitor.visitBugFix(this);
  }
}

class OptimizationTask {
  accept(visitor) {
    visitor.visitOptimization(this);
  }
}

// Visitor to perform actions on tasks
class TaskVisitor {
  visitFeature(featureTask) {
    // Perform specific actions for feature task
  }

  visitBugFix(bugFixTask) {
    // Perform specific actions for bug fix task
  }

  visitOptimization(optimizationTask) {
    // Perform specific actions for optimization task
  }
}

Applying the Visitor Pattern

Let's see how the Visitor pattern operates in our JavaScript application to perform actions on different project tasks.

Task Execution

// Project tasks
const featureTask = new FeatureTask();
const bugFixTask = new BugFixTask();
const optimizationTask = new OptimizationTask();

// Visitor to process tasks
const taskVisitor = new TaskVisitor();

// Processing different tasks
featureTask.accept(taskVisitor); // Perform actions for feature task
bugFixTask.accept(taskVisitor); // Perform actions for bug fix task
optimizationTask.accept(taskVisitor); // Perform actions for optimization task

Advantages of Using the Visitor Pattern

Separation of Concerns: Keeps the task processing logic separate from individual task classes, maintaining their focus on specific responsibilities.
Ease of Extension: Easily introduces new functionalities or operations for different task types without modifying existing task classes.
Ease of Maintenance: Modifications or updates in the processing logic can be centralized within the visitor class without impacting the task classes.

Conclusion

The Visitor pattern emerges as a powerful tool for manipulating complex object structures in JavaScript development, even for beginners in programming. By encapsulating operations within visitor classes, this pattern promotes maintainability, extensibility, and code flexibility.

Are you eager to explore design patterns like the Visitor pattern in JavaScript development? Let's connect on LinkedIn to discuss practical implementations and the advantages of design patterns.

Explore my portfolio for more examples showcasing the effective utilization of design patterns in real-world JavaScript applications.

Mastering the Visitor pattern empowers JavaScript developers to efficiently handle complex operations on object structures, fostering scalable and maintainable codebases.

🎄 Happy coding!

Stop this, use this instead : Top 5 best practices JS / React

Nicolas B. — Mon, 27 Nov 2023 15:59:33 +0000

1 - Optimizing Parameter Checks

❌ Stop this:

if (userRole !== 'admin' && userRole !== 'moderator' && userRole !== 'user') {
   console.error("Invalid user role")
}

✅ Use instead:

const allowedRoles = ['admin', 'moderator', 'user'];

if (!allowedRoles.includes(userRole)) {
        console.error('Invalid user role');
}

2 - useReducer for toggle states

❌ Stop this:

const [isModalVisible, setIsModalVisible] = useState(false)

setIsModalVisible((prevState) => !prevState)

✅ Use instead:

const [isModalVisible, toggleModalVisibility] = useReducer((currentValue) => !currentValue, false)

toggleModalVisibility()

3 - Destructured Objects as Parameters

❌ Stop this:

const processUserData = (firstName, lastName, age, email) => {
    ....
}

processUserData("Toto", "Tata", 35, "tototata@gmail.com");

✅ Use instead:

const processUserData = ({ firstName, lastName, age, email }) => {
    ....
}

processUserData({
    firstName: "Toto",
    lastName: "Tata",
    age: 35,
    email: "tototata@gmail.com"
});

4 - Efficient Object Cloning

❌ Stop this:

const originalObject = {
    key1: 'value1',
    key2: {
        key2a: () => console.log('value2a')
    }
}

const objectCopy = originalObject

✅ Use instead:

const originalObject = {
    key1: 'value1',
    key2: {
        key2a: () => console.log('value2a')
    }
}

const objectCopy = structuredClone(originalObject)
// or
const objectCopy = {...originalObject}

5 - Use Set to efficiently manage unique values

❌ Stop this:

const uniqueItemsArray = ['Apple', 'Banana', 'Orange', 'Banana', 'Apple'];

// Adding new items to the Array
uniqueItemsArray.push('Grapes');
uniqueItemsArray.push('Orange'); // Already exists but added again

// Checking if a value exists in the Array
const hasGrapes = uniqueItemsArray.includes('Grapes');

// Deleting an item from the Array
uniqueItemsArray = uniqueItemsArray.filter(item => item !== 'Banana');

uniqueItemsArray.forEach(item => {
  console.log(item);
});

✅ Use instead:

const uniqueItemsSet = new Set(['Apple', 'Banana', 'Orange', 'Banana', 'Apple']);
// will show ['Apple', 'Banana', 'Orange']

// Adding new unique items to the Set
uniqueItemsSet.add('Grapes');
uniqueItemsSet.add('Orange');

// Checking if a value exists in the Set
const hasGrapes = uniqueItemsSet.has('Grapes');

// Deleting an item from the Set
uniqueItemsSet.delete('Banana');

// Iterating through the Set
for (let item of uniqueItemsSet) {
  console.log(item);
}

Understanding 'use client' in Next.js: Enhancing Performance Through Client-Side Component Mastery

Nicolas B. — Mon, 20 Nov 2023 07:30:00 +0000

Next.js has undergone a remarkable evolution in the realm of component-based web development. From its inception, Next.js has provided developers with powerful tools and features to build performant and scalable web applications. A pivotal distinction that has emerged within the Next.js framework revolves around the utilization of server components versus client components.

This distinction delineates where rendering occurs within a Next.js application, shaping the application's architecture and influencing its performance characteristics. Server components handle rendering operations on the server-side, while client components are rendered and executed within the user's browser environment.

In this article, we'll delve into the intricacies of this dichotomy within Next.js, with a specific focus on understanding the application of 'use client.' Our exploration will emphasize the significance of performance considerations in choosing between server-side and client-side rendering. Additionally, we'll address the current relevance of this distinction in the context of Next.js development and contemplate its future implications on web development practices.

Understanding 'use client' in Next.js

The 'use client' functionality within Next.js serves as a crucial tool for defining a component as a client-side rendering entity. It facilitates the explicit declaration of a Next.js component that should be rendered and executed within the user's browser environment, rather than on the server.

At its core, 'use client' acts as a directive to the Next.js framework, specifying that a particular component's rendering operations should occur on the client-side. This approach aligns with the paradigm of client-side rendering, enabling dynamic updates and interactions without necessitating full-page reloads.

Comparing 'use client' with other analogous approaches or functions within Next.js sheds light on its unique advantages. While Next.js offers various hooks and utilities for managing component-level states and side effects, 'use client' focuses specifically on optimizing client-side rendering performance for designated components.

Server vs Client components

Client-Side Components

Client-side components excel in scenarios requiring dynamic updates and real-time interactions. They render directly in the user's browser, offering responsive interfaces without full-page reloads. Ideal for interactive elements like live forms, chat features, and dynamic widgets.

Server-Side Components

Server-side components in Next.js cater well to initial page loads and static content. Pre-rendered on the server, they deliver fast initial content and benefit SEO. Best suited for static content, landing pages, or content prioritizing search visibility.

Optimizing Performance

A strategic mix of client and server components is key. Leveraging client-side components ensures responsiveness for interactive elements, while server-side components enhance initial content delivery and SEO performance. Strategic deployment based on specific use cases ensures optimized performance and user-centric Next.js applications.

As a general rule, if your component requires interaction with the customer, favor client-side rendering.

The Importance of Performance in Next.js

Performance stands as a cornerstone in the development of web applications, and Next.js, as a framework, emphasizes the significance of optimizing performance for delivering exceptional user experiences.

Efficient performance directly impacts the user experience and user retention metrics of web applications. Swift page loading times, responsive interactions, and seamless navigation contribute significantly to user satisfaction and encourage prolonged user engagement.

The distinction between server-side and client-side components in Next.js plays a pivotal role in determining the performance characteristics of an application. While server-side rendering (SSR) offers advantages like initial fast content delivery and improved SEO, client-side rendering (CSR) provides dynamic interactivity without full page reloads, leading to a more responsive user interface.

Why This Distinction is Crucial

Advantages of Client-Side Components: Client-side components offer specific advantages over server-side components in terms of performance. Components rendered on the client-side, using 'use client' in Next.js, facilitate faster updates and interactions, especially for dynamic content that relies on user actions.
Faster Rendering and Performance Improvement: Utilizing 'use client' for certain components ensures quicker rendering and responsiveness. For instance, components requiring real-time updates or dynamic user interactions, such as navigation menus or interactive widgets, benefit from client-side rendering, enhancing the user experience by minimizing latency.

Understanding this distinction empowers developers to strategically decide which components should render on the client-side or server-side based on performance considerations, thereby shaping a more efficient and responsive Next.js application.

The Future of Client-Side Components in Next.js

Current trends in web development showcase an escalating emphasis on rendering speed. With user expectations rapidly evolving towards instantaneous interactions and content delivery, the speed at which web applications render and respond is becoming increasingly critical.

In terms of Next.js, the future of client-side components is likely to witness further advancements in optimizing rendering speeds and enhancing user experiences. Predictions suggest a continued shift towards more client-side rendering to support dynamic interactions and real-time updates without compromising performance.

Architectures embracing high-performance standards will seamlessly integrate client-side components within Next.js applications. This integration will not only focus on rendering speed but also prioritize factors like efficient data fetching, state management, and code splitting to elevate overall application performance.

Conclusion

In conclusion, 'use client' in Next.js serves as a pivotal tool in defining the rendering behavior of components, especially in optimizing performance. The distinction between server-side and client-side components is crucial in determining the responsiveness and efficiency of Next.js applications.

This article has highlighted the importance of performance in web applications and its direct correlation with user experience and retention. Understanding and leveraging the distinction between server-side and client-side components, particularly through 'use client,' empowers developers to craft more efficient, responsive, and scalable Next.js applications.

In summary, embracing this distinction, optimizing performance, and strategically deploying client-side components are integral to building future-proof and highly performant Next.js applications. The continuous evolution of web development practices underscores the significance of mastering these distinctions for creating cutting-edge, user-centric applications in Next.js.

Revolutionize Your React App with useReducer: Mastering State Management

Nicolas B. — Mon, 13 Nov 2023 07:30:00 +0000

State management is at the core of any React application, and for more complex scenarios, the useReducer hook provides a powerful way to manage state in a structured manner. In this article, we'll explore useReducer through a concrete example: creating a to-do list.

Understanding `useReducer`

useReducer is a React hook that allows state management using a reducer pattern. Instead of using useState to manage a component's state, useReducer is particularly suitable for handling complex states, such as lists of data.

The basic idea is to provide a reducer function that takes two arguments: the current state and the action to perform.

The action is typically an object that describes a change in state, such as adding a task, deleting it, or marking it as done.
The reducer function returns the new state based on the current state and the action.

Pratical exemple : Creating a To-Do List with useReducer

Imagine you're developing a to-do list application. Here's how you can use useReducer to manage the list of tasks:

import React, { useReducer } from 'react';

// Define a reducer function
const taskReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return [...state, { id: Date.now(), text: action.text, done: false }];
    case 'DELETE_TASK':
      return state.filter(task => task.id !== action.id);
    case 'TOGGLE_TASK':
      return state.map(task =>
        task.id === action.id ? { ...task, done: !task.done } : task
      );
    default:
      return state;
  }
};

function TaskList() {
  // Replace useState by useReducer with reducer and initial state
  const [tasks, dispatch] = useReducer(taskReducer, []);

  // make tasks for the reducer
  const addTask = text => {
    dispatch({ type: 'ADD_TASK', text });
  };

  const deleteTask = id => {
    dispatch({ type: 'DELETE_TASK', id });
  };

  const toggleTask = id => {
    dispatch({ type: 'TOGGLE_TASK', id });
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            <span
              style={{ textDecoration: task.done ? 'line-through' : 'none' }}
            >
              {task.text}
            </span>
            <button onClick={() => toggleTask(task.id)}>
              {task.done ? 'Undo' : 'Done'}
            </button>
            <button onClick={() => deleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Add a task"
        onKeyUp={e => {
          if (e.key === 'Enter' && e.target.value) {
            addTask(e.target.value);
            e.target.value = '';
          }
        }}
      />
    </div>
  );
}

In this example, we've created a to-do list application. We use useReducer to manage the tasks. Actions like ADD_TASK, DELETE_TASK, and TOGGLE_TASK allow us to modify the state of the task list in a structured way.

Benefits of `useReducer` for Task Management

useReducer brings several advantages for managing a to-do list in a React application:

Structure and Readability: Actions are explicitly defined with types, making the code more readable and maintainable.
Immutable State: useReducer encourages state immutability, which avoids side effects and unexpected errors.
Handling Complex States: useReducer is ideal for managing a list of data with many possible actions.
Separation of Concerns: By grouping actions and reduction logic in a single function, useReducer promotes the separation of concerns.
Potential for Future Extensions: You can easily add new actions to extend your application's functionality.

Conclusion

In conclusion, useReducer is a powerful tool for managing the state of a React application, especially when dealing with complex states and a variety of possible actions.
By incorporating it into your projects, you can create more robust and structured applications while improving code maintainability and readability.

Web Eco-design: Reducing Environmental Impact

Nicolas B. — Mon, 06 Nov 2023 07:30:00 +0000

In this environmentally conscious world, web eco-design is emerging as an essential approach to reduce the carbon footprint of websites and applications. In this article, we will delve into how to implement web eco-design best practices. Our goal is to create high-performing digital experiences while minimizing their impact on the environment. To achieve this, we'll draw from the book "Web Eco-Design: 115 Best Practices" and explore how JavaScript development choices can significantly affect sustainability.

Choose an Eco-Responsible Framework

When embarking on a new JavaScript project, the choice of framework is crucial. JavaScript frameworks play a vital role in an application's performance and eco-responsibility. To minimize environmental impact, opt for lightweight and optimized frameworks. Here are some recommendations:

Svelte: Svelte is a JavaScript framework that compiles your code into optimized output during compilation, significantly reducing the bundle's size and improving performance.
Preact: Preact is a lightweight alternative to React designed to offer optimal performance with a minimal footprint.
Inferno: Inferno is an ultra-light framework known for its exceptional performance due to its minimal structure.
Elm: Elm is a functional programming language for the web that promotes robust architecture and high performance.
Vanilla JS: In many cases, using pure JavaScript (Vanilla JS) is the lightest solution. Avoid heavyweight frameworks if you don't need all their features.

Minimize Network Requests and Reduce Loading Times

A crucial aspect of web eco-design is reducing energy consumption due to data transfers over the network. To accomplish this, follow these steps:

Asynchronous Loading: Utilize asynchronous loading to minimize unnecessary user wait times.
Bundle JavaScript Files: Combine and minify JavaScript files to reduce the number of network requests.
Optimize Images: Use appropriate image formats (e.g., WebP) and compress them to reduce file sizes.
Leverage Caching: Exploit browser caching to store resources locally and reduce repetitive downloads.

Prioritize General Best Practices

The book "Web Eco-Design: 115 Best Practices" offers numerous practical recommendations. Some key practices to highlight include:

Image Optimization: Employ image optimization tools to reduce their size without compromising visual quality.
Limit the Number of Fonts: Restrict the number of fonts used on your site to reduce resource overhead.
Remove Unnecessary Scripts: Eliminate unnecessary JavaScript scripts that do not add value to the user experience.
Trim Non-Essential JavaScript Code: Minimize the volume of JavaScript by eliminating non-essential functions and libraries.

Other impactful things

Remove unnecessary dependencies

A critical aspect of web eco-design is assessing and reducing unnecessary dependencies. JavaScript libraries and modules can significantly bloat a project, affecting performance and energy consumption. Regularly evaluate your dependencies and remove those no longer required. Also, reduce the number of third-party libraries to minimize the bundle size.

Server location

The choice of server location for hosting your website or application can significantly impact eco-responsibility. Opt for data centers powered by renewable energy sources whenever possible. Minimize long-distance data transfers, which consume more energy. Use content geo-distribution to optimize server location based on your audience's geographic distribution.

The Impact of Ill-Considered Product Owner Proposals

It is essential to recognize that in the development process, some ideas may not be fully thought out or even ill-conceived. However, even proposals that are not necessarily useless but do not fully consider environmental impact can have significant consequences on a web project's sustainability.

_When features or changes are proposed without a thorough analysis of their real efficiency or their contribution to the user experience, they can lead to increased resource consumption. _

Environmental Consequences

When it comes to web eco-design in JavaScript, it is crucial to understand the potential environmental consequences of not following best practices. Ignoring eco-design principles can have a significant impact, not only on the environment but also on your application's performance. Here are some important environmental consequences to consider:

Increased Energy Consumption: Poorly optimized and resource-intensive web applications can lead to increased energy consumption, both on the server and user sides. This contributes to greenhouse gas emissions and the overall carbon footprint.
Resource Depletion: Excessive data transfers and resource usage can contribute to resource depletion, putting additional stress on the environment.
Elevated Carbon Footprint: The energy-intensive nature of inefficient web applications results in a higher carbon footprint, which is detrimental to the planet's well-being.

Customer Impact

Neglecting best practices can also have a significant impact on your customers and their experience with your application. The consequences can affect user satisfaction, business outcomes, and overall reputation. Here are some critical customer-related consequences to be aware of:

Decreased User Satisfaction: Slow-loading and resource-heavy websites can frustrate users. Extended loading times, interaction delays, and performance-related errors can lead to a loss of audience and revenue.
Loss of Customers and Profitability: Users are increasingly sensitive to their online experience. A slow or unreliable application can result in a loss of customers and harm the business's profitability.
Diminished Reputation: A lack of commitment to web eco-design can tarnish a company's reputation. Users and stakeholders increasingly value companies that embrace sustainable practices.
Increased Operational Costs: Resource-intensive applications require more powerful servers, leading to higher operational costs for the business.
Negative Customer Impact: Unoptimized web applications can strain user devices, leading to increased energy consumption and potential device performance issues.

Conclusion

Web eco-design is a necessary approach for the future of our planet. By implementing the discussed recommendations, you create websites and applications that are not only high-performing but also environmentally responsible.

It is, therefore, crucial for developers to play an active role in the development process by communicating the environmental implications of proposals and suggesting more sustainable alternatives. This ensures that development aligns with both business objectives and web eco-design principles.

I hope this article will raise awareness 🌍

Mastering Real-Time Magic: The Observer Pattern

Nicolas B. — Mon, 30 Oct 2023 07:30:00 +0000

What is the Observer Pattern ?

At its core, the Observer pattern establishes a one-to-many dependency between objects so that when one object (the subject) changes state, all its dependents (observers) are notified and updated automatically. This pattern is ideal for scenarios where an object's state change should trigger specific actions in other parts of the code.

Real use case : Real-Time Dashboard

The Observable Class

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(callback) {
    this.observers.push(callback);
  }

  unsubscribe(callback) {
    this.observers = this.observers.filter(observer => observer !== callback);
  }

  notify(data) {
    this.observers.forEach(observer => observer(data));
  }
}

export default Observable;

In this implementation, we've defined an Observable class with methods to subscribe, unsubscribe, and notify observers.

Integrating the Observer Pattern

Now, let's use the Observer pattern to create a real-time dashboard with three data sources: stock prices, weather updates, and news alerts.

Stock Price

const stockObserver = new Observable();

function updateStockPrices(price) {
  console.log(`Stock Price: $${price}`);
}

stockObserver.subscribe(updateStockPrices);

// Simulate real-time updates
setInterval(() => {
  const newPrice = Math.random() * 100;
  stockObserver.notify(newPrice);
}, 2000);

Weather Updates

const weatherObserver = new Observable();

function updateWeather(weatherData) {
  console.log(`Weather Update: ${weatherData}`);
}

weatherObserver.subscribe(updateWeather);

// Simulate real-time updates
setInterval(() => {
  const newWeather = 'Sunny';
  weatherObserver.notify(newWeather);
}, 3000);

News Alerts

const newsObserver = new Observable();

function updateNews(news) {
  console.log(`News Alert: ${news}`);
}

newsObserver.subscribe(updateNews);

// Simulate real-time updates
setInterval(() => {
  const headlines = ['Breaking News 1', 'Breaking News 2', 'Breaking News 3'];
  const randomNews = headlines[Math.floor(Math.random() * headlines.length)];
  newsObserver.notify(randomNews);
}, 5000);

By implementing the Observer pattern, we've achieved a real-time dashboard that updates stock prices, weather conditions, and news alerts as soon as new data is available.

Going further with a more complex example

// Subject - Blog class
class Blog {
  constructor() {
    this.subscribers = [];
  }

  // add a subscriber (observer)
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  // remove a subscriber (observer)
  unsubscribe(subscriberToRemove) {
    this.subscribers = this.subscribers.filter(subscriber => subscriber !== subscriberToRemove);
  }

  // Notify when there is a new article
  publishNewArticle(article) {
    this.subscribers.forEach(subscriber => {
      subscriber.notify(article);
    });
  }
}

// Observer - Subscriber class
class Subscriber {
  constructor(name) {
    this.name = name;
  }

  // notification method
  notify(article) {
    console.log(`${this.name} got a notification : new article! - "${article}"`);
  }
}

// Let's create a blog
const myBlog = new Blog();

// With three random users
const subscriber1 = new Subscriber('Alice');
const subscriber2 = new Subscriber('Bob');
const subscriber3 = new Subscriber('Charlie');

// The subscribers join to the blog
myBlog.subscribe(subscriber1);
myBlog.subscribe(subscriber2);
myBlog.subscribe(subscriber3);

// New article!
myBlog.publishNewArticle('Les dernières tendances en programmation');

// Result : Each subscriber got a notification

// Unsubscribe a user
myBlog.unsubscribe(subscriber2);

// New article!
myBlog.publishNewArticle('Guide de démarrage rapide en développement web');

// Result : Only Alice AND Charlie got a notification.

Benefits of the Observer Pattern

1 - Real-Time Updates: The Observer pattern enables real-time updates across various parts of your application, providing a seamless and responsive user experience.

2 - Decoupled Code: Objects are loosely coupled, making it easy to add or remove observers without affecting other parts of the code.

3 - Customizable Reactions: Observers can define custom reactions to changes, allowing for flexibility and extensibility.

Conclusion

The Observer pattern is a valuable addition to your JavaScript toolkit, particularly when you need real-time updates and efficient communication between components. As demonstrated through our real-time dashboard example, it ensures that changes in one part of your application immediately affect other dependent parts, resulting in a more interactive and dynamic user experience.

Unlocking JavaScript Design Patterns: Mastering Singleton for Ultimate Code Efficiency

Nicolas B. — Mon, 23 Oct 2023 06:30:00 +0000

In the world of JavaScript, design patterns are your secret weapon to crafting efficient, organized, and maintainable code. Among these patterns, the Singleton pattern stands out as a versatile powerhouse, enabling you to ensure a single instance of a class throughout your application. Let's see how it works !

The Singleton Pattern Demystified

The Singleton pattern, at its core, guarantees that a class has only one instance and provides a global point of access to that instance. This means that no matter how many times you request an instance of the class, you will a*lways get the same one. Singleton is particularly **useful when you need to manage shared resources or control access to a single point*, such as a configuration manager, database connection, or, in our case, a logging system.

The Logger Example

Setting Up the Logger

Imagine you're building a JavaScript application that consists of multiple modules and files. Debugging and tracking issues across the application can become challenging without a unified logging system. This is where the Singleton pattern comes to the rescue.

Let's create a simple logger that will maintain a single log throughout the application. Here's our logger.js file:

class Logger {
  constructor() {
    this.logs = [];
  }

  log(message) {
    this.logs.push(message);
  }

  showLogs() {
    console.log(this.logs);
  }

  static getInstance() {
    if (!this.instance) {
      this.instance = new Logger();
    }
    return this.instance;
  }
}

export default Logger;

In this implementation, we've defined a Logger class that allows logging messages and displaying them. The getInstance static method ensures that only one instance of the Logger class exists throughout your application.

Use the Singleton Logger

Now, let's see how we can utilize the Singleton logger in different parts of our application.

app.js (Usage in One File)

import Logger from './logger.js';

const loggerInstance1 = Logger.getInstance();
loggerInstance1.log('Log message 1');
loggerInstance1.log('Log message 2');

loggerInstance1.showLogs();

In app.js, we import the Logger instance, create a loggerInstance1, and use it to log messages. The beauty of the Singleton pattern is that we are always working with the same instance, ensuring that all logs are stored in one centralized location.

anotherFile.js (Usage in Another File)

import Logger from './logger.js';

const loggerInstance2 = Logger.getInstance();
loggerInstance2.log('Log message from another file');

loggerInstance2.showLogs();

In anotherFile.js, we again import the same Logger instance and use loggerInstance2. Despite being in a different file, loggerInstance2 is essentially the same instance as loggerInstance1. This means that all logs from both files are accumulated in the same log array, giving you a comprehensive overview of your application's behavior.

Benefits of the Singleton Logger

Implementing the Singleton pattern for a logger in your JavaScript application offers several benefits:

1 - Centralized Logging: All log messages are collected in one place, making it easier to trace application behavior and debug issues.

2 - Consistency: You can be confident that you're working with the same logger instance throughout your application, ensuring data integrity.

3 - Easy Integration: The Singleton logger seamlessly integrates into different parts of your code, enhancing overall code efficiency.

Conclusion

The Singleton pattern is a powerful tool in JavaScript, providing a straightforward way to manage shared resources and maintain a single point of control in your application. As demonstrated through our logger example, it ensures that you have one consistent logger instance, simplifying debugging and enhancing code efficiency.

By mastering the Singleton pattern and using it wisely, you can unlock the full potential of your JavaScript applications, making them more organized, maintainable, and efficient.

Click Outside Magic: a new Custom Hook!

Nicolas B. — Mon, 16 Oct 2023 07:30:00 +0000

Performance is a crucial aspect of web application development, and ensuring a smooth user experience often involves detecting user interactions or element visibility. In this article, I'll introduce you to a custom React hook called useClickOutside. This hook simplifies the process of detecting clicks outside a specified element, a common requirement for implementing features like modals, dropdowns, or popovers. By leveraging useClickOutside, you can significantly improve the user experience in your React applications.

Introducing useClickOutside

The useClickOutside hook is designed to determine whether a user has clicked outside a specific element in a React application. It helps in scenarios where you want to close a modal, hide a dropdown, or dismiss a popover when the user clicks outside of the relevant component. The hook is straightforward and leverages the React useRef and useEffect functions.

Here's how the useClickOutside hook works:

import { RefObject, useEffect } from 'react';

export const useClickOutside = (
  ref: RefObject<HTMLElement>,
  handleOnClickOutside: (event: MouseEvent | TouchEvent) => void
) => {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handleOnClickOutside(event);
    };
    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);
    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handleOnClickOutside]);
}

How to Use useClickOutside

Let's look at an example of using the useClickOutside hook to close a modal when a user clicks outside of it:

import React, { useRef } from 'react';
import { useClickOutside } from './useClickOutside';

function Modal() {
  const modalRef = useRef();

  // State to manage modal visibility
  const [isOpen, setIsOpen] = useState(true);

  // Function to close the modal
  const closeModal = () => {
    setIsOpen(false);
  };

  // Attach the click outside listener to the modal
  useClickOutside(modalRef, closeModal);

  return (
    <div ref={modalRef} className={`modal ${isOpen ? 'open' : 'closed'}`}>
      <div className="modal-content">
        <p>Click outside to close this modal</p>
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="app">
      <h1>React Click Outside Example</h1>
      <Modal />
    </div>
  );
}

export default App;

In this example, the useClickOutside hook is applied to the Modal component, and it listens for clicks outside the modal's content. When a click occurs outside the modal, the closeModal function is called, which toggles the modal's visibility. This is just one of the many ways you can use the useClickOutside hook to enhance user interactions in your React applications.

In conclusion, the useClickOutside hook simplifies the process of handling click events outside a specific element, making your React application more user-friendly and performant. You can easily integrate this custom hook into your projects to provide a better user experience and optimize performance.

Boosting React App with Custom Hook : useOnScreen

Nicolas B. — Mon, 09 Oct 2023 07:30:00 +0000

When it comes to building web applications, performance is a critical factor in ensuring a smooth user experience. One common requirement is to determine whether an element is currently visible on the screen. This task is essential for implementing features like lazy loading images, infinite scrolling, or tracking visibility-based events. In this article, we'll introduce you to a custom React hook called useOnScreen, which simplifies visibility detection in React applications, making your life as a developer easier.

Introducing `useOnScreen`

The useOnScreen hook is designed to help you detect whether an element is currently visible on the screen or not. It leverages the Intersection Observer API, a modern JavaScript feature that allows you to monitor changes in the visibility of elements. With this hook, you can easily determine whether an element is within the viewport, enabling you to trigger actions accordingly.

Here's how the useOnScreen hook works:

import { RefObject, useEffect, useState } from 'react'

export const useOnScreen = (ref: RefObject<any>) => {
  const [isIntersecting, setIntersecting] = useState(false)
  const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting))

  useEffect(() => {
    observer.observe(ref.current)
    return () => {
      observer.unobserve(ref.current)
    }
  }, [])

  return isIntersecting
}

How to Use `useOnScreen`

Here's a complete example of using the useOnScreen hook to progressively load an image when the user scrolls down the page and the image becomes visible:

import React, { useRef } from 'react'
import { useOnScreen } from './useOnScreen'

function App() {
  const imageRef = useRef()
  const isImageVisible = useOnScreen(imageRef)

  return (
    <div>
      <div style={{ height: '100vh' }}>Scroll down</div>
      <div ref={imageRef}>
        {isImageVisible && (
          <img src="image.jpg" alt="Image" />
        )}
      </div>
    </div>
  )
}

export default App

Forem: Nicolas B.

How Javascript projects works : Deep dive into Transpilers, Bundlers, and More

Introduction

Overview

Deep dive : How they work

But my project can work without these tools ?

Example Workflow

Unveiling the Hidden Gem of React: The Power of Compound Components

Thanks

Unleash Innovation in Design Systems

But what is this ?

Understanding Compound Components with examples

Without Compound Components

With Compound Components

Conclusion

Unveiling the Power of the Visitor Pattern in JavaScript Development

Table of Contents

Understanding the Visitor Pattern with a Real-World Development Scenario

Scenario: Task Management in a Development Project

Implementing the Visitor Pattern

Applying the Visitor Pattern

Advantages of Using the Visitor Pattern

Conclusion

Top 12 interview question for a React Developer

FUNDAMENTAL CONCEPTS

1️⃣ What is JSX?

2️⃣ What is the virtual DOM?

3️⃣ What is a shadow DOM?

React Hooks and Optimizations:

4️⃣ Name at least 4 hooks.

5️⃣ Why are keys important in a React element list?

6️⃣ How do you optimize a React component?

Advanced React Concepts:

7️⃣ What is the purpose of ContextAPI?

8️⃣ Do you know any design patterns? If so, which ones?

9️⃣ What defines a pure function?

React Methods and Utilities:

1️⃣0️⃣ What is the purpose of the map method compared to a for loop?

1️⃣1️⃣ What is the use of useCallback & useMemo ?

Expert mode activated

1️⃣2️⃣ Explain Higher Order Components (HOCs) and provide an example of their usage.

Conclusion

Stop this, use this instead : Top 5 best practices JS / React

1 - Optimizing Parameter Checks

❌ Stop this:

✅ Use instead:

2 - useReducer for toggle states

❌ Stop this:

✅ Use instead:

3 - Destructured Objects as Parameters

❌ Stop this:

✅ Use instead:

4 - Efficient Object Cloning

❌ Stop this:

✅ Use instead:

5 - Use Set to efficiently manage unique values

❌ Stop this:

✅ Use instead:

Understanding 'use client' in Next.js: Enhancing Performance Through Client-Side Component Mastery

Understanding 'use client' in Next.js

Server vs Client components

Client-Side Components

Server-Side Components

Optimizing Performance

The Importance of Performance in Next.js

Why This Distinction is Crucial

The Future of Client-Side Components in Next.js

Conclusion

Revolutionize Your React App with useReducer: Mastering State Management

Understanding useReducer

Pratical exemple : Creating a To-Do List with useReducer

Benefits of useReducer for Task Management

Conclusion

Web Eco-design: Reducing Environmental Impact

Choose an Eco-Responsible Framework

Minimize Network Requests and Reduce Loading Times

Prioritize General Best Practices

Other impactful things

Remove unnecessary dependencies

Server location

5️⃣ Why are `keys` important in a React element list?

1️⃣1️⃣ What is the use of `useCallback` & `useMemo` ?

Understanding `useReducer`

Benefits of `useReducer` for Task Management

Introducing `useOnScreen`

How to Use `useOnScreen`