Architecture

Video Session: How Micro Frontends Reshaped Frontegg’s Development

Rotem Zifroni, Frontend Team Leader at Frontegg, recently conducted a Micro Frontend session at the 2021 iJS New York. She talked about the massive impact Micro Frontend implementation is making on Frontegg’s frontend development, architecture, CI/CD, and overall processes. Did you miss it? We have the video recording for you. 

What are Micro Frontends?

Micro Frontends have been in the conversation since late 2016, when they were discussed extensively at the Thoughtworks Technology Radar. In a nutshell, they are microservices that have been baked into the frontend realm. This allows devs to ditch the old Frontend Monolith methodology, allowing them to build dynamic web apps that sit atop the microservice architecture.  

The philosophy behind Micro Frontends is that teams manage specific features via multiple and loosely coupled frontend apps that can be deployed separately as per the requirements. This methodology blends seamlessly into modern DevOps setups, helping organizations eliminate bottlenecks, reduce cross-department friction, and improve time-to-market (TTM).

The Micro Frontend Application
The Micro Frontend Application

Micro Frontends are helping create a segmented approach to app development, where an end-to-end (DB to UX) optimization is achieved.

Related: Implementing Microservices in NodeJS

Micro Frontends and Frontegg: A Winning Formula

Frontegg faces many tech challenges and complex use cases on a daily basis. Making everything self-served and multi-tenant by design is just the beginning. The product is embedded in multiple customers’ apps and the state needs to be communicated (in and out). Last but not the least, all Frontegg offerings need to be framework-agnostic. Micro Frontends to the rescue.

Breaking up the app into “microapps” can allow independent dev teams (on-prem or remote freelancers) to work in tandem in order to achieve:

  • Faster Development Times

There are less bottlenecks when the development responsibilities are spread across multiple autonomous teams, which also become more productive.

  • Better Scalability

Scaling up becomes easy when the app is chopped up. Team leaders and CTOs can manage their resources efficiently and hire external teams if needed. 

  • Less Cross-Department Friction

Deployment independence helps combat tight deadlines and backlogs, while allowing teams to be more transparent and collaborative.

  • Easier Maintenance

Micro Frontends help upgrade or rewrite code smoothly. Testing becomes easy and the same applies to mitigation tasks. The CI/CD pipeline is optimized. 

  • Technological Flexibility

Teams become more independent in making their own technological choices. For example, one team can develop Vue.js and the other Angular.

We’ll leave the in-depth coverage of the Micro Frontend implementation for the video tutorial, where Rotem Zifroni dives into coding examples and specific use cases to show how things work in real-world scenarios. Your development teams can enjoy the aforementioned benefits only when the Micro Frontends are implemented wisely. So grab your coffee and get started now.

ACCESS THE RECORDING

A former Wix-er, Rotem is a social entrepreneur who happens to be a professional tennis player and coach. In her free time, she loves to bake Challah and cakes. Rotem will never pass up on chances to go skiing in the Swiss alps. Follow her on LinkedIn to stay in the loop and learn more about new development hacks that can help you elevate your performance.