This article is the continuation of the previous article How to Become a Frontend Master. In this article, I will explain how I modeled the Frontend Application level by level in my own head.
In the real world, all frontend applications use the same the approach.
Frontend Web Applications are created by expertly combining these two structures. As in video games and cartoons.
Scriptwriters' stories → are organized by Directors → Animators, Visual Effects specialists → into Components → Interaction between Components → then into a scene → scenes are combined into a cartoon.
In truth, the structure of a frontend web application is similar. Only by thoroughly understanding these structures and sitting in your thoughts will you be able to detect that diverse apps truly have a similar structure and establish similar patterns as a technical staff.
Now I'll describe these patterns and models to you on the mental levels I've created. I learned that explaining such subjects to individuals on such levels makes the subject easier to understand.
In this article, I will try to explain the subject by going a little deeper each time through the levels.
React enables the development of apps by providing infrastructure via the Component Model and Boundary Context. In reality, everything in our universe is a component. However, the components are adaptable enough to cover each other and form very huge organizational structures.
You can create applications by composing the components you wish.
However, if we categorize these components on an application basis and give a meaning to these layers, we can probably understand the issue more clearly.
Layered Frontend Architecture
Each layer has its own logic and purpose. To summarize;
Application Layer: Bundling and deploying the application
Page Level: Groups pages on routing concepts.
Page Comp: The layer where you manage Business Logics
Platform Comp: It is the component layer that provides visualization and interaction that only takes Props.
Dependency Lib/Assets: It is the layer with 3rd Party Lib, Assets that you use from outside of your project.
Now let's look a little more in terms of Frontend concepts within these structures, let's open the subject a little more.
In fact, Frontend Application is built on the harmonious work of different concepts that we call Frontend Application with each other and with Domain (Application Capabilities) as a whole. Let me talk briefly about these issues.
Application development infrastructure and basic folder structure
SPA is responsible for page routing and rendering of related pages. You can use React-Router, Next Router, TanStack Router libraries in this section.
This section includes the structure and management of all pages and nested tab pages, that is, pages managed via Routing.
This section covers the State method library uses, Global State, Client State and Server State.
There are many Styling infrastructures. We realize the visuality of the application through these Styling and Theme. For example TailwindCSS, SaSS, Style in CSS Libraries etc.
This section is a structure that enables the communication of content that will provide visual communication such as Icon, Image, Video files.
Components responsible for the placement of other Layouts or the placement of components within pages.
In this section, there are components customized according to the domain within the pages. In this specialized component structure, custom components are customized according to the domain and dynamically fed with data. (Container Component approach is valid and can be used in existing Functional Programming structures...) does not create a structure that prevents this.
They are domain independent components inside the pages. In this section, it makes more sense to use our own component structures instead of using large ready-made component libraries.
You can use SaaS or In house application layer, Auth0, Cognito, Amplify, Firebase where we authenticate the user.
After users enter the system, they need to be authorized about which page they can enter, which screens they can see, which operations they can perform. A sample library CASL
There are different ways to ensure the quality of the code, some of them are
In this section, the branch is opened with the correct names, and certain operations can be done automatically when merging the branch.
In this section, XHTTPRequest, Fetch, WebSocket or Server-Sent Event structure that provides communication with the server can be used or libraries such as Axios, GraphQL Request provided by 3rd party libraries can be used on top of these structures.
AWS, S3 and Cloudfront (CDN) provide a very cheap Deployment environment for Frontend. This has GitHub Actions along with managing the following issues... .
In fact, we can divide it into 2 parts: web application development tools and the application itself.
Process Concepts and Tools
The left part you can see in the picture above is about application development, while the right part is about a lot of concepts that we will deal with during the running of the application. The picture there explains that a Web Application is actually a simple Rendering structure and updating this structure according to User Interactions.