Forem: MINI JAIN

Mastering Maven: Beyond Build Management

MINI JAIN — Mon, 15 Jul 2024 18:12:27 +0000

Maven is widely known as a powerful build automation tool, but it’s much more than that. It’s a comprehensive project management tool that simplifies the entire build process, dependency management, and documentation generation. In this post, we will explore various aspects of Maven and understand its capabilities in detail.

Key Features of Maven
1.Build Generation
2.Dependency Management
3.Documentation

When you execute commands like mvn build or mvn deploy, Maven looks into the pom.xml file, which contains all the configurations, and acts accordingly. Let’s dive deeper into the pom.xml structure and its significance.

The POM File

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <!-- Basic project information -->
    <groupId>com.example</groupId>
    <artifactId>my-app</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <!-- Properties -->
    <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <spring.version>5.2.8.RELEASE</spring.version>
    </properties>

    <!-- Dependencies -->
    <dependencies>
        <!-- Spring Core -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <!-- Spring Context -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <!-- JUnit for testing -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <!-- Build configuration -->
    <build>
        <plugins>
            <!-- Compiler plugin -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>${maven.compiler.source}</source>
                    <target>${maven.compiler.target}</target>
                </configuration>
            </plugin>
            <!-- Surefire plugin for running tests -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.2</version>
            </plugin>
        </plugins>
    </build>

    <!-- Repositories -->
    <repositories>
        <repository>
            <id>central</id>
            <url>https://repo.maven.apache.org/maven2</url>
        </repository>
    </repositories>

    <!-- Distribution management for deployment -->
    <distributionManagement>
        <repository>
            <id>releases</id>
            <url>http://repo.mycompany.com/releases</url>
        </repository>
        <snapshotRepository>
            <id>snapshots</id>
            <url>http://repo.mycompany.com/snapshots</url>
        </snapshotRepository>
    </distributionManagement>

</project>

Lets decode th POM file:

**The pom.xml's file follows a specific XML schema (defined in xsi:schemaLocation:)that ensures it adheres to a correct structure, which Maven verifies.The schema here refers to defininfg the pom,For example When I am adding dependencies, I should have groupid, artifactId,version. I cannot add something xyz as key.These type of rules defined are taken from xsi:schemaLocation

Key Elements:

Parent POM:
Each POM file in Spring Boot has a parent POM. If no parent is defined, the super POM becomes the parent. Every Pom is a subset of Super pom.
GroupId, ArtifactId, and Version:
These elements uniquely identify a project in Maven Central.Lets say If I have deployed my project in maven central,these 3 properties will uniquely identify my project.

<groupId>com.example</groupId>
    <artifactId>my-app</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

Properties: Define key-value pairs that can be referenced throughout the pom.xml.

<properties>
    <java.version>1.8</java.version>
</properties>

I can use ${java.version} as variable throughout in the pom.

Repositories: Specify where to download dependencies, typically from Maven Central.The url value defines where to get the dependencies and start downloading.

<repositories>
    <repository>
        <id>central</id>
        <url>https://repo.maven.apache.org/maven2</url>
    </repository>
</repositories>

Dependencies: List the project's dependencies.

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>2.3.4.RELEASE</version>
    </dependency>
</dependencies>

Build Configuration: Defines the build process and phases. For this to we need to understand the build lifecycle of maven.

Maven Build Life cycle

Maven follows a specific build lifecycle that consists of several phases:

Validate: Validates the project structure.When we want to add certain standards and conventions before building and packaging,We can define a plugin for validations. The command for triger validate is: mvn validate The Maven Checkstyle Plugin helps you check if your Java source code adheres to a specified coding standard.

<project>
    <!-- other configurations -->

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-checkstyle-plugin</artifactId>
                <version>3.1.1</version>
                <executions>
                    <execution>
                        <id>checkstyle-validation</id>
                        <goals>
                            <goal>check</goal>
                        </goals>
                       {% embed  <phase>validate</phase> %}
                    </execution>
                </executions>
                <configuration>
                    <configLocation>config/checkstyle/checkstyle.xml</configLocation>
                    <encoding>UTF-8</encoding>
                    <consoleOutput>true</consoleOutput>
                    <failsOnError>true</failsOnViolation>true</failsOnWarning>false</failsOnSuppressedViolations>false</failsOnNoViolations>false
                    <linkXRef>false</linkXRef>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

