DEV Community: Victor Novais

React Hooks: creating a char counter component

Victor Novais — Sun, 10 Jul 2022 20:00:41 +0000

Hello fellow readers!

In this article I am going to show you how to build a simple char counter component that can be used anywhere, for example on a simple text input or even a text area!

The final result is the following:

The char counter component

Let's start with this simple component. This is going to be a stateless component that just receives the current count and the total count.



type CharCountProps = {
  current: number;
  total: number;
};

const CharCount = ({ current, total }: CharCountProps) => {
  return (
    <span style={{ color: current > total ? 'red' : 'black' }}>
      {`${current}/${total}`}
    </span>
  );
};

As you can see, I also applied a color style to change the text to red if the current count is greater than the total.
Now let's apply this component to a text input!

Applying to a text input

We are now creating the text input that will hold the CharCount component.
To make it flexible, this custom input has a maxLength prop that tells us how many characters are allowed.
Also, our CharCount component is only going to render if this prop is different from undefined.

Note below that the input onChange handler updates the value state, which length property is used on CharCount.



type CustomInputProps = {
  maxLength?: number;
};

const CustomInput = ({ maxLength }: CustomInputProps) => {
  // This state holds the input's text
  const [value, setValue] = useState<string>('');

  return (
    <fieldset>
     {/* Here is our input that is being watched */}
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
      />

      {/* The char counter only renders if the maxLength prop is provided */}
      {maxLength !== undefined && (
        /* The CharCount component receives the current string length and the max length supported for this field */
        <CharCount current={value.length} total={maxLength} />
      )}
    </fieldset>
  );
};

Wrapping up

Lets now just create a CustomInput with a defined maxLength:



export default function App() {
  return <CustomInput maxLength={10} />;
}

This renders an input with a char counter validation! You may now add some behavior, like alerting the user that the input content cannot be greater than the expected.

Here we used a simple useState hook to hold our input's data and pass it further to the CharCount stateless component.

You may find the complete code clicking here.

That's it for now! I hope you all enjoyed it!
Feel free to use the comment section below to share your ideas!

Creating a speech synthesizer using Web Speech API and React

Victor Novais — Fri, 22 Apr 2022 20:59:31 +0000

Hello fellow readers!
In this post we are going to build a very simple speech synthesizer application using React and a browser built-in speech API.

Introduction

Some of you may not know that browsers even had a built-in speech API (at least I didn't), but here we are going to explore more of it. This API had it's first draft in 2012 and described the interfaces for speech recognition and synthesis. The updated draft can be found here if you are curious enough to read.

Below you can see the current browser support for this API. As you can see, it's pretty wide adopted (even in Safari!).

Here we are going to address only the synthesis API. In this sense, our application will have a text input for the user to type what should be spoken and a selector to pick the wanted voice.

Important note: during this article I will be using the Chrome browser. You may have different results if you are using another one.

The final result will be like this:

That being said, let's start!

The voice selector component

This component is a simple select element to allow the user to choose between the voices offered by the browser.
Let's begin with the API object itself. If you are using a browser that enables it, you may find this object globally in the window:



console.log(window.speechSynthesis)

Component structure

This component will basically hold a state to the voice list and a select element to choose between them.
The state is typed with SpeechSynthesisVoice, which is an object that has some properties regarding the voices offered by the browser, as: name, language and a default flag, that will be true to the default voice of your browser.

Let's start with the initial structure and we will be incrementing it later:



const synth = window.speechSynthesis;

const VoiceSelector = ({ selected = 0, setSelected }: VoiceSelectorProps) => {
  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);

  return (
    <select
      value={selected}
      onChange={(e) => setSelected(parseInt(e.target.value))}
    >
      {voices.map((voice, index) => (
        <option key={index} value={index}>
          {voice.name} ({voice.lang}) {voice.default && ' [Default]'}
        </option>
      ))}
    </select>
  );
};

export default VoiceSelector;

Getting the voice list

In this API, there is a specialized function to get the voices offered by the browser. You can check it out directly on your dev tools:



window.speechSynthesis.getVoices()

Let's change our component a little bit to init the state.
Here we will have a populateVoice function that calls the API function and sets the state. Then, we are going to call it in a useEffect.



