Logical Model and Concepts for React Applications

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.

• Technology and Frontend Concepts
• Domain (Application Capabilities)

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.

• Level 1 (Composing Components)
• Level 2 (Layered Structure)
• Level 3 (Basic Concepts)
• Level 4 (Process, Concept and Tools)

Level 1 (Composing Components)

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.

Composing Components

Level 2 (Layered Structure)

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.

Level 3 (Basic Concepts)

Now let's look a little more in terms of Frontend concepts within these structures, let's open the subject a little more.

Basic Concepts

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.

Boilerplate

Application development infrastructure and basic folder structure

• Create BoilerPlate with CRA (Create React App)
• Folder and File Structure
• Alternative Boilerplate builds → Try Vite and Next.JS

Routing

SPA is responsible for page routing and rendering of related pages. You can use React-Router, Next Router, TanStack Router libraries in this section.

• Dynamic Loading and Code Splitting
• Basic Routing and Navigation
• Routing with Redirections
• Helmet Title / Meta
• Data Passing Nested Tab Pages
• etc...

Pages

This section includes the structure and management of all pages and nested tab pages, that is, pages managed via Routing.

State Management

This section covers the State method library uses, Global State, Client State and Server State.

• Redux, Redux Toolkit, RTKQuery
• React Query
• Apollo GraphQL Client
• SWR
• Zustand, Jotai, Signal, etc.

Styling

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.

Asset Management

This section is a structure that enables the communication of content that will provide visual communication such as Icon, Image, Video files.

Layouts

Components responsible for the placement of other Layouts or the placement of components within pages.

• Page Layouts
• Component Layouts
• Dashboard Layouts.
• Responsive Structure

Container (Page Components + Container)

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.

Components

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.

• Naming
• Structure
• Props and State Usage
• Rendering Mechanics
• Typography
• Color Palette (BgColor, Color, Hover...)
• States
• Border, Margin, Padding, ...
• Behavior

Authentication

You can use SaaS or In house application layer, Auth0, Cognito, Amplify, Firebase where we authenticate the user.

Authorization

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

Code Quality

There are different ways to ensure the quality of the code, some of them are

• Formatting the Code (Prettier)
• Detection of errors by Linter (ESLint)
• Automating these processes (Husky)
• Testing Methods (Playground)
• PR and PR Review process

Process Quality

In this section, the branch is opened with the correct names, and certain operations can be done automatically when merging the branch.

• Branch Naming And Checker (Husky)
• GitHub Actions

Networking

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.

CI/CD and Cloud Platform

AWS, S3 and Cloudfront (CDN) provide a very cheap Deployment environment for Frontend. This has GitHub Actions along with managing the following issues... .

• Automatic Deploy
• Manual Deploy

Seviye 4 (Process, Concept and Tools)

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.