Here I am adding checklist validation in validate phase.It will validate all the goals written in checklist validate.

Compile:
Converts Java code to bytecode (.class files) and places them in the target/classes folder. The command will be mvn compile.(It internally do javac.)
Test:
Runs test cases located in the test/ directory.The command is mvn test.
Package:
Generates JAR/WAR files from the compiled bytecode and stores them in the target/ folder.The command is mvn package.We cxan even share the jar whcih can be used as dependency to other project or we can deploy
Verify:
Checks the integrity of the package.The command is mvn verify.Here we can perform integration test and other checks.
Ex: Maven PMD plugin.PMD is a source code analyser.It checks for unused variables, unused imports, duplicate code, empty catch blocks etc and reports a warning.

<plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-pmd-plugin</artifactId>
                <version>3.15.0</version>
                <executions>
                    <execution>
                        <id>pmd-validation</id>
                        <goals>
                            <goal>check</goal>
                        </goals>
                        <phase>verify</phase>
                    </execution>
                </executions>
                <configuration>
                    <printFailingErrors>true</printFailingErrors>
                    <failOnViolation>true</failOnViolation>
                </configuration>
            </plugin>

Install:
Installs the package in the local repository.The command is mvn install.
Deploy:

Uploads the package to a remote repository.

Customizing the Build Process:
Maven provides flexibility to add specific goals in each phase through the element. You can create your own plugin or can use inbuilt plugins to extend Maven’s functionality. We have added PMD in verify phase and checkstyle validation in validate phase.

*Install with maven: *
It installs the jar file we created in compile phase after completing test,package and verify.
here it creates a m2 folder in which all the dependencies are kept. We can change this folder location from settings.xml under
<localrepository></localrepository>

Deploying with Maven
Deployment configuration is specified inside the element.

<distributionManagement>
    <repository>
        <id>internal.repo</id>
        <url>http://repo.mycompany.com/maven2</url>
    </repository>
</distributionManagement>

Tip: we can provide credentials in settings.xml inside .m2/repository folder.

Staying updated with Maven and mastering its nuances can significantly enhance project management and build automation skills. Remember, Maven is more than just a build tool—it's project's command center. Dive deep, explore new plugins, and keep experimenting. The more we engage with Maven, the more powerful our development process becomes. Keep pushing the boundaries and let Maven handle the rest—after all, it's like having a Swiss Army knife for your project management needs!

Thank you so much for reading,will appreciate your valuable feedback.
Also tell me in the comments if you encounter any cool Plugins.
Dont forget to like,share and susbcribe.

DOM Guardians: Exploring JavaScript’s MutationObserver API

MINI JAIN — Sun, 09 Jun 2024 17:11:14 +0000

Welcome to the world of JavaScript Observers! If you've ever needed a way to keep an eye on changes in your DOM and react dynamically, then observers are your best friends. Let's break it down.

What Exactly Are Observers?
As the name suggests, an observer watches for changes or events to occur and then springs into action with a callback function.

The MutationObserver API:
The MutationObserver API is your go-to tool for detecting changes in the DOM tree of your browser. Here’s how you can set it up:

function cb(mutations) {
    // changes as response to mutation
}

// Create a MutationObserver object and pass the callback defined
const observer = new MutationObserver(cb);
observer.observe(targetNode, options);

Configuring Your Observer: The Options
To tell your MutationObserver what to watch for, you provide it with a set of options:

childList: Boolean
attributes: Boolean
characterData: Boolean
subtree: Boolean
attributeFilter: []
attributesOldValue: Boolean
characterDataOldValue: Boolean

Breaking Down the Boolean Functions:
1.childList: Monitors the addition or removal of child nodes. When this happens, the mutation observer triggers an event of type childList.

