In the internet world, we spend a lot of time browsing web applications. But most of us don’t know how these apps or websites work in the background. However, programmers or those interested in software are very inclined to terms like frontend and backend. Micro Front-End, a term we have heard frequently recently, attracts the attention of many businesses.
What is Front End?
Every part of a website that users can see and interact with is done in the front-end part. The equivalent of the front end is known as the “front end”. The colours to be used on the website, where the content will be found and which font to use are decided in the front-end section. The front-end section was created with coding languages such as HTML, CSS, and JavaScript.
Front-end developers, on the other hand, are also known as the architect of a website. These software developers are the people who make it easier for the users to work within the site and leave the site in a satisfying way.
What is Micro Front End?
Micro-Front End architecture has just started to be used by companies. But it also managed to attract attention in a short time. This architecture helps front-end teams work in large and complex layouts. It plans to do this by breaking up front-end monoliths into smaller chunks. This makes managing these apps much easier. These small applications are then brought together and presented to the user in this way.
Micro Front End was first spotted on ThoughtWorks Technology Radar in 2016. The micro front-end operates on the basis of a microservice architecture. Micro front-end aims to build a website or web application by completely independent teams. Each team can specialize in a different business area. These teams can do a good job working completely independently of each other. The micro front-end aims for exactly that.
Advantages of Micro Front End
Now let’s examine the advantages of this new architecture.
- A healthy division of labour becomes possible with the micro front-end. The steps required for implementation are easily split between teams, and anyone working can take responsibility. This becomes a huge advantage, especially for companies that work with large teams.
- Thanks to this architecture, teams can work independently and develop the application or website much faster. This means saving time.
- With the micro front-end, you can more clearly understand in which area there is a problem or in which area you need an expert. It will be sufficient to consult an expert only for the area you are missing. The specialist does not need to have knowledge of other technologies. For example; If you are going to consult an expert on code software, it will be sufficient for this person to have knowledge about code software only. Because in other areas, other teams will get things done.
- One of the biggest advantages of this architecture is that it is easily testable. In this way, you can easily see and intervene by testing deficiencies and errors.
- The codebase, called Codebase, is smaller and more manageable.
- With the micro front-end, you can upgrade and update front-end parts in a much simpler way. If that’s not enough, you also have a chance to rewrite it.
- Distribution is independent.
- The micro frontend allows you to use multiple frameworks for your app or website.
Micro Frontend Basics
- The most basic concept of this architecture is independence. That is, each team should be able to work and develop independently of the other team. Independently, private details of the application can also be hidden.
- Separating fields from each other is also among the most essential concepts. Achieving this is seen as a fundamental step. It is also very important to give a name to these fields. For example; Like CSS, local storage, and cookies.
- It is also very important that you prefer native browser features over private API when using this architecture. If it is not necessary to install a global system, do not install it. If you need to set up a cross-team API, try to set it up in the simplest way possible.
- Even if all teams are in the same frame, do not share and do not allow each other’s working hours. Make sure teams are fairly isolated from each other.
- Another of the most important concepts for micro front-end is flexible web design. A useful and flexible website or app is essential.
What is a fragment? How does it work?
Every application developed and emerging in the Micro Front-End architecture is called a fragment. The fragment can also be called a simple HTTP service developed with Node.js. Fragment works by returning as generic invoked codes (JS, CSS) and cannot contain another fragment in a fragment.
These fragments are used in an application called layout service. Fragment services come together in the layer named Layout service. When Fragment is called, HTML, js, CSS output is returned, Layout combines these fragments. Layout service selection is entirely up to you.