DEV Community: Ramachandra Petla

Micro Frontends

Ramachandra Petla — Thu, 10 Oct 2024 16:26:01 +0000

We’ve all enjoyed building creative front-end applications using our favorite library, React. But did you know that we can break down large, complex applications into smaller, more manageable pieces? And, to make it even better, you can use different frameworks for each of these pieces!

I recently dove into this development model, and even though it's been around for some time, I’m amazed I hadn’t fully explored it until now.

If you’re like me and hadn’t come across this before, let me break it down for you. You’ve probably heard of microservices, right? If not, here’s a quick explanation. In the old days, we used to build applications as a single monolithic unit. These were often massive and hard to grasp, especially if you were new to the codebase—what we typically refer to as "legacy" applications. Some clever folks thought, "Why not split these big applications into smaller, independent units to make them easier to manage?" And thus, microservices were born. Each small unit provides a set of services, but the core functionality of the original application remains the same, just divided into manageable chunks.

Now, if you’ve followed so far, you might be thinking, "So this new model must be similar to microservices." And you'd be right! The concept is indeed similar, but there’s a key difference in the implementation. While backend services can be deployed and run independently (though they can still communicate with each other), the frontend approach requires a slightly different strategy.

Now, let’s dive into the concept of Micro Frontend Architecture (MFE).

Just like microservices in the backend, micro frontends break up the frontend monolith into smaller, independently developed, tested, and deployed units. Each of these units represents a different part of the application—like a specific feature or section. This allows different teams to work on different parts of the application, using the tools, frameworks, and libraries that best suit their needs.

Why Micro Frontends?

In traditional frontend development, a single team or multiple teams work on one large codebase. Over time, this can get messy—long build times, complex dependency management, and hard-to-track bugs. With micro frontends, you’re essentially breaking this down, so each team manages a smaller scope. This approach provides a few key benefits:

Team Autonomy: Different teams can independently develop, test, and deploy their micro frontends. This allows them to use different frameworks (yes, you can have React for one module, Angular for another, and maybe even Vue.js elsewhere).
Scalability: With teams working independently, they can scale their development efforts without being blocked by other teams working on the same codebase. This accelerates development speed and reduces bottlenecks.
Easier Maintenance: Since the application is broken into smaller pieces, each micro frontend can evolve separately. This leads to easier maintenance and debugging, as you no longer need to sift through a gigantic codebase to find a problem.
Incremental Upgrades: One of the biggest pains in frontend development is upgrading frameworks or libraries. With micro frontends, you can upgrade one part of the application without affecting the rest, making transitions smoother.

How Micro Frontends Work

The core idea is to split the frontend application by features, and then stitch them together at runtime. This can be done in several ways, including:

Iframe-based Approach: While not common anymore, this involves embedding different micro frontends using iframes. It’s easy to implement but can lead to poor user experiences due to performance and styling issues.
JavaScript Bundles: Different micro frontends are deployed as independent JavaScript bundles, and these are combined on the client side. This is a more modern and flexible approach.
Web Components: Using web standards like custom elements, shadow DOM, and HTML templates, micro frontends can be built and deployed as reusable components that work seamlessly across frameworks.

-
Server-side Composition: In this method, the micro frontends are composed server-side, and the user receives a fully-rendered page. This is great for performance but might be more complex to implement.

Key Considerations

Communication Between Micro Frontends: Though each micro frontend is independent, they often need to communicate. This can be managed through events, a shared state, or API calls.
Shared Dependencies: While it’s tempting for each micro frontend to include its own libraries, it’s important to manage shared dependencies to avoid bloating the final bundle size.
Routing: You’ll need a strategy for routing between different micro frontends. This can be done through a central router that loads the appropriate frontend based on the URL.

Conclusion

Micro frontends bring the same benefits of modularity and scalability that we love in microservices to the frontend world. By splitting large applications into smaller, independently managed pieces, we can reduce complexity, boost team productivity, and deliver more flexible, maintainable code.

If you’re dealing with a large, unwieldy frontend, maybe it’s time to explore the world of micro frontends!

Beginners guide to ReactJS

Ramachandra Petla — Thu, 13 Jul 2023 19:05:33 +0000

React is client side JavaScript Library that allows us to create Dynamic user interfaces, Single Page Applications (SPA) following the component structure, thereby making the life of developers easy.

