Frontend Architecture: The Architecture (Part. 1)

1. What is "Frontend Architecture"?

What is the first definition that will be popped into your mind when you hear "Frontend Architecture"?
I know that the definition may be a little bit vague, but let's try to think about some definitions we can conclude from our experiences and the books.

• Skeleton and File Structure
• The Big Picture
• Communications.
• Building Blocks
• A plan
• A blueprint
• Strategy and Vision
• Frameworks, Tools and Technical Direction.
• Blocks that are expensive to change later
• Technical Leadership
• Foundations
• Awareness of Constraints and Restrictions
• Business
• Standard and Guidelines
• Processes (e.g. Code Review, Git Flow, CICD)
• Path to achieve the Goal.
• Elegant (e.g. clean code, components design)

So, what do you think? Is there another definition you think about but not listed here?

It is hard to find once and for good definition for the "Frontend Architecture" but in general we can say there are two common themes for the "Frontend Architecture". Frontend Architecture as a noun and Frontend Architecture as a verb.

Frontend Architecture as a noun

We can summarize as being about structure and the skeleton. It's about the decomposition of a product into a collection of smaller building blockers and the interactions/relationships between these building blocks.
e.g. Building the main blocks like cross-cutting blocks that will communicate with other blocks like pages, containers and components. Cross-cutting blocks here like logging and exception handling blocks, http block, main managers or helpers like storage manager, etc. The file structure or the skeleton you will build by following some well-known patterns, like feature-first, component-first, type-first, MVC pattern, atomic pattern, etc.

Frontend Architecture as a verb

As a verb, the process of creating the architecture, is about translating the architectural drivers (functional requirements, non-functional requirements, constraints and principles) into a technical solution, technical roadmap, communicating the vision to a number of stakeholders both inside and outside the software development team and introducing the technical leadership.

Generally, the Frontend Architecture is a collection of tools and processes that aims to improve the quality of frontend code while creating a more efficient and sustainable workflow.

Frontend (Application) Architecture

In General, the Application Architecture is what we as software developers are probably the most familiar with.
We have today different kinds of applications, like, Mobile apps, Backend apps, Frontend apps, and some other types of Apps. we can define an application as a single solid unit developed in a single technology or language.

Yes, we may have an "application" developed with different languages and technologies, for example, a micro-frontend application or a micro-service application. But in the end, we can say that each is a single unit.
Application Architecture is about looking inside the app to understand how it is designed and built. This includes how this application has been broken down into small building blocks, and understanding the patterns, frameworks, and libraries in use.

In the end, the application architecture cares about what is happening deep inside this single-unit (a.k.a. application) and how it is built.