It is common knowledge that the best method to tackle any software issue is to disassemble the problem. Whether it be by rewriting your code to create functions that are more manageable and clear, there are multiple ways to accomplish this.

Why use Micro Frontends?

Large applications have profited in multiple ways from the development of microservices, which have advanced in recent years. It is helpful in the process of efficiently developing, deploying, and scaling the separate components of the application backend.

Nevertheless, many developers have become aware that similar difficulties exist for the front-end as well. It is at this stage that the breaking up of the frontend monolith into individual micro front-ends usually begins.

Module federation (Module Federation | webpack)

Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin

I’ll create 2 apps in this article:

• First: Container app that will be used as a base for the micro frontends.
  •  
• Second: The counter app that will get rendered inside the container app.

Let’s update the webpack.config.js file inside the Counter app. Add ModuleFederationPlugin to the plugins array with the following configuration:

webpack.config.js

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "counter",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./Counter": "./src/components/Counter",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),

Let’s update the webpack.config.js file inside the Container app.

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        counter: "counter@http://localhost:8081/remoteEntry.js",
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],

Now in src/App.js

import React from "react";
import ReactDOM from "react-dom";
import { Counter } from 'counter/Counter';
import "./index.css";
const App = () => (
  <div className="container">
    <h1>Container App</h1>
    <Counter /> // Micro frontend app
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

If we run both apps, we should see Counter app inside of Container app working as it should.

Notice: both apps need to be running for Microfrontends to work.

Also in production you can update the app deploy url’s to remote server url.

 

That’s it.

Now you can split your apps into smaller, more manageable chunks.

 

Thanks for reading!

Working with web apps we have to render tables or lists of data often. Most times lists do not contain many records and it is fine. However problems arise when app scales and now lists have thousands of records.

To solve this problem we can implement a paradigm called Virtualization

For starters let’s create a simple component which fetches 1000 records of photos.

usePhotos.tsx

import { useEffect, useState } from 'react';
import Photo from './Photo';
 
function usePhotos() {
  const [photos, setPhotos] = useState<Photo[] | null>(null);
 
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos?_limit=1000')
      .then((response) => response.json())
      .then((photosData) => {
        setPhotos(photosData);
      });
  }, []);
 
  return {
    photos,
  };
}
 
export default usePhotos;

And another component PhotosList to render each photo

import React from 'react';
import styles from './styles.module.scss';
import usePhotos from './usePhotos';
import PhotoCard from './PhotoCard/PhotoCard';
 
const PhotosList = () => {
  const { photos } = usePhotos();
 
  if (!photos) {
    return null;
  }
 
  return (
    <div className={styles.wrapper}>
      {photos.map((photo) => (
        <PhotoCard key={photo.id} photo={photo} />
      ))}
    </div>
  );
};
 
export default PhotosList;

While the above solution works, it is far from optimal.

Rendering 1000 div’s in DOM is not optimal at all.
This is where Virtualization comes in handy.

If we render a large list, the user does not see all its contents at once and uses a scrollbar. When we implement virtualization, we don’t render the elements of the list that are not currently visible. By doing that, we make the DOM tree creation a lot faster. Besides that, the browser does not need to fetch all the images simultaneously.

To implement virtualization in this article, we use the react-window library.

npm install react-window @types/react-window

PhotosList.tsx

import React from 'react';
import usePhotos from './usePhotos';
import PhotoCard from './PhotoCard/PhotoCard';
import { FixedSizeList } from 'react-window';
 
const PhotosList = () => {
  const { photos } = usePhotos();
 
  if (!photos) {
    return null;
  }
 
  return (
    <FixedSizeList height={800} width={600} itemCount={photos.length} itemSize={155}>
      {({ index, style }) => {
        const photo = photos[index];
        return <PhotoCard key={photo.id} photo={photo} style={style} />;
      }}
    </FixedSizeList>
  );
};
 
export default PhotosList;

Before & After Virtualization web site performance

Notice FixedSizeList has a defined row item width and height.

But it does not have to.

We can make it dynamic using another helper library.

npm install react-virtualized-auto-sizer @types/react-virtualized-auto-sizer

PhotosList.tsx

import React from 'react';
import usePhotos from './usePhotos';
import PhotoCard from './PhotoCard/PhotoCard';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
 