This article is for React beginners who is looking to get started with React. In this article you can learn everything you needed to create a web application using ReactJS.

Before moving forward with our little project, lets understand some important concepts of React

What are Components
Writing Markup with JSX
Props and State
Handling Events
React Hooks

What are Components ?

We can create Components in two ways. Functional components and Class components

Class component

If you want to create a Class component you need to extend the Component class of React, and your class component should have render() method and it is mandatory method. All the JSX syntax is returned inside the render method.

render() methods needs to be pure. i.e. you should not update the component state inside it. Because when JSX tries to render the component it looks for components state and props and renders it again if any changes occurred. If you update component state inside render, JSX will recognize it and render it again and again, which is not acceptable.

If you are wondering about state and props, don’t worry. We are going to learn them below

To create a class component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Each component has several life cycle methods. These methods can be override with custom code to run at particular times in the process.

Every React Component (Class / Functional) has 3 lifecycle phases: Mounting, Updating, Unmounting.

A component mounts when it renders for the first time

From the second time, Component updates

When the component is removed from the DOM, it is said to be unmounted

Class components has LifeCycle methods that run at each phase.

Mounting Lifecycle methods:

componentWillMount(), render(), and componentDidMount().

componentWillMount() will be called first followed by the render() method and finally the componentDidMount() method.

Updating Lifecycle method:

shouldComponentUpdate() it is called before render() is called. Component only renders if shouldComponentUpdate() returns true.

Unmounting LifeCycle method:

componentWillUnmount()

We are not going much deeper into the class components.

With the advent of the Functional components, The use of Class components is minimized. In this article we are going to use Functional Components only.

Functional Component:

With function Welcome() { } you define a JavaScript function with the name Welcome.

This function should have return statement

Functional Components are same are JavaScript Functions, except that their name should start with a capital letter, or they don’t work. function welcome() { } is wrong. function Welcome() { } is right

Sample Functional Component:

function Welcome(props) {
   return (
         <h1>Hello, {props.name}</h1>
     )
}

export default Welcome;

In Functional Components we cannot use LifeCycleMethods, instead we have Hooks which are introduced with React 16.8

We can use functional components same as the Class components.

What is JSX?

JSX is a syntax extension to javascript. Whatever you have seen in the previous section in the return statement is the JSX syntax.

const element = <h1>Hello, world!</h1>;

Consider the statement above. It is neither HTML nor String. It is called JSX. JSX is used to create UI templates by utilizing the full power of JavaScript

In JSX syntax, we can write HTML elements and use React components with In.

<div>
    <h1>Intro Heading</h1>
    <IntroSection />
</div>

This is what a component looks like. We can reuse this component inside other components along with HTML elements and JSX compiler with understands it and converts it into html.

function IntroSection({name, email, address}) {
    return (
        <div>
            <p>Name:{name}</p>
            <p>Email:{email}</p>
            <p>Address:{address}</p>
        </div>
    )
}

export default IntroSection;

When writing JSX in React, there's one caveat: you must return one parent item. Not more than one. For example, this is not possible

These components throws and error

function FuncComp() {
    return (
        <div>Parent 1</div>
        <div>Parent 2</div>
        <div>Parent 3</div>
    )
}

Instead you need to wrap these inside another parent or use special JSX fragment <> </>

it is same as <React.Fragment> </React.Fragment>

//This is going to work

function FuncComp() {
    return (
        <div>
            <div>Parent 1</div>
            <div>Parent 2</div>
            <div>Parent 3</div>
        <div>
    )
}

//This could work as well

function FuncComp() {
    return (
        <>
            <div>Parent 1</div>
            <div>Parent 2</div>
            <div>Parent 3</div>
        </>
    )
}

function FuncComp() {
    return (
        <React.Fragment>
            <div>Parent 1</div>
            <div>Parent 2</div>
            <div>Parent 3</div>
        </React.Fragment>
    )
}

Props and State

Props:

React component uses props to communicate with each other. Every parent component can pass information to their child components in the form of props. You can think of props just like HTML attributes.

function StudentGroup() {
    return (
        <Student />
    )
}

The StudentGroup component has a child component Student

In the above snippet, StudentGroup haven’t passed any props to the Student component

function StudentGroup() {
    return (
        <Student name={studentName} age={studentAge} email={studentEmail}/>
    )
}