const VoiceSelector = ({ selected = 0, setSelected }: VoiceSelectorProps) => {
  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);

  const populateVoiceList = useCallback(() => {
    const newVoices = synth.getVoices();
    setVoices(newVoices);
  }, []);

  useEffect(() => {
    populateVoiceList();
    if (synth.onvoiceschanged !== undefined) {
      synth.onvoiceschanged = populateVoiceList;
    }
  }, [populateVoiceList]);

  return (
    <select
      value={selected}
      onChange={(e) => setSelected(parseInt(e.target.value))}
    >
      {voices.map((voice, index) => (
        <option key={index} value={index}>
          {voice.name} ({voice.lang}) {voice.default && ' [Default]'}
        </option>
      ))}
    </select>
  );
};

You may ask yourself why don't we just init the state directly with the voices like this:



const [voices, setVoices] = useState<SpeechSynthesisVoice[]>(synth.getVoices());

There is a little gotcha on the approach above (if you try, you ought to see an empty select). According to Web Speech API Errata (E11 2013-10-17), the voices are loaded asynchronously. Therefore, there is an event called onvoiceschanged (which we are using) that is fired when the voices are ready (this behavior might be different from one browser to another).

You can learn more about this behavior here.

That's it for the voice selector component. Let's move next to the application itself.

The application component

Our application component will control the voice selector state and do the magic of converting a text into a speech.
Let's first start with the simple structure. It's a simple form with a text input, the voice selector and a submit button:



const synth = window.speechSynthesis;

const App = () => {
  const [textValue, setTextValue] = useState<string>('');
  const [selectedVoice, setSelectedVoice] = useState<number>(0);

  if (!synth)
    return <span>Aw... your browser does not support Speech Synthesis</span>;

  return (
    <form>
      <input
        type="text"
        value={textValue}
        onChange={(e) => setTextValue(e.target.value)}
      />
      <VoiceSelector selected={selectedVoice} setSelected={setSelectedVoice} />
      <button type="submit">Speak</button>
    </form>
  );
};

As you can see, the application holds two states:

textValue: controls the input value
selectedVoice: controls the selected voice

Also, I've put a security check to ensure the browser has the speech API.

Let's now attach the submit handler to the form. When the user submits it, the API must read the input's content and speak it with the selected voice. Check it out:



const speak = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const synth = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(textValue);

    // As the voices were already loaded in the voice selector
    // we don't need to use the onvoiceschanged event
    utterance.voice = synth.getVoices()[selectedVoice];

    synth.speak(utterance);
 };

Let's break it down:

First, we create a SpeechSynthesisUtterance object with the typed text as the constructor's argument.
Then, we plug-in the selected voice into the voice property of the newly created utterance object. Note that I just call the getVoices function with the selected voice index.
Lastly, but not less important, we call the speak function of the synthesis API. And voilà! Our synthesizer is ready.

Now we have our complete application component:



const synth = window.speechSynthesis;

const App = () => {
  const [textValue, setTextValue] = useState<string>('');
  const [selectedVoice, setSelectedVoice] = useState<number>(0);

  if (!synth)
    return <span>Aw... your browser does not support Speech Synthesis</span>;

  const speak = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const synth = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(textValue);
    utterance.voice = synth.getVoices()[selectedVoice];

    synth.speak(utterance);
  };

  return (
    <form onSubmit={speak}>
      <input
        type="text"
        value={textValue}
        onChange={(e) => setTextValue(e.target.value)}
      />
      <VoiceSelector selected={selectedVoice} setSelected={setSelectedVoice} />
      <button type="submit">Speak</button>
    </form>
  );
};

You can run this example here to test this and hear your browser speaking.

Other features

The synthesis API has some cool features that weren't exposed here, such as:

stop: you can stop the speak at any time!
pitch and rate: you can customize the pitch and rate of the speaking

You can learn more about these features and much more on mozilla's documentation.

Conclusion

This wraps up our adventure on the speech synthesis API world. I hope you all enjoyed it and if you have any doubts or opinion, please use the comment section below!

Understanding referential equality in React's useEffect

Victor Novais — Tue, 05 Apr 2022 01:44:20 +0000

Hello fellow readers!
In this post I am going to discuss how useEffect handles it's dependencies when there is an object in it.

Note: there will be assumptions that you know some key concepts about useEffect. So, if you don't really know the basics, I first recommend you to read the React docs on this subject.

Referential equality

When we talk about comparison in most of programming languages, we deal with two topics: comparison by reference and comparison by value.
In JavaScript world, this is also true. We can compare values using primitive types, like string or numbers, or compare references when dealing with objects.