const PhotosList = () => {
  const { photos } = usePhotos();
 
  if (!photos) {
    return null;
  }
 
  return (
    <AutoSizer>
      {({ height, width }) => (
        <FixedSizeList
          height={height}
          width={width}
          itemCount={photos.length}
          itemSize={155}
        >
          {({ index, style }) => {
            const photo = photos[index];
            return <PhotoCard key={photo.id} photo={photo} style={style} />;
          }}
        </FixedSizeList>
      )}
    </AutoSizer>
  );
};
 
export default PhotosList;

We can use AutoSizer to manage only width or height instead of both. To do that, we need to use the disableHeight or disableWidth  attributes.

That’s it.

Now you can render endless lists without worrying about performance.

Going back to just a couple of years ago, we all remember thinking of remote working as the vanguard future in the innovative industry of software development. That’s right… the future. Then Covid-19 happened, and the world had no other way to keep moving but remotely. We had no option but to make the future happen now… and strangely enough, it worked. Fast-forward today, tech companies, and startups all around the world have already adopted this new practice and are operating with full-scale distributed teams. In just two intensive years we’ve gathered a great amount of experience and we can now easily recognize the obvious benefits of working with remote teams as well as identify the challenges it poses. This experience has shown us that if addressed properly, we can overcome the difficulties and build great outsourced teams.

EDUCATE YOUR CLIENT
You’ve searched for a long time and you’ve finally managed to recruit new promising talents. Hang on a minute. Don’t rush to start working. Take some time to train your clients instead. They should be well aware of the process that waits for the project and how it will work. Make sure they understand that your goals are in line with their business goals and that the team you’ve built is there to build THEIR product.
Also, tell to them everything about the limitations related to working hours and availability, especially if you’re working in different time zones. Better do it earlier than later.

DISTRIBUTE THE TEAM
Finding the best fit for the specific project is great. It’s arranging them into teams, that is tricky! Are groups of 2-3 people too small? Are 9-10 people too much? Should you group them by their nationalities? There are no right or wrong answers, but experience has shown that teams of 5-6 people work best. Communication between them flows easier and each one of them understands better his specific role.

ESTABLISH A COMMUNICATION
Communication is without a doubt the biggest challenge that remote teams have to deal with. Talking at any moment and discussing things face-to-face is difficult when part of the team is in Asia, part in East Europe, and part in Israel. Use specific tools that will help you facilitate the communication. Choose from the beginning a platform that works best for you and your team and stick to it.
Establish core working hours. Since you are probably working in different time zones, you have to set up a minimum of 3-4 hours when all team members are available online. Discuss it with them prior, understand which hours work best for them, and be flexible. The important thing is to find the best solution for everyone.

SET UP CLEAR ROLES
You have to assign a specific role to each team member and clearly define their responsibility. Make sure they’ve understood what is expected of them, they know the tasks they have to complete and how to do them.

INTRODUCE A CLEAR ROADMAP
At the beginning of the project and throughout the process, you should have clear long-term and short-term goals and make sure all team members are aware of them. They should have a clear view of where the project is going. It’s important to set up precise mile-stone and deadlines.

SET UP A MANAGEMENT PROCESS
Dealing with a big project and managing several distributed teams at the same time can be an overwhelming endeavor. There are too many things to do and you should have control over all of them. That is why platforms like Backlog, Wrike, Monday, etc. can be a great tool for project management.

CREATE AND ENCOURAGE COMPANY CULTURE
Working for 8-hours straight inside an office with other colleagues helps create personal connections. Personal connection makes communication and collaboration between teams easier. Communication and human relations stand at the core of every company’s culture.
Even though with remote work building human relationships seems difficult, that doesn’t mean it is impossible. You should constantly organize team buildings, offline meetings, and outdoor activities whenever it is possible, even if not everyone can join.
Create a just culture among the teams and within each team. Make people feel appreciated for what they do. Make them feel safe to step up and share with you any mistake they’ve made. This way you’ll have the chance to fix it immediately instead of doing it much later when the problem is too big to go unnoticed.

In the end, when building distributed teams, you have to TRY, IMPROVE & TRY AGAIN. You have to be willing to improvise when needed and adapt your practice to whatever works best for the team and the project.