The Student component can read the information from the parent component as follows.

function Student(props) {
    return (
        <div>
            <p>Name: {props.name}</p>
            <p>Age: {props.age}</p>
            <p>Email: {props.email}</p>
        </div>
    )
}

// OR (use Object Destructing)

function Student({name, age, email}) {
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
            <p>Email: {email}</p>
        </div>
    )
}

State:

When you create components, It need to preserve some component specific information based on the user interactions. For suppose, you created a counter as a component that increases its value on click of button. The current value of the counter is the information that we are going to store in the state, because we need to constantly update this value on every interaction with the button. Whenever the user clicks on the button, the UI should updated instantly with the new value. This is where the state comes into picture. State is specific to component. Every instance of component has its own state.

The state of component can be managed by its own, or it can be managed by its parent component. If it is managed by parent component, with change in state is affected by all the component instances.

State managed by Component

State managed by Components Parent

For functional component, state is created using useState hook


//State managed by Component
import {useStae} from 'react';

function Counter() {
    const [counter, setCounter] = useState(0);

    const increaseCounter = () => {
        setCounter(counter++);
    }
    return (
        <div>
            <p>Counter: {counter}</p>
            <button onClick={increaseCounter}>Increase Counter</button>
        </div>
    )
}

//State managed by parent
function Counter({increaseCounter}) {
    return (
        <div>
            <p>Counter: {counter}</p>
            <button onClick={increaseCounter}>Increase Counter</button>
        </div>
    )
}

function ParentComp() {
    const [counter, setCounter] = useState(0);

    const increaseCounter = () => {
        setCounter(counter++);
    }

    return <Counter increaseCounter={increaseCounter} />

}

Hooks

React provides a bunch of standard in-built hooks:

useState: To manage states. Returns a stateful value and an updater function to update it.
useEffect: To manage side-effects like API calls, subscriptions, timers, mutations, and more.
useContext: To return the current value for a context.
useReducer: A useState alternative to help with complex state management.
useCallback: It returns a memorized version of a callback to help a child component not re-render unnecessarily.
useMemo: It returns a memoized value that helps in performance optimizations.
useRef: It returns a ref object with a .current property. The ref object is mutable. It is mainly used to access a child component imperatively.
useLayoutEffect: It fires at the end of all DOM mutations. It's best to use useEffect as much as possible over this one as the useLayoutEffect fires synchronously.
useDebugValue: Helps to display a label in React DevTools for custom hooks.

To Create a React application, you need to have npm installed on your machine

Open terminal on mac or CMD on windows and enter the below commands

npx create-react-app react-example

This is going to create a new react project with name ‘react-example’ in the directory where you executed that command

This will the basic directory structure you will get if you create app using create-react-app

index.js is going to be the starting point of the application

App.js is the First component that is wrapped inside index.js

You can start creating new components and wrap it inside App component

In our next article, we can create a simple website using React. Until then keep messing up with React

Spring Security: Configuring UserDetailsService (Part 1)

Ramachandra Petla — Tue, 20 Jun 2023 02:02:03 +0000

When we create an API for providing services or an web application, it is crucial to provide authentication and authorization to the project. In this post I am going to tell how to use Spring Security module to make the necessary security configurations.

To start, I am going to create a RestController with two endpoints "/", "/welcome" and try to run the application and see what happens.

@RestController
public class HomeController {   
   @GetMapping("/")
   public String sayHello() {
      return "Welcome to Spring Security!";
   }
   @GetMapping("/welcome")
   public String sayHello() {
      return "Welcome to Spring Security(Protected)!";
   }

}

Here is the result !

Lets see what happens if we add spring security to the project dependency

<dependency>             
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-security</artifactId>
</dependency>

Now if we run the application and try to hit and endpoint you will be redirected to a login page which will look like below.

Well, I don't remember adding a /login endpoint nor configured any users. But how the login page rendered and why?
Spring security is enabled just by adding the dependency to the classpath. By default all the routes/endpoints needs authentication to access. But what credentials are used to login? I don't remember configuring any credentials!. It is because if we didn't configure it spring will provide a default random credentials at run time

Security Configuration