Comparison by value

This is the most straightforward concept. If two values are equal, then a boolean comparison returns true. Note that this works for the most common primitive types of JavaScript (strings, numbers and booleans).



const a = 1;
const b = 1;
const c = 2;
console.log(a === b); // true
console.log(b === c); // false

const d = 'hello';
const e = 'hello';
const f = 'bye';
console.log(d === e); // true
console.log(e === f); // false

Comparison by reference

This type of comparison takes in consideration where in the memory an object is located. If two objects point to the same location, they are equal, otherwise they are different. Check out the following schema:

Even if two objects have the same properties with the same values, they will not be equal, unless they are located in the same memory position. You can run the following code in your browser's DevTools to prove this:



const obj1 = { animal: 'dog' };
const obj2 = { animal: 'dog' };
const obj3 = obj1

console.log(obj1 === obj1) // true
console.log(obj1 === obj2) // false
console.log(obj2 === obj3) // false
console.log(obj1 === obj3) // true

Comparison in React's useEffect

With the previous introduction on types of comparison on mind, let's bring that concept into React's hook useEffect.
Accordingly to React's docs, we can define this hook as:

The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you’re used to calling these operations “side effects” (or just “effects”), you’ve likely performed them in your components before.

If we need to run an effect after a specific change, we must use hook's second argument, which is an array of dependencies:



useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

Every time any of the dependencies change, the callback inside useEffect is run, and in this process it is important to know how the comparison is made.

If there are only primitive values such as string or number, there will be a comparison by value, otherwise there will be a comparison by reference.

I've seen plenty of times errors regarding the functionality of useEffect when it comes to dependencies. You may trap yourself in an infinite loop or multiple calls to an API, which may incur in money loss if, for example, your back-end is hosted in a cloud service. To mitigate these problems, it is important to keep these dependencies as stable as possible.

So, let's see some examples.

useEffect + value comparison: this example show a simple count component that render in screen a new text every time the count state changes. As it is a number, React simply compares if the previous number and the new number are different, if this is true, then useEffect is called.



const ValueComparison = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.body.append(`Whoa! My count is now: ${count}`);
    var br = document.createElement('br');
    document.body.appendChild(br);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Click me to count</button>;
};

useEffect + reference comparison (1): the following example shows a common problem. It shows a object state that is directly changed, but nothing is rendered. Check it out:



const ReferenceComparison1 = () => {
  const [animalObj, setAnimalObj] = useState({ animal: 'dog' });

  const handleChange = () => {
    animalObj.animal = animalObj.animal === 'cat' ? 'dog' : 'cat';
    setAnimalObj(animalObj);
  };

  useEffect(() => {
    document.body.append(`I am this animal: ${animalObj.animal}`);
    var br = document.createElement('br');
    document.body.appendChild(br);
  }, [animalObj]);

  return <button onClick={handleChange}>Click me to change the animal</button>;
};

You may be asking yourself, baffled: but the state did change! Now the animal should be a cat!
Well... not quite. We are changing an object property, not the object per se. See, remember that an object comparison is made by reference? So, the reference of the object in the memory stays the same even if some property changes, thereby useEffect dependency will not recognize any change.

To fix this, we simply need to pass a new object to setAnimalObj, meaning that this new object will point to a new memory location, so the dependency will change and useEffect will fire:



const ReferenceComparison1 = () => {
  const [animalObj, setAnimalObj] = useState({ animal: 'dog' });

  const handleChange = () => {
    setAnimalObj({
      ...animalObj,
      animal: animalObj.animal === 'cat' ? 'dog' : 'cat',
    });
  };

  useEffect(() => {
    document.body.append(`I am this animal: ${animalObj.animal}`);
    var br = document.createElement('br');
    document.body.appendChild(br);
  }, [animalObj]);

  return <button onClick={handleChange}>Click me to change the animal</button>;
};

useEffect + reference comparison (2): now let's see an example with a parent-child component relationship:



// Here is the parent component that renders an animal list and a button that increments a counter
const ReferenceComparison2 = () => {
  const [count, setCount] = useState(0);
  const animalList = [
    { animal: 'dog' },
    { animal: 'cat' },
    { animal: 'turtle' },
  ];

  return (
    <React.Fragment>
      <ChildComponent data={animalList} />
      <span>Count: {count}</span>
      <button onClick={() => setCount(count + 1)}>Increment count</button>
    </React.Fragment>
  );
};

