Software Architecture Patterns for Front-End Development

Architecture Patterns for Front-End Development

Ali Zeynalli

--

Photo by Luca Bravo on Unsplash

Different Software Architecture patterns are widely researched and applied in back-end development. Front-end, beside its relatively short history, lacks such kind of well-established techniques. Nevertheless, in last years with the growing popularity of different front-end frameworks like Angular, React etc. different architectural best practices are also developed. Let us have a look at some patterns that are inevitable part of nowadays’ front-end projects.

MVC (Model-View-Controller) was one the first patterns that was introduced decades ago, where you would try to split different concerns such as Presentation, Data Handling to different actors. Over time derivatives of MVC: MVP and MVVM are developed. Modern Front-End Development is greatly influenced by MVC (even from above mentioned successors…) and some points did not change. e.g. Separation of Concerns (SoC).

In computer science, SoC is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program.

SoC is the main trigger that following architecture patterns are initiated:

Modular Architecture — if we take Angular Framework as an example, we can see that application is splitted to different modules based on different domains. Each Module hast its own NgModule, which are independent containers, being gathered all in AppModule: mother of all modules. Also Core and Shared Module are important Modules to be considered.

Micro Frontends — this is just extension of micro services architecture to front-end layer. As project grows with multiple functionalities it becomes unmanageable in terms of dependencies, builds deployments. Based on micro frontends concept front-end app will be separated to different use case areas. This use case area either have responsible front team members or in big applications separate teams handling end-to-end micro areas.

Component Architecture — this pattern is also derived from SoC, being more fine granular separation of different presentation units in components. This means…

--

--

Ali Zeynalli

IT-Architect | BMW Group | M.Sc. Technical University of Berlin