How To Dev

Introduction In a previous article , I provided guidance on using Vite to set up a React project integrated with Micro Frontend. However, you may have noticed that during development, you need to rebuild the static files for the exposed components in the Remote App before they can be used in the Shell App. To address this issue and improve development performance, in this article, I will guide you on how to use Module Federation to implement Micro Frontend. First, let’s explore some concepts about Module Federation. What is Module Federation? Module Federation is an architectural pattern for decentralizing JavaScript applications (similar to microservices on the server-side). It allows you to share code and resources among multiple JavaScript applications (or micro-frontends). This can help you: Reduce code duplication Improve code maintainability Lower the overall size of your applications Enhance the performance of your applications What is Module Federation 2.0? Module Federation 2....

Introduction Micro frontend is an architectural pattern inspired by Microservices. It allows developers to integrate multiple modules together to create a complete web application. Each micro frontend is an independent unit responsible for a specific function. The basic components of Micro Frontend include: Host Application : Also known as the Shell app, this is the primary application that users interact with. It serves as the container for the micro frontends. Remote Application : These are the micro frontends themselves, which act as building blocks for the host application. Remote Applications are injected into the Shell app to form a complete web application. Advantages Scalability : It is easy to add new business modules to the system (without affecting existing modules), and teams can work concurrently on separate modules without impacting each other. Flexibility : Micro frontends can be developed using different frameworks, as they ultimately just need to be built into static f...

Introduction The Event Loop is a crucial mechanism in JavaScript (used in both browsers and NodeJS runtime environments). Despite JavaScript being single-threaded, the Event Loop enables it to handle multiple asynchronous tasks (like ` setTimeout `, ` setInterval `, ` fetch `, etc.) efficiently, similar to how multi-threading works in other programming languages. Related Components Call Stack The Call Stack is a vital concept that explains how the JavaScript engine keeps track of function calls within a program. It operates on a Last In, First Out (LIFO) structure, meaning the last function called is the first one to be executed. When a function is called, it's added to the Call Stack . Once the function completes execution, it's removed from the Call Stack. This process helps JavaScript execute tasks sequentially, in the order functions are called. Task Queue The Task Queue (also known as the Callback Queue , Event Queue , or Macrotask Queue ) contains JavaScript task...