// Here is the child component, responsible for rendering the list used by parent component
const ChildComponent = ({ data }: ChildComponent1Props) => {
  useEffect(() => {
    document.body.append(`Child rendered! Data has changed!`);
    var br = document.createElement('br');
    document.body.appendChild(br);
  }, [data]);

  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item.animal}</li>
      ))}
    </ul>
  );
};

If we run the above code, we can see that the child component is rerendered every time the button is clicked, although the counter and the list are independent (also animalList hasn't changed any property at all):

This happens because every time the counter is updated, the parent component is rerendered, therefore the function will be called again, generating a new reference for the object in animalList variable. Finally, the child component acknowledge this change and runs useEffect.

It is possible to solve this in many ways, let's see two of them. The first solution below simply moves the array data outside the component function, therefore the object reference will never change:



const animalList = [{ animal: 'dog' }, { animal: 'cat' }, { animal: 'turtle' }];

const ReferenceComparison2 = () => {
  const [count, setCount] = useState(0);

  return (
    <React.Fragment>
      <ChildComponent data={animalList} />
      <span>Count: {count}</span>
      <button onClick={() => setCount(count + 1)}>Increment count</button>
    </React.Fragment>
  );
};

The second possible solution is to use useMemo. This hook keeps the same reference of a value unless its dependencies change:



const ReferenceComparison2 = () => {
  const [count, setCount] = useState(0);
  const animalList = useMemo(
    () => [{ animal: 'dog' }, { animal: 'cat' }, { animal: 'turtle' }],
    []
  );

  return (
    <React.Fragment>
      <ChildComponent data={animalList} />
      <span>Count: {count}</span>
      <button onClick={() => setCount(count + 1)}>Increment count</button>
    </React.Fragment>
  );
};

Now our child component will not run useEffect, because the data dependency has a stable reference:

Wrapping up

We've seen how referential equality works when using useEffect. It is always important to keep an eye on the dependencies, specially if they rely on objects, arrays or functions.
You may find yourself sometimes in trouble when the same effect runs many times. If this happens, remember to checkout the dependencies and if they are stable.
Feel free to use the comments section to expose your opinion or ask me anything! Thanks!

Creating a deferred promise hook in React

Victor Novais — Thu, 31 Mar 2022 02:43:50 +0000

Hello fellow readers! In this post I am going to show how to create and use a deferred promise hook in React. Feel free to ask or give your opinion in the comments section.
It is important that you may have some knowledge about promises to fully understand this article. If you don't, please read this great article from MDN.
Let's go!

Principle

A deferred promise, defined by the jQuery lib, is:

An object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

In simple words, it means that we can store promise's callbacks, such as resolve and reject to use them later, deferring an action until it's done.

Use case

Let's imagine the following scenario:

There is a task list component that has a remove button
Once the remove button is clicked, a confirm dialog shows up
Once the user confirms the removal, the task is deleted, otherwise nothing happens

Here is a draft of this idea:

We can build the code of this scenario as the following:

Task list component



type ListProps = {
  allowDelete: () => Promise<boolean>;
};

const data = ['Task 1', 'Task 2', 'Task 3'];

const List = ({ allowDelete }: ListProps) => {
  const [tasks, setTasks] = useState(data);

  const handleRemove = async (task: string) => {
    const canDelete = await allowDelete();
    if (!canDelete) return;

    const newTasks = tasks.filter((innerTask) => innerTask !== task);
    setTasks(newTasks);
  };

  return (
    <ul>
      {tasks.map((task) => (
        <li style={{ marginBottom: 10 }}>
          <span>{task}</span>
          <button style={{ marginLeft: 10 }} onClick={() => handleRemove(task)}>
            Remove
          </button>
        </li>
      ))}
    </ul>
  );
};

Confirm dialog



type DialogProps = {
  isOpen: boolean;
  handleConfirm: () => void;
  handleClose: () => void;
};

const Dialog = ({ isOpen, handleConfirm, handleClose }: DialogProps) => {
  return (
    <dialog open={isOpen}>
      <div>Do you really want to remove this task?</div>
      <button onClick={handleConfirm}>Yes</button>
      <button onClick={handleClose}>No</button>
    </dialog>
  );
};

Application



const App = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const allowDelete = async () => {
    setIsDialogOpen(true);
    return true;
  };

  const handleConfirm = () => {
    setIsDialogOpen(false);
  };

  const handleClose = () => {
    setIsDialogOpen(false);
  };

  return (
    <Fragment>
      <List allowDelete={allowDelete} />
      <Dialog
        isOpen={isDialogOpen}
        handleConfirm={handleConfirm}
        handleClose={handleClose}
      />
    </Fragment>
  );
};

