Creating MicroFrontend paradigms using Bit Tool ๐ŸŽฉ

Bit => Github => npm

Why Microfrontend is needed ?

Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. In this Blog weโ€™ll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. As well as talking about the various benefits and costs, weโ€™ll cover some of the implementation options that are available, and weโ€™ll dive deep into a full example application that demonstrates the technique.

Before Microfrontend ๐Ÿ˜ข
After Microfrontend ๐Ÿ˜ธ

How Bit is helpful !!

Setting up a Node.js package registry is often the first step towards scaling code-sharing and making life a little bit easier for your team.

  1. Set up a Node.js package registry.
  2. Publish modules/components with Bit commands.
  3. Install packages using NPM/Yarn client.

1. Setup a Node.js package registry for your components.

Weโ€™ll use Bitโ€™s web platform to host the modules we share and the native NPM/Yarn client to install them.

Flow :: Get Started โ†’Signup (absolutely Free) โ†’ Create Collection(with scope)

Bit Flow

2. Publish components or modules

Now letโ€™s publish modules and components to our newly created registry.

Step 2.1: Install bits

You can install bits in different ways, but the easiest and most OS generic would be to use npm like so:

$ npm install bit-bin --global

Step 2.2: Initializing the Workspace

Bit uses the concept of workspace to group collections- Yayy we have already created (which are groups of components). The first thing you need to do, is to initialize your workspace, and you can do that simply typing:

$ bit init

Step 2.3: Adding file & Checking the status of the components

Adding the files you want to share is quite simple. Assuming a project structure like the following:

$ tree
.
โ”œโ”€โ”€ App.js
โ”œโ”€โ”€ App.test.js
โ”œโ”€โ”€ favicon.ico
โ”œโ”€โ”€ index.js
โ””โ”€โ”€ src
โ””โ”€โ”€ components
โ”œโ”€โ”€ button
โ”‚ โ”œโ”€โ”€ Button.js
โ”‚ โ”œโ”€โ”€ Button.spec.js
โ”‚ โ””โ”€โ”€ index.js
โ”œโ”€โ”€ login
โ”‚ โ”œโ”€โ”€ Login.js
โ”‚ โ”œโ”€โ”€ Login.spec.js
โ”‚ โ””โ”€โ”€ index.js
โ””โ”€โ”€ logo
โ”œโ”€โ”€ Logo.js
โ”œโ”€โ”€ Logo.spec.js
โ””โ”€โ”€ index.js
5 directories, 13 files
$ bit add src/components/*
tracking 3 new components
$ bit status
Bit status

Step 2.4: Versioning

Before uploading the files, youโ€™ll need to tag the component version. This will tag all components, so itโ€™s a great way to initialize them all at the same time:

$ bit tag --all 0.0.1 --message "initial version for the component"

Step 2.5: Then export your component to your registry:

$ bit export <account-name>.<collection-name>
$ bit export sirshikher.react-compo
$ bit export sirshikher.react-compo.button

3. Install packages using the NPM/Yarn client

Now that our packages are ready, letโ€™s learn how to install them.

npm config set '@bit:registry' https://node.bit.dev
$ npm i @bit/user-name.collection-name.namespace.packagename
const Button = require("@bit/sirshikher.react-compo.button");
or
import Button from "@bit/sirshikher.react-compo.button";
<Button />

Conclusion

In this short tutorial we learned how to:

  • Set up an NPM registry in 30 seconds
  • Publish packages without refactoring or boilerplating
  • Install them with the NPM/Yarn client
  • Make changes anywhere and collaborate

Why only backend have all the fun of MicroServices ๐Ÿ˜œ

โ€ Now You can Finally showoffโ€ ๐Ÿ˜

โ€” Shikher Mishra

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store