2.Attributes: Watches for changes to the attributes of a node. Any style change? Boom! The observer triggers an event of type attributes.

3.CharacterData: Keeps an eye on changes to the innerHTML character data, triggering an event of type characterData.

These three properties are essential for setting up observers on a target node.

4.subtree: Observes changes in any part of the subtree of a particular node. While childList monitors only direct children, subtree goes all the way down the rabbit hole to nested children.

5.attributesOldValue and characterDataOldValue: These properties store the old values, allowing you to compare the changes and deduce what’s different.

6.attributeFilter: Specify which attributes to monitor changes for, using an array field. This is especially useful when you want to zero in on specific attributes.

function cb(mutations) {
    mutations.forEach(mutation => {
        console.log(mutation);
    });
}

const observer = new MutationObserver(cb);

const options = {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
    attributeFilter: ['class', 'style'],
    attributesOldValue: true,
    characterDataOldValue: true
};

const targetNode = document.getElementById('target');

observer.observe(targetNode, options);

// Remember to disconnect when done
// observer.disconnect();

Note: Always use observer.disconnect() when you’re done observing to prevent memory leaks.

With this setup, your JavaScript code is now armed with a vigilant observer, ready to react to any changes in your DOM.

Stay Tuned: More Observers to Come
But wait, there’s more! The world of observers doesn’t end here. There are different types of observers that we'll cover in upcoming blogs, each with its unique superpowers. From IntersectionObserver to ResizeObserver, we’ll dive into how these tools can make your web applications even more dynamic and responsive.

Stay tuned and keep observing!
Also for more detailed examples and code snippets, check out my github repository. Happy coding.
If you have any questions, thoughts, or suggestions, feel free to leave a comment below.Also Have you used MutationObservers in your projects? Share your experiences and tips in the comments!

React 19 Launches with Game-Changing React Compiler: What Does This Mean for Your Apps?

MINI JAIN — Sun, 19 May 2024 09:24:57 +0000

With the recent launch of React 19 Beta, one of the most exciting features introduced in this release is the React Compiler—a groundbreaking tool that promises to revolutionize the way we build and optimize React applications.

Performance Optimization Without the Hassle
Unlike traditional approaches where developers have to manually implement optimizations, such as React.memo or useCallback and useMemo hooks, the React Compiler takes care of these optimizations for you. It intelligently analyzes your code and applies the necessary optimizations to ensure your application runs smoothly and efficiently.

Real-World Adoption
Quest Store and Instagram have already begun integrating the React Compiler into their applications. The results have been remarkable, showcasing significant improvements in performance metrics across the board.

Impressive Statistics
The introduction of the React Compiler has led to substantial performance gains for both Quest Store and Instagram:

2.5x Faster Interactions: User interactions within the applications have become 2.5 times faster, enhancing the overall user experience.
12% Improved Initial Load Times: The initial load times of these applications have improved by 12%, ensuring users can start interacting with the apps more quickly.
Faster Navigation: Navigation between different sections of the apps has become noticeably faster, contributing to a smoother user experience.
0% Memory Increase: Impressively, these performance improvements have been achieved without any increase in memory usage, maintaining the efficiency of the applications.

Focus on Business Logic
One of the most significant advantages of the React Compiler is that it allows developers to concentrate on writing business logic rather than worrying about performance optimizations. The compiler automatically identifies and implements optimizations, even in areas where developers might not have thought to apply them. This means that developers can write clean, maintainable code while still benefiting from enhanced performance.

Conclusion
The introduction of the React Compiler in React 19 Beta marks a significant milestone in the evolution of the React ecosystem. By automating performance optimizations, it streamlines the development process and empowers developers to build high-performance applications with ease. As React 19 gains traction and adoption, we can expect to see even more innovations and enhancements that push the boundaries of what's possible in web development. The future of React is brighter than ever, and the React Compiler is leading the way toward a new era of fast, efficient, and developer-friendly applications.

Incase if you want to check it out and get your hands dirty refer
https://react.dev/learn/react-compiler