Forem: Ibrahim Ragab

🚀 Unlocking the Power of Micro Frontends for Scalable Applications

Ibrahim Ragab — Fri, 04 Oct 2024 17:39:58 +0000

Micro frontends have gained significant traction in recent years as a modern approach to building scalable and modular frontend architectures. They allow you to split a large application into smaller, independently developed, and deployable front-end microservices. As a lead front-end engineer, I’ve worked extensively with micro front-end architectures, harnessing their potential to streamline complex projects and enhance team productivity.

🤔 Why Micro Frontends?

Micro frontends align with the microservices architecture commonly used in backend development. They provide teams the flexibility to build features in isolation, resulting in several key benefits:

Decoupled Architecture: Micro frontends enable teams to work independently on distinct modules without impacting others, reducing integration challenges. This modularity results in a smoother workflow, allowing applications to scale effectively.

Independent Deployment: Each micro frontend can be developed, tested, and deployed independently, accelerating the deployment cycle and allowing incremental updates without downtime.

Tech Agnostic: Teams can use different frameworks or libraries for each micro frontend. However, it’s crucial to standardize certain practices, like linting and code quality checks, for a cohesive development environment.

🛠️ The Journey with Micro Frontends and Module Federation

In our projects, we manage an ecosystem of micro frontends, each focusing on a specific domain. Initially, we leveraged Module Federation in Webpack, which enables dynamically importing micro frontends at runtime. This approach allows us to encapsulate micro frontends and expose components or utilities across different modules without code duplication.

Module Federation ensures seamless integration between micro frontends while maintaining their independence. For example, when a user navigates from the fees management module to the category settings, the application dynamically loads the respective micro frontend, providing an uninterrupted and smooth user experience.

💾 Handling State and Side Effects with Redux Query

For managing state and handling side effects across our micro frontends, we rely exclusively on Redux Query. Instead of managing the state globally or using traditional state management tools, we use Redux Query to handle all data fetching, caching, and synchronization. This ensures that each micro frontend is data-driven, focusing on querying state only when needed.

🎯 Side Effects

We handle side effects in services and middleware rather than within the components. Using onQueryStarted from Redux Query allows us to initiate side effects like data fetching and real-time updates efficiently. This approach ensures that side effects are managed in a centralized and predictable way, promoting cleaner and more maintainable components.

By keeping all side effects in the services or middleware layers, we avoid the pitfalls of tightly coupling UI components with business logic, resulting in more reusable and modular code.

Example:

