Architecture 7 min read

Simplified frontend with layouts – Introduction

The idea, the benefits, and how it’s done
Table of Contents

In this series, we are going to cover:

  • An introduction to layout-based frontend architecture
  • Creating screens using layouts
  • TBD…

Before we jump into how we can create frontend using layouts, we instead will start by why we should prefer using layouts for designing frontend.

Why should we prefer layouts?

When designing a screen, it’s important that not only it looks good but is easy to develop and maintain as well. Also while developing, we would like to reuse as many components as possible.

If we consider a mobile charger as an example, we can observe how its evolution into separate modules from a monolith makes it easy not only for the users to use but also in the manufacturing process.

Getting inspired by the above scenario, dividing the screen not only into components but also incorporating more layers while designing the application turns out to be a better approach.

This takes us to the next question, “What are the actual benefits of using layouts?”.

Enhanced Collaboration

Layout-based architecture facilitates better collaboration between developers within a project.

Enhanced Design Flexibility

Using layout-based architecture helps create well-defined interfaces between layers. This can allow you to customize or replace specific layers without having to make changes to the layers above or below.

Faster Customisations

This architecture provides a clear separation of concerns between different layers. This can make it easier to understand and modify specific parts of the screen without affecting other parts.

Improved Organisation

Using a layout-based architecture can help to organize the content on a page in a logical and clear manner. As the page is divided into layers, the segregation will be clearly visible while developing.

Reduced Efforts

Using layout-based architecture helps us decompose an application into layers. Each layer is responsible for a specific aspect of the application and communicates with the layers above and below it to perform its tasks. This separation of responsibilities can make it easier to develop and maintain a large software application.
And overall, it helps to reduce development efforts by making it easier to understand and modify the application, and by allowing different teams to work on different parts of the application concurrently.

Reusable Components

These can help to save time and effort when creating new pages or making updates to an existing screen.

With all these benefits in consideration, it’s really inspiring to start building application architecture using layouts. That’s what we are going to discuss here. So, let’s take a look at our solution.
How to build a front-end with layouts?
The whole idea is about keeping the learning-curve low and developing at a fast pace. Simply said, keep it close to 1 2 3 4 5 and Snap!!

In our solution, there are the following five building blocks:

  1. Layouts 

    Layouts are predefined templates that are used to position containers, views, and components in predetermined areas. They are used to apply consistent positioning for content across pages in an application.

  2. Pages 

    Pages are all-encapsulating building blocks for a screen. They are essentially templates that define the layout and content of a particular screen on your application.

  3. Containers 

    Containers are layout elements that are used to wrap other elements. These can be nested inside other containers, allowing you to create complex layouts with multiple levels of hierarchy.


    Views are templates that define the structure and layout of a particular section of your page. Views can be used to encapsulate containers and components. Although views are optional, they can be used if we want to bind the controller with UI elements.

  5. Components 

    Components basically return a piece of code that tells what should be rendered on the screen.

Together with pages, views, and containers, as seen above, components are used to render the final screen.

Wrapping up

Now we can understand why we should use layouts for designing frontend architecture and what are the basic building blocks of our solution. This will help us proceed further to understand how to create screens using layouts for our frontend applications.

Need help with technology
for your digital platform?

Get to know how technology can be leveraged to turn your idea into a reality.
Schedule a call with our experts

unthinkable ideas