Looking at this scenario, it stays clear that the list component needs to wait for the user intervention before deciding if a task can or cannot be removed.

But, there is a problem! If we run this code, we will encounter a bug. As soon as the user clicks the remove button, the task is already deleted before the user's consent.

Deferred promise to the rescue

To fix this bug, we need to tell our code to wait for the user consent, and this is possible by creating a deferred promise.
I will show step by step how to create our custom hook.

First, we will create a type that will hold our defer object. This object must have three properties: a resolve function, a reject function and the promise that will be fulfilled. We can note below that the DeferredPromise receives a generic type (DeferType) that infers the resolve's value type as well as the promise type. You may skip this step if you are using plain JavaScript instead of TypeScript.



type DeferredPromise<DeferType> = {
  resolve: (value: DeferType) => void;
  reject: (value: unknown) => void;
  promise: Promise<DeferType>;
};

Next, we are going to start to define the hook's function. This hook begins with a simple ref that will hold our defer object. Note that the hook receives the same generic type defined above.



export function useDeferredPromise<DeferType>() {
  const deferRef = useRef<DeferredPromise<DeferType>>(null);

  return { deferRef: deferRef.current };
}

So far, so good! Now let's increment our hook with a function that creates the defer object. First, we will build our deferred object.



// Here is our deferred object that will hold the callbacks and the promise
const deferred = {} as DeferredPromise<DeferType>;

// We then create the main part of our defer object: the promise
// Note that we take the promise's callbacks and inject them into our deferred object
const promise = new Promise<DeferType>((resolve, reject) => {
   deferred.resolve = resolve;
   deferred.reject = reject;
});

// Finally, we inject the whole promise into the deferred object
deferred.promise = promise;

Next, we will update the ref hook with the new deferred object.



deferRef.current = deferred;

Now we have our complete function and hook! Check it out:



export function useDeferredPromise<DeferType>() {
  const deferRef = useRef<DeferredPromise<DeferType>>(null);

  const defer = () => {
    const deferred = {} as DeferredPromise<DeferType>;

    const promise = new Promise<DeferType>((resolve, reject) => {
      deferred.resolve = resolve;
      deferred.reject = reject;
    });

    deferred.promise = promise;
    deferRef.current = deferred;
    return deferRef.current;
  };

  return { defer, deferRef: deferRef.current };
}

Alright! Our hook is now complete. Let's now use it to solve the bug we found!

Using the deferred promise hook

Let's modify the Application component adding the new hook. Note that the allowDelete function now returns a deferred promise and the confirm/delete functions resolve this deferred promise.



const App = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  // Here we declare the new hook
  // Note that we will resolve this promise using a boolean value (`true` or `false`). This is the generic type that we defined earlier.
  const { defer, deferRef } = useDeferredPromise<boolean>();

  const allowDelete = async () => {
    setIsDialogOpen(true);
    // Now a deferred promise is being returned
    return defer().promise;
  };

  const handleConfirm = () => {
    setIsDialogOpen(false);
    // If the user consents, the deferred promise is resolved with `true`
    deferRef.resolve(true);
  };

  const handleClose = () => {
    setIsDialogOpen(false);
    // If the user declines, the deferred promise is resolved with `false`
    deferRef.resolve(false);
  };

  return (
    <Fragment>
      <List allowDelete={allowDelete} />
      <Dialog
        isOpen={isDialogOpen}
        handleConfirm={handleConfirm}
        handleClose={handleClose}
      />
    </Fragment>
  );
};

Now if we run this code, we will note that the bug is fixed! Our code successfully waits for the user consent before removing a task. If the removal action is declined, nothing happens, as expected.

Wrapping up

We successfully created our deferred promise hook from scratch, and it was pretty simple!
I showed just one of the use cases that this hook might become handy, but you can use this whenever you need to wait something to happen before running an action.
Here I also leave the link for every code that was written in this article: https://stackblitz.com/edit/react-ts-sukfgm?file=index.tsx