apiSlice.endpoints.getData.initiate.onQueryStarted(async (arg, { dispatch, queryFulfilled }) => {
  try {
    const { data } = await queryFulfilled;
    // Handle side effect
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

🧩 Optimizing with a Data-Driven Approach

Our data-driven approach has enabled us to optimize components by removing unnecessary useEffect hooks, focusing solely on querying data when needed. For instance, when a user interacts with an enterprise or service provider dropdown, Redux Query efficiently manages the state changes and updates the relevant components. This not only simplifies our codebase but also improves performance and user experience.

🏗️ Key Components of Our Architecture

Micro Frontends: Our architecture comprises several micro frontends built using React, Redux Query, and TypeScript. Each micro frontend targets a specific domain, independently managed and deployed. This focus on independent modules allows us to enhance individual areas of the application without affecting others.

Shared Components: To promote consistency across micro frontends, we use a centralized library packaged with Rollup. Shared components, like forms or tables, are built once and reused, ensuring design consistency and reducing development effort.

Module Federation: With Webpack's Module Federation, we dynamically load and share components or utilities between micro frontends. This feature enables a seamless user experience across various parts of our application without requiring a full reload or significant overhead.

Communication: To facilitate communication between micro frontends, we rely on Redux Query's centralized approach to data management. This, combined with custom event emitters when necessary, ensures that data flows smoothly without creating tight coupling between modules.

Authentication: We’ve recently migrated to a new ACL (Access Control List) infrastructure, centralizing authentication across the main application and its micro frontends. This change has enhanced user experience and security, allowing for a unified access control system.

📝 Best Practices and Lessons Learned

Utilize Redux Query for All Data Handling: By exclusively using Redux Query, we streamline state management and handle all side effects in services or middleware. This approach centralizes data fetching, caching, and state updates, resulting in optimized and maintainable code.

Automate Linting and Formatting: Maintaining code quality is crucial when working with multiple micro frontends. We standardized our projects with automated linting tools and integrated them into our CI/CD pipelines. 🛡️

Enforce PR Reviews: To ensure code quality and consistency, we established a policy where every pull request requires multiple reviewers. This practice has significantly reduced bugs and technical debt while promoting knowledge sharing among team members.

Experiment in Separate Branches: For experimental migrations, like transitioning from React 18 to the new React 19 beta, we conduct these changes in isolated branches. This method mitigates risk and ensures the main codebase remains stable during experimentation.

🚀 Future Directions

As we continue to refine our architecture, we're exploring further integration of our micro frontends into other platforms using module federation. This strategy will provide users with a seamless experience, allowing access to various services without leaving their main application environment.

🎯 Final Thoughts

Adopting micro frontends has transformed our development process, offering flexibility, scalability, and enhanced collaboration across teams. By combining micro frontends with Redux Query for centralized state management and side effect handling, we’ve streamlined our codebase and improved performance.

💬 Have you experimented with micro frontends? Share your insights and experiences in the comments – let’s learn from each other!

Write Node server with ES6 Classes

Ibrahim Ragab — Thu, 04 Jul 2019 17:57:05 +0000

I'm learning Node.js and all back-end stuff and I see there's one way to implement a server by import the module and declare the path and the app and so on.

I wrote a simple server using ES6 classes and it looks like this:

When I log the response it seems typical to the regular server, check the repository below you can clone and run it.
I need answers about what is the advantages and the difference.

Yuribenjamin / node-server-class

Such a node server is written with ECMAScript 2015 (ES6)

node-server-class

Such a Express Node server is written with ECMAScript 2015 (ES6) JavaScript classes.

View on GitHub

How to deploy React App to GitHub Pages

Ibrahim Ragab — Sun, 23 Jun 2019 17:44:24 +0000

Did you build React app and want to deploy it, following these simple steps you able to deploy and showing the world your amazing app.

I will show how to create and deploy React App using create-react-app and GitHub Pages

Prerequisites :

GitHub Account.
Install Git in your machine and Set up Git.

Make sure you have Node.js and Npm installed in your machine.

Install Node.js
Install Npm

Notice You’ll need to have Node 8.10.0 or later on your local machine.

Procedure :

1- First create a repository named my-app using create-react-app.

npm init react-app my-app

2- We need to install GitHub Pages package as a dev-dependency.

cd my-app
npm install gh-pages --save-dev

3- Add properties to package.json file.

The first property we need to add at the top level homepage second we will define this as a string and the value will be "http://{username}.github.io/{repo-name}" {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created it will look like this :

"homepage": "http://yuribenjamin.github.io/my-app"

Second in the existing scripts property we to need to add predeploy and deploy.

"scripts": { //... "predeploy": "npm run build", "deploy": "gh-pages -d build" }

4- Create a Github repository and initialize it and add it as a remote in your local git repository.

Now, create a remote GitHub repository with your app name and go back initialize this
git init
add it as remote
git remote add origin git@github.com:Yuribenjamin/my-app.git

5- Now deploy it to GitHub Pages.

just run the following command :

npm run deploy

this command will create a branch named gh-pages this branch host your app, and homepage property you created in package.json file hold your link for a live preview, or you can open the branch setting scroll down to GitHub Pages section you will find this:

Visit deployed app

6- commit and push your commit to GitHub. Optionally

git add .
git commit -m "Your awesome message"
git push origin master

Recap

We created React App using create-react-app
then we installed gh-pages as a dev-dependency
and in package.json file we added some properties homepage also in existing scripts property we added predeploy and deploy
and created a remote repository and initialize it
and run npm run deploy to generate a production build and deploy it to GitHub Pages.

if you have any questions, please don't hesitate to ask.
Always happy to hear from you.