Micro Frontends Pattern Comparison

The desire to modularize the frontend has steadily increased in the last year. One of the challenges for everyone implementing microfrontends is that there is no single pattern to follow. The available architecture patterns are quite different and come with their advantages and challenges.

Usually, each pattern has a distinct area of use even though hybrids and complex mixtures of the available patterns can be used to blur these boundaries as desired. In this article, I want to go briefly over four of the most common microfrontend patterns to understand their main pros and cons.

Build-Time Integration

The presumably simplest, but most reliable integration is the build-time integration. Reliable in the sense that at build-time we know already how everything works and we can join the different pieces to get a single deliverable.

Image for post

Example: an architecture for build-time integration

This kind of mechanism is as old as writing software is. In the end, quite often different pieces have been developed independently at different locations, just to arrive at a single point for final assembly. To say the least, automation is key here. The process is best when it just triggers autonomously when any piece changes.

#front-end-development #javascript #software-development #web-development #micro-frontends

What is GEEK

Buddha Community

Micro Frontends Pattern Comparison

Hire Frontend Developers

Create a new web app or revamp your existing website?

Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence. Hence, to build a visually appealing web app front-end development is required.

At HourlyDeveloper.io, you can Hire FrontEnd Developers as we have been actively working on new frontend development as well as frontend re-engineering projects from older technologies to newer.

Consult with experts: https://bit.ly/2YLhmFZ

#hire frontend developers #frontend developers #frontend development company #frontend development services #frontend development #frontend

Samanta  Moore

Samanta Moore

1623835440

Builder Design Pattern

What is Builder Design Pattern ? Why we should care about it ?

Starting from **Creational Design Pattern, **so wikipedia says “creational design pattern are design pattern that deals with object creation mechanism, trying to create objects in manner that is suitable to the situation”.

The basic form of object creations could result in design problems and result in complex design problems, so to overcome this problem Creational Design Pattern somehow allows you to create the object.

Builder is one of the** Creational Design Pattern**.

When to consider the Builder Design Pattern ?

Builder is useful when you need to do lot of things to build an Object. Let’s imagine DOM (Document Object Model), so if we need to create the DOM, We could have to do lot of things, appending plenty of nodes and attaching attributes to them. We could also imagine about the huge XML Object creation where we will have to do lot of work to create the Object. A Factory is used basically when we could create the entire object in one shot.

As **Joshua Bloch (**He led the Design of the many library Java Collections Framework and many more) – “Builder Pattern is good choice when designing the class whose constructor or static factories would have more than handful of parameters

#java #builder #builder pattern #creational design pattern #design pattern #factory pattern #java design pattern

Micro Frontends Pattern Comparison

The desire to modularize the frontend has steadily increased in the last year. One of the challenges for everyone implementing microfrontends is that there is no single pattern to follow. The available architecture patterns are quite different and come with their advantages and challenges.

Usually, each pattern has a distinct area of use even though hybrids and complex mixtures of the available patterns can be used to blur these boundaries as desired. In this article, I want to go briefly over four of the most common microfrontend patterns to understand their main pros and cons.

Build-Time Integration

The presumably simplest, but most reliable integration is the build-time integration. Reliable in the sense that at build-time we know already how everything works and we can join the different pieces to get a single deliverable.

Image for post

Example: an architecture for build-time integration

This kind of mechanism is as old as writing software is. In the end, quite often different pieces have been developed independently at different locations, just to arrive at a single point for final assembly. To say the least, automation is key here. The process is best when it just triggers autonomously when any piece changes.

#front-end-development #javascript #software-development #web-development #micro-frontends

Abigail  Cassin

Abigail Cassin

1596028440

Micro Frontends — Not A Solution Fitting All

First lets talk about what are micro frontends and how they are useful in various scenarios.

Micro Frontend is basically applying to concept of Micro Services architecture of backend to frontend applications. What that means is to divide an web application into separate isolated units such that different Independent Teams can work upon these units with their own set of rules and frameworks and later on these isolated units can come under a single shell to look as one application and can work as a single application for user. For example an e-commerce application can have cart, products, ordering, invoicing as some of micro frontends.

If you read the explanation given above carefully, you can list down following benefits of micro frontend architecture which are same as micro services architecture.

  1. Isolated Units & Independent Teams.
  2. Freedom of choice of different technology for every isolated unit.
  3. Separate deployment for each unit, so no need of redeployment of all units.
  4. Separation of Code Repository which leads to more control.

#frontend #web #micro-frontends #design #javascript

Royce  Reinger

Royce Reinger

1614568221

Achieving Micro-frontend Architecture Using Angular Elements

Scaling micro-frontends using Angular elements: Hosting on Azure cloud. The micro-frontends architecture creates a buzz in the web app development world.

There are several open-source and third-party libraries that have become de-facto standards to reduce development effort and keep complexity out. But as applications tend to become complicated over time, demanding on-the-fly scalability and high responsiveness, a micro-frontend architecture using Angular elements serves as the need of the hour in fulfilling these criteria. In this blog post, we discuss the importance of building a micro frontend using Angular elements and hosting it on Microsoft Azure, along with a technical demonstration of how we can create a micro-frontend using Angular.

What Is Micro-frontend Architecture?

Micro-frontend is a design approach in which app developers split the coding task into multiple frontend apps to ease the app development process. This helps many teams to work simultaneously on a large and complex app using a single frontend code. A micro-frontend architecture offers a more manageable, independent, and maintainable code. Using micro-frontend architecture, development teams can easily integrate, innovate, and iterate apps. Importantly, it encourages making changes to apps like write, rewrites, updates, and improvements in an incremental manner. In a nutshell, it allows enterprises to develop and deploy enterprise-level apps with greater accuracy.

If you’re still over the fence about the need to adopt the micro-frontend architecture, let’s take a closer look at what micro-frontend development can mean for your web apps:

Smoother Transition CI/CD

Each app integrates and deploys separately, making the CI/CD process a lot easier. For instance, when you introduce a new feature, you do not have to worry about the entire application since all functionalities are independent.

Stacks and Versions

You can choose to have your stack for each app and have different versions of the same stack. For example, your team can have the flexibility and time to test newer versions of the same stack.

No Code Sharing

When building large apps, most enterprises tend to share code across features but may lead to scaling issues later when bugs and interdependency over the app grow bigger. The good thing is, this does not apply with the micro-frontends as code sharing is not required for every component.

#angular #frontend #micro frontends