Posted on

Web Application Architecture Best Practices in 2021

Web application architecture is a high-level structure that determines the way your product and business will operate, perform and scale. These days, the stage of choosing web app architecture is often where you get lost in a variety of options available on the software development market. The more new names and trends appear, the harder it becomes to decide. Isomorph, Progressive Web app, SPA, or SSR – what’s the best modern web app architecture for you, and which criteria to use for evaluation? In this article, we cover the major front-end architecture types available for the Web and explain the peculiarities of their implementation.

What Is a Web App vs Website?

First, let’s define a web app. It’s a client-server application, where there’s a browser (a client) and a web server. The logic of a web application is distributed among the server and the client, there’s a channel for information exchange, and data storage located locally or in the cloud.

Posted on

Developing Loosely Coupled Micro Frontends via RxJS

My last article Developing Micro Frontends with Single-Spa explained how to break down monolithic web applications in micro frontends using single-spa. In order to ensure loosely coupling between the micro frontends, I’ve used RxJS in my sample application.

This article is part of a series of articles that documents how to modernize a sample Java EE application from 2010 with modern technologies. The sample application is a simple e-commerce application. The original application and the source code of all subsequent modernization steps is available as open source on GitHub.

Posted on

Developing Micro Frontends With Single-Spa

In the process of building new or modernizing older applications, backend functionality is often broken down into multiple microservices. Without modular frontends though, applications often don’t gain the benefits of modern cloud-native architectures like continuous deliveries and the abilities to update components separately from each other.

In my previous article Using Micro Frontends in Microservices based Architectures, I explained how to modularize a sample e-commerce web application. This allows, for example, to add rating functionality to the catalog user experience without impacting other parts of the user interface.

Posted on

Achieving Micro-frontend Architecture Using Angular Elements

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.

Posted on

Build Micro Front-Ends Using Angular Elements: The Beginner’s Guide

Front-end development has grown so much over the last decade from pure HTML and CSS design to topics such as high interactivity, accessibility, testability, and security. In order to meet these needs, most application teams have made distinctions between backend and front-end development teams.

In addition to that, the application functionality grows steadily and, at a certain point, it becomes impractical to have multiple teams collaborate on a single code base.

Posted on

A Look at Micro Front-Ends, Their Architecture, and More

There has been much buzz about micro front-ends as of late, but have you been wondering what it is? Well, allow us to explain. Simply put, a micro front-end is akin to the concept of microservices, just applied to a web app's front-end. With micro front-ends, web apps are integrated into modules to achieve a specific business-related need that is owned by various teams. Also, every team develops the feature end-to-end, from the UI, all the way to the database and backend. As you can see, the concept remains the same as with microservices — you make smaller independent services work in unison to serve a more significant application.

More often than not, when organizations take on a microservice architecture on the backend, the front-end apps are left as monoliths. What is that, you ask? Well, unified architecture refers to when you use a single team to build web apps with unique technology, and all of the development is completed altogether. Here the backend is organized following the business's needs, but the front-end continues to be jammed into just one app. It can throw up various issues over time. Thankfully, micro front-end architectures allow the entire application to be divided up across the complete stack according to the business domain. It provides the front-end development teams with similar levels of speed, testability, and flexibility as the ones available to the backend team via microservices.