Architecture Patterns:
In this section, I explore the React.js architecture implemented in building the Apex front-end, highlighting its effectiveness in building a scalable and maintainable application.
Since we used Next.js and the page router that they provide. I implemented a page level component, which would pull in multiple lower level components to build the UI.
The page level component can contain multiple child components. Pretty standard stuff.
This is where it gets interesting. At our component level is where the magic happens. At this level we start to break the application up into various pieces. These pieces have been carefully selected so that we have minimal logic in the components.
The logic and base UI components will each be in their dedicated portion of the app. This allows us to have small building blocks that we can use to easily create new components to be used.
See the diagram below, and I will explain each box in detail.
Custom HTTP Client Wrapper
The custom HTTP Client Wrapper is built around fetch() which comes default in the browser. By building our own custom function wrapped around it, we can standardize the responses we get back from our API’s within our app. It also allows us to automatically attached any headers and authorization tokens to our requests.
The standardization of our API responses in the app looks like the following code:
// make a request to get user data
const { data, error } = await getUserData(userId)
// check if we have anything in the error variable
if (error) {
// if we have an error, handle the error
}
// if there is no error, the request has been a success
// we can now do something with the `data` variableStateful API Calls (SWR)
These HTTP GET calls are stateful as we are caching the data that we receive from the API. This greatly improves the user experience throughout the app, as we do not have to re-fetch the data which can slow down page load times. To do this, we are using a library called SWR, which handles all of the caching for us.
TypeScript Interface Library
This library contains our global TypeScript interfaces. We primarily use these interfaces to verify the structure of the data we receive from our API calls. Because of this, these interfaces will be used within the components themselves, as well as the Stateful API calls.
Stateless API Calls
These API requests (POST, PUT, PATCH, DELETE) are stateless as we do not care about the data that we get back from them (we only use GET to fetch data from our API).
The only thing we care about here are whether or not these requests are successful or not.
So when making these calls, we check for an error and handle that appropriately.
Context API
There are 2 kinds of state we handle in React.js applications, data fetching state, and UI state. Since we have SWR to handle our data fetching, we use the Context API to handle UI state such as models, and alerts.
UI Components
Any low level components that will be re-used throughout the app will be put in this folder. This includes things like Inputs and Buttons. This folder is key as it allows us to quickly piece together things such as forms without worrying about having to create another button.
Custom Hooks
Hooks are a powerful feature of React, and any reusuable hooks that we can create will go into this folder.
All of our stateful data fetching calls are created as custom hooks.
By implementing this architecture pattern throughout the app, it has allowed us to easily implement new features, ensure that our software is scalable, and future proof onboarding of new developers.