Spring MVC sends all incoming HTTP requests into a single servlet named DispatcherServlet after passing through set of filters. The DispatcherServlet is responsible to send the HTTP request to the corresponding Controller.
When we add Spring Security to the classpath a set of Security Filters are added to the FilterChain. These filters intercept every HTTP request before they come to the Controllers. This is where Spring security authenticates the HTTP requests and decides either to forward or reject the request.

By default, every HTTP request is authenticated. But, we can override this behaviour by making our own security configuration

In order to do that, we need to provide our custom SecurityFilterChain bean

Default behaviour is due to the bean

@Bean
@Order(SecurityProperties.BASIC_AUTH_ORDER)
SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception {
    http.authorizeHttpRequests().anyRequests().authenticated();
    http.formLogin();
    http.httpBasic();
    return http.build();
}

Now, we can have our own bean in a brand new configuration class like this.

@Configuration
class ApiSecurityConfiguration {    
   @Bean
   SecurityFilterChain customSecurityFilterChain(HttpSecurity http) throws Exception {
      http.authorizeHttpRequests((requests)-> requests
           .requestMatchers("/welcome").authenticated()              
               .anyRequests().authenticated());
       .formLogin();
       .httpBasic(Customizer.withDefaults());
      return http.build();
   }
}

The above configuration makes /welcome endpoint is authenticated and any endpoint other than that are publicly accessible

But we still have not set up our own set of users.
Before moving forward with Users setup, we need to understand the how the request is processed.

UserDetailsService (Interface) -> loadUserByUserName(String username)
This is the Core Interface which loads user specific data

UserDetailsManager(Interface extends UserDetailsService) Extension of userDetailsService which allows to create, update, delete UserDetails (see method signatures below)

createUser(UserDetails user)
updateUser(UserDetails user)
deleteUser(String username user)
changePassword(String oldPwd, String newPwd)
userExists(String username)

Sample Implementation classes ( for UserDetailsManager interface ) provided by Spring Security are InMemoryUserDetailsManager, JdbcUserDetailsManager, LdapUserDetailsManager

All the above interfaces and classes use an interface UserDetails which provides core user information

For proving user details for authetication, we need to implement UserDetailsService interface and provide it as a spring bean. We can either use the default implementations provided by spring or we can have our own custom implementation.
If we are building enterprise application, it is recommended to have your own custom implementation. But for simplicity, we will use the default implementations provided
In this post, we will see how we can configure InMemoryUserDetailsManager

@Bean
UserDetailsService userDetailsService() {
   UserDetails admin = User.withDefaultPasswordEncoder()                         
                           .username("admin")                                
                           .password("12345")                                
                           .authorities("admin")                                 
                           .build();    
   UserDetails user = User.withDefaultPasswordEncoder()
               .username("user")
               .password("54321")
               .authorities("read")
               .build();
   return new InMemoryUserDetailsManager(user, admin);
    }

Here, we are using DefaultPasswordEncoder(). But, in general we need to provide a PasswordEncoder bean. Spring provides us with many password encoders
For Example,

@Bean
PasswordEncoder passwordEncoder() {
   return new BCryptyPasswordEncoder()
}

Now, with these configurations, we can access the protected routes using the provided users in InMemory.
We can also get users from database using default JdbcUserDetailsManager bean offered by spring Security
In order to use this we need to have a datasource
We are going to use mysql for this application. Datasource configurations are done in applications.properties file or we have application.yml

spring:
  datasource:
    platform: mysql
    url: jdbc:mysql://localhost:5432/mydb
    username: foo
    password: bar
    jpa:
       show-sql: true
       properties:
          hibernate:
        format_sql: true

By Default JdbcUserDetailsManager default implementation, assumes we follow a database schema which has users(id, username, password, enabled) and authorities(id, username, authority) tables
So, if we are using JdbcUserDetailsManager implementation we need to follow the same ddl schema
Replace InMemoryUserDetailsManager bean with JdbcUserDetailsManager bean (Make sure you pass DataSoucrce object)

@Bean
UserDetailsService userDetailsService(DataSource dataSource) {
   return new JdbcUserDetailsManager(dataSource)
}

Well, we have configured our application to use InMemory UserDetails and configured to fetch user details from database as well using default implementations.

But this is not enough for enterprise application, since we might not follow the same naming convention in the database based on client recommendation. In that case we cannot use JdbcUserDetailsManager.

But that is a topic for another day.
I will write more about it in my next post.