DEV Community: Abhishek M. Yadav

Building a MicroApp, Extending Microfrontend Pattern

Abhishek M. Yadav — Sun, 13 Oct 2024 07:35:31 +0000

A microapp is a small, focused application designed to efficiently perform specific tasks like managing a payment page or a shopping cart in a large online shop. These self-contained apps can come with their own backend, frontend, and database connection, all packed in monorepos. They typically operate within a larger system or platform. By reducing the complexity and overhead of large, monolithic software systems, microapps help organizations boost productivity.

Micro frontends are a web development pattern that breaks down a single application into smaller, independent modules called micro frontends. Each micro frontend is responsible for a specific feature or functionality and can be developed, tested, and deployed independently.

⛯ UseCase

Imagine needing to create a location selector with dropdowns for country, state, city, and main street address. This requirement is common in many apps that ask for location and address submission. It involves creating a UI and writing backend code to connect with location services for country, city, and state data. Doing this for multiple apps is time-consuming, leads to code duplication, maintainability issues, and the need to write test cases. Future updates must be synced across all applications.

Building this as a microapp offers significant advantages. It keeps all the code in one place, ensuring reusability and easy maintainability. New requirements can be implemented and deployed without rebuilding or restarting the main application. Microapps can be used as components in multiple applications, enhancing efficiency and consistency.

★ Advantages

Modularity: Each microapp is a self-contained module, making it easier to develop, test, and maintain. This modularity allows developers to focus on specific functionalities without affecting the entire system.
Independent Deployments: Microapps can be deployed independently of each other. This means updates or changes to one microapp do not require redeploying the entire application, reducing downtime and deployment risks.
Reusability: Microapps can be reused across multiple applications. Once a microapp is developed, it can be integrated into different projects, saving development time and effort.
Easy Maintainability: With microapps, maintaining and updating code becomes simpler. Since each microapp is a separate entity, changes can be made without impacting other parts of the system, leading to easier bug fixes and feature enhancements.

⚠ Disadvantages

Increased Complexity: Managing multiple microapps can be complex, especially when they need to communicate with each other.
Deployment Overhead: Each microapp requires its own deployment pipeline, which can increase the overhead.
Resource Consumption: Running multiple microapps can consume more resources compared to a monolithic application.
Network Latency: Communication between microapps over the network can introduce latency.
Duplication: Creating microapps could lead to duplication if there is common logic, function, or component that needs to be used in multiple microapps. (Could be solved with Common Library)

♺ Integrating a Common Library to MicroApps

When developing microapps, you may face duplication of common logic, functions, or components across different apps. For example, authentication is a frequent requirement in all microapps. Writing authentication code for each one can result in redundant code. To prevent this, you can integrate a common library that includes all shared backend functions and UI components. This library can be utilized across multiple microapps, ensuring consistency and reducing redundancy.

☐ Architecture

｛｝Development Strategies

Creating multiple microapps across different applications often involves copying an existing microapp repository to a new one. To streamline this process, you can create a common microapp boilerplate template repository. This template can be used to generate new microapps whenever needed.

Here’s how it works:

Boilerplate Template: Develop a boilerplate repository that acts as a framework for all microapps. This template will include configurations for the backend, frontend, testing libraries, development scripts, and CI/CD pipeline scripts.
Creating New Microapps: Whenever you need to create a new microapp, use this boilerplate template. This ensures consistency and saves time.
Updating Microapps: If there are any changes in the boilerplate repository, you can rebase these changes across all microapp repositories. This can be done by adding the boilerplate repository as a second remote URL in each microapp repository.
Consistency: This approach ensures a common methodology and structure across all microapps, making maintenance and updates more manageable.

By using a common boilerplate template, you can simplify the creation and management of multiple microapps, ensuring they all follow the same standards and configurations.

Additionally, the same method can be used for creating a common library repository for microapps.

⊿ Project Setup

A Microapp boilerplate repository should include both the frontend (view) and backend (service) code, with the choice of technologies depending on the developer’s preference and the project’s requirements. Common backend choices include Spring Boot, Django, and Node.js, while for the frontend, frameworks like Angular and Vue.js, as well as libraries like React, are popular options.

Integration of Microfrontend

The frontend part of the Microapp will be used as a microfrontend that can be integrated into other applications. There are several methods to achieve this integration:

Module Federation: Allows sharing code and dependencies between different applications at runtime.
Single SPA (Single Single Page Application): Enables multiple frameworks to coexist in a single application.
Iframe Integration: Embeds one application within another using iframes.

Repository Setup

The Microapp repository should be well-structured, with separate folders for backend and frontend code to enhance clarity and organization. Establishing generic rules for folder and file naming conventions is essential. Additionally, the repository should include all necessary commands to set up the development environment, create production build packages, and run test cases. This approach ensures a streamlined and consistent setup process.

