Taking the Best of React and Webix with Micro Frontends
Choosing a tech stack for a new project is always full of compromises. There are many good frameworks and libraries, but finding the one that perfectly fits your requirements is a real challenge. Building everything from scratch can be a decent choice, but it will only work with unlimited time and resources. Therefore, you always have to choose from the available options.
Choosing The Perfect Tech Stack
Every framework and library is a tool initially designed for solving a specific type of task. The problem is that a complex software system has tons of different tasks you must solve to satisfy the client’s business needs. Here, the team has to choose a development tool that solves the maximum number of available technical tasks and ensure that, at the same time, the cost of solving the remaining tasks will be acceptable. Otherwise, they can be excluded from the client’s list of business requirements. This way, developers remain flexible and maintain a balance between feature richness and development cost.
Sometimes, it’s challenging to find the perfect balance point due to various technical reasons and limitations, including:
- Performance. There’s a web table that works with an unlimited number of rows and columns or a scheduler that processes a massive amount of recurring tasks;
- Responsive UI. The adaptability of the UI for different screens;
- Customizability. Ease of customization of ready-to-use components from the library package.
The difficulty of balancing can have different consequences. You’ll face either more expensive development or fewer product features leading to a drop in customer profits.
At XB Software, we actively use the Webix and DHTMLX libraries for building high-performance web applications for business. Also, we have deep expertise in using React to create tons of entertainment applications.
Using these tools, we often face the necessity to combine the features from both these worlds. We’ve tried different approaches and have opted for micro frontends. It allows us to leverage the features of Webix, DHTMLX, and React used on the same page. We managed to work around the limitations of each library and take full advantage of their benefits.
Here, we’ll show how to combine Webix and React to build top-notch web applications. However, the described approach will work well with combining other technologies. That’s the power of micro frontends.
How to Implement Micro Frontends
In micro frontends, there are the following essential terms:
- shell is where pieces of applications or the whole application will be embedded;
- remote is a part of the app or the whole application to be embedded into the shell.
You can build shell and remote as absolutely any other application implemented on any framework or library. The overall experience, however, shows that React (or native WebComponents as an alternative) is better suited for building shells if remotes are made with different technologies. The reason is that React allows you to wrap anything in a reusable component conveniently. If all remotes use the same technology, it also makes sense to use it for shells. For example, if you implement all remotes with Angular, it’s also better to use Angular for shells.
Read Also Micro-frontends: The Future Sometimes Comes in Miniature Sizes
To implement a micro frontend, you should analyze what frameworks will be used and what exactly will be imported into the shell. Following these factors, you can choose the specific technology to build the micro frontend. Here are the available options:
- bit (Home Page, GitHub) is a framework that is better suited for importing components (buttons, inputs, tables, etc.) from remote to shell and subsequently building with them a monolith page;
- single-spa (Home Page, GitHub) is great for importing individual components and whole applications. Note that in this case, the remote to be imported must implement life cycle functions (boilerplate, mount, unmount) that single-spa uses. In the case of popular frameworks, such as React, Angular, Vue.js, or Svelte, libraries for life cycle functions are already written by their developers;
- webpack module federation (Home Page) allows adding an extra plugin in the webpack config. For the remote, this plugin will export components or whole apps. For the shell, it’ll import the remote’s components or entire apps into it. Due to the significant number of configuration options that webpack provides, setting up the config in this case can be difficult;
- vite-plugin-federation (GitHub) implements the same approach as webpack but is much easier to config and work with.
Let’s consider an example of building a shell (pure JavaScript) and remote (React, Webix) with vite-plugin-federation.
Implementing the remote with React: https://xbsoftware.com/blog/react-and-webix-with-micro-frontends/