Just one important note: once you defer a promise, never forget to resolve or reject it, otherwise you might encounter some memory leak problems.

That's it for now! Please, if you have any doubts, don't hesitate to use the comments section, as I will keep an eye on it!

What are micro frontends?

Victor Novais — Mon, 24 May 2021 01:00:57 +0000

This is a term that has been growing for past years. But, what is exactly a micro frontend?

Introduction

Since the dawn of the internet era, we have been writing code to make the web interactive. For the past decade, the term web application has became a thing. All this time the frontend code was just a big, solid and entangled monolith.
When we think about the backend tech, the microservice approach has been widely used to structure independent applications that can communicate and reach an objective on the user journey.
But... what if we could use this approach to the frontend dev?

The monolith

When we write web apps, we usually choose a framework to help us (React, Vue, Angular, Svelte, and others) and architect it over layers such as models, views and controllers. All the code happily lives in one great repository.
Time passes, people come and go, new techs are born and raise, and there is our monolith. But we know that systems must evolve, otherwise it becomes a cumbersome old code that does not perform well or is difficult to maintain.
What if we now need to change the tech stack of the frontend? Well, it would be a big problem to change anything without breaking the whole application. But that's just one downside of the monolith, let's see some more:

As the monolith grows, it becomes more and more difficult to understand all of the code and draw a clear line of the business requirements
Big compiled javascript monoliths can take a long time to build
Even if we change a little part of it, we need to redeploy the whole application

So, how can we breakdown this big app and turn it into multiple independent applications?

The micro frontend

This term has been wandering around the internet since 2015. Check below this trend from Google. As we can see, the interest rate has been continuously growing since late 2018.

Micro frontends follow the same principle as microservices on the backend. Each application lives independently and has a well defined objective.
Let's think of a very simple example: an e-commerce. To build up such an application, we can expect the following requirements:

Home page to show the recommended products
Cart page
Checkout page
Payment page

Each one of this pages can be written as a single application. When we breakdown a monolith like this, it is also possible to breakdown into specialized teams.
There could be some developers writing just the home page, a couple other maintaining the cart page, and so on.
The following picture from the must read Martin Fowler's article represents this:

Using this approach also helps to integrate with the microservices built by the backend team. We can pick the frontend devs that build the home page, with the backend devs that build the microservice of the home page. So now we have a full team which only objective is to code the home page! Check out the following picture from Michael Geers article:

Advantages

A micro frontend architecture can deliver the following advantages:

Very easy to change the tech stack, since each application will naturally contain less code and will not interfere in other apps.
Fast maintenance: as each application has one concern, a bug can be easily spotted and adjusted.
Fast deploy: it's easier and faster to build and deploy little applications.
Easy scaling: each application has its own scale requirement, so we can easily provide different environments.

Disadvantages

Every decision has its disadvantages, and it's not different with micro frontends:

There must be a special attention to shared libraries between applications, so the browser won't download the same lib multiple times.
Code redundancy: some code may be repeated on each application. We surely could write a helper application that others use, but that would create a tight coupling between them.
Architectural complexity: it's way easier to manage a single monolith than multiple applications. To overcome this, there must be some automation and a lot of documentation to help developer experience.

Building a micro frontend

Well... now that we know what is a micro frontend, how can we build it?
To breakdown a front monolith, we have some techniques:

iframes: using this (old) approach, we can have a single page with multiple inner applications, each one in a different iframe.
WebPack Module Federation: this recently launched approach aims to bundle different applications using WebPack. Here we can define how apps depend on each other and share common libraries.
import-map: this is the strategy used by the single-spa framework. Each application javascript file is exposed by an address and the import map register them, enabling an orchestrator to know where each one is located.
Web Components: each application can be represented by a custom HTML element that could be orchestrated by a host application

Some great frameworks out there can help into building micro frontends:

single-spa: allow micro frontends by using import-map and an orchestrator that handles routing and communication between apps
Luigi: powered by SAP, it uses iframes to build micro frontends
Piral: uses modules called pilets to deliver a modular architecture
Frint: a complete framework that delivers routing, state management, server rendering and other features to micro frontend architecture

Conclusion

As we could see, this theme is pretty recent and new techniques and frameworks are still walking to help us develop micro frontends, but we can see that it has tremendous advantages to web development.
I hope you all liked this content! See you soon!