Testing Library: The repository should include a testing library for writing test cases to ensure code quality and functionality.
CI/CD Pipeline: Settings for Continuous Integration and Continuous Deployment (CI/CD) should be configured to automate the build, test, and deployment processes.

Common Library Integration

A common library can be integrated into the Microapp repository to house shared code for both service and UI components. This promotes code reuse and maintainability.

Goals

The primary goals of this setup are:

Modularity: Ensuring that each component is self-contained and can be developed, tested, and deployed independently.
Maintainability: Keeping the codebase organized and easy to manage over time.

📦 Example Repositories

Here are example boilerplate repositories that I have set up. The microapp-boilerplate is a template to create microapps with all frontend and backend configurations, test case setups, and necessary commands to set up the development environment and create production builds.

The second repository consists of a common shared library that can be used in multiple microapps to store common functions or UI components.

The goal of microapps is to create small, mini, micro, or nano applications that can be seamlessly integrated into larger applications, thereby increasing modularity and maintainability.

Thank you for reading this blog. Sayonara!

Effective Logging for Function

Abhishek M. Yadav — Sat, 05 Oct 2024 05:17:18 +0000

Mastering function-level logging is a crucial step towards understanding and implementing comprehensive logging for entire software systems. By focusing on the granular level of functions, we can build a solid foundation that makes scaling up to complex systems a breeze.

Here are five key points to remember when writing logs for a function:

Specify the Log’s Origin:
- Always note down the source of the log. This can include the time it was created, the name of the file, the function it’s related to, and many other details. This is helpful when troubleshooting, as developer can focus on a specific file or function.
Write with Debugging in Mind:
- When writing logs, consider potential issues that might arise. Logs should be written in a manner that would assist in solving these problems, should they occur.
Narrate a Story:
- Logs should be like a story that adheres to the main point but covers all the important details. Each function should have its own narrative, starting with the arguments it received and ending with the data it returned. The log can include the execution time, any inner functions it called, the input it received, and the output it returned.
Test Logs Thoroughly:
- Just like testing feature after completion, logs should also be tested. Ensure logs are displaying the correct information for both successful and unsuccessful cases. Always view logs from the perspective of someone trying to fix a problem.
Avoid Over-Logging:
- Not everything should be logged. Sensitive information, particularly when it pertains to user data, should be omitted. For instance, rather than logging all user details, only the user’s ID or the information utilized in the code should be logged.

Remember to log at the correct level:

INFO - Logs non-sensitive details about app's operation.
WARN - Flags potential issues without affecting user experience.
ERROR - Signals serious problems affecting user experience.
FATAL - Marks major errors severely impacting user experience.
DEBUG - Provides debugging information for developers.

Best Practices for Function Logging

Essential elements in a log string: The inclusion of Timestamp, ApplicationName, FileName, FunctionName, LEVEL, and any other relevant details can significantly enhance the effectiveness of logs for an application. These elements provide crucial context and make it easier to trace the flow of events, especially when debugging or monitoring the application. Remember, the goal is to create logs that are informative and useful, while respecting privacy and security considerations.

The message should convey: the intended action, the initiator of the action, and the input and output.

Consider the following unstructured log entries:

2019-06-20T17:21:00.002899+00:00 myApp [c.d.g.UserRequestClass]: [getUser]: DEBUG: Fetching mailing list 14777
2019-06-20T17:21:00.002899+00:00 myApp [c.d.g.UserRequestClass]: [getUser]: DEBUG: User 3654 opted out
2019-06-20T17:21:00.002899+00:00 myApp [c.d.g.UserRequestClass]: [getUser]: DEBUG: User 1334563 plays 4 of spades in game 23425656

By structuring these entries as JSON, we enhance readability and ease of parsing:

2019-06-20T17:21:00.002899+00:00 myApp [c.d.g.UserRequestClass]: [getUser]: DEBUG: Fetching mailing list {"listid":14777}
2019-06-20T17:21:00.002899+00:00 myApp [c.d.g.UserRequestClass]: [getUser]: DEBUG: User opted out {"userid":3654}
2019-06-20T17:21:00.002899+00:00 myApp [c.d.g.UserRequestClass]: [getUser]: DEBUG: User plays {'user':1334563, 'card':'4 of spade', 'game':23425656}

By adhering to these practices, we can ensure our logs are informative, easy to read, and valuable for debugging.

Code Example and Best Practices

Maintain Log Consistency and Uniformity: It’s crucial to ensure that the logs remain consistent throughout the program, regardless of the number of developers writing the code. This helps in easier debugging, understanding the flow of operations, and better traceability of code execution.
Create a Logging Template and Use the Same Logging Pattern: Develop a standard logging template for the entire team and encourage every developer on the team to follow the same logging pattern. This promotes uniformity and makes it easier to read and understand the logs.
Provide and Refer to Example Functions: Make available some example functions that demonstrate good logging practices in the code. These can serve as a reference for the developers. Allow developers to refer to these examples when they write their own code. This helps them adhere to the established logging practices and maintain consistency.

Here’s an example:

import java.time.LocalDate;
import java.time.temporal.ChronoUnit;
import java.util.List;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;

public class UserService {

    private static final Logger logger = LogManager.getLogger(UserService.class);
    private Database database;

    public UserService(Database database) {
        this.database = database;
    }

    public int getTotalLikesInLast30Days(String userId) {
        logger.info("Request received to get all total likes in last 30 days 
                for: {userId: " + userId + "}");
        long startTime = System.nanoTime();

        try {
            logger.debug("Fetching user with id: {userId: " + userId + "}");
            User user = database.getUserById(userId);

            if (user == null || user.isDeleted() || user.isDeactivated()) {
                logger.warn("User not found or deactivated: {userId: " + userId + "}");
                return 0;
            }

            LocalDate thirtyDaysAgo = LocalDate.now().minus(30, ChronoUnit.DAYS);
            logger.debug("Fetching posts for user since: {userId: " + userId + ", 
                    since: " + thirtyDaysAgo + "}");
            List<Post> posts = database.getPostsByUserSince(user, thirtyDaysAgo);

            int totalLikes = 0;
            for (Post post : posts) {
                totalLikes += post.getLikes().size();
            }

            long endTime = System.nanoTime();
            // compute the elapsed time in nanoseconds
            long duration = (endTime - startTime);  
            logger.info("Execution time: {timeInNanoseconds: " + duration + "}");
            logger.info("Returning total likes in last 30 days for: {userId: " + 
                    userId + ", totalLikes: " + totalLikes + "}");

            return totalLikes;
        } catch (Exception e) {
            logger.error("An error occurred: {message: " + e.getMessage() + "}", e);
            return 0;
        }
    }
}

Here's how the logs might look in a successful case:

2024-01-07 14:00:00,001 [INFO]  UserService.java:10 [com.example.UserService] (getTotalLikesInLast30Days) : Request received to get all total likes in last 30 days for: {userId: 123}
2024-01-07 14:00:00,002 [DEBUG] UserService.java:12 [com.example.UserService] (getTotalLikesInLast30Days) : Fetching user with id: {userId: 123}
2024-01-07 14:00:00,010 [DEBUG] UserService.java:18 [com.example.UserService] (getTotalLikesInLast30Days) : Fetching posts for user since: {userId: 123, since: 2023-12-08}
2024-01-07 14:00:00,020 [INFO]  UserService.java:26 [com.example.UserService] (getTotalLikesInLast30Days) : Execution time: {timeInNanoseconds: 19000000}
2024-01-07 14:00:00,021 [INFO]  UserService.java:28 [com.example.UserService] (getTotalLikesInLast30Days) : Returning total likes in last 30 days for: {userId: 123, totalLikes: 999}

And here's how they might look when an exception occurs, such as when the Post table does not exist:

2024-01-07 14:00:00,001 [INFO]  UserService.java:10 [com.example.UserService] (getTotalLikesInLast30Days) : Request received to get all total likes in last 30 days for: {userId: 123}
2024-01-07 14:00:00,002 [DEBUG] UserService.java:12 [com.example.UserService] (getTotalLikesInLast30Days) : Fetching user with id: {userId: 123}
2024-01-07 14:00:00,010 [DEBUG] UserService.java:18 [com.example.UserService] (getTotalLikesInLast30Days) : Fetching posts for user since: {userId: 123, since: 2023-12-08}
2024-01-07 14:00:00,015 [ERROR] UserService.java:18 [com.example.UserService] (getTotalLikesInLast30Days) : An error occurred: {message: "Post table does not exist"}

Packages like log4j, slf4j, and many others can be used for better management of logs in large software programs.

Focusing on creating effective logs for each function can significantly improve the overall quality of logs for the entire software. This approach ensures that each part of the software is well-documented and can facilitate easier debugging and maintenance. Remember, a well-logged function contributes to a well-logged application.

Thank you for reading this blog. _Sayonara!

CraftPaper Portfolio!!

Abhishek M. Yadav — Wed, 07 Aug 2024 09:46:20 +0000

https://abhishek-me.web.app/
Excited to share my portfolio website, CraftPaper! 🌟

Built from scratch using the React framework over the course of a year and a half, CraftPaper is a one-of-a-kind platform designed to showcase my skills, projects, and professional journey.

Explore my work and see what I’ve been up to! 💬

Portfolio #CraftPaper #ReactJS #WebDevelopment #SoftwareDeveloper #FrontendDevelopment #CRAFTPAPER #Metafizzy