Architectural Approaches in Front End: Best to Know How It's Designed Before Using It

In the following article, Grisha Vasilyan, one of our front-end professionals, will walk you through the main architectural approaches that get your development game going.  

We, as front-end developers, work on different frameworks/libraries like React, Angular, Vue, and others. But the most efficient way to work with these technologies is through understanding how the technology is actually designed and what type of concepts are used. In this article, we learn about some architectural approaches which help us work with front-end technologies more efficiently.

What is Software Architecture?

Software Architecture of a system represents the design decisions related to overall system structure and behavior. Architecture helps stakeholders understand and analyze how the system will achieve essential qualities such as modifiability, availability, and security. 

Definition from: Software Engineering Institute

This definition gives us a couple of key ideas: the first is that architecture is about the design decisions which are no other thing than the rules and constraints that define how a system should be constructed and what its desired behavior is. And the second are the essential qualities that define the success criteria of our system (quality, availability, scalability, and others).

Single-Page Applications (SPA)

Many front-end frameworks or libraries use this concept for building rich front-end applications. Front-end applications designed with this approach simulate desktop applications․

SPA consists of one or more JavaScript files that encapsulate the entire application logic, and those files are loaded up front. In SPA, the entire application runs as a single web page.

SPA uses a client-side rendering approach which means initially all related files are loaded up front from the server, and all the rendering processes happen inside the browser using a client-side rendering technique.

The user session starts from the initial load. The starting point of the application is an HTML file which is loaded first. The HTML file includes JavaScript files which are responsible for providing all interactions on the client-side. This is an advantage because we don’t have a UI reload, all the rendering is done on the client-side.

In the image above we can see 4 steps that describe how the user session is started and what type of operation is done. Let’s analyze these steps:

   - The browser sends a request to the specific application, as a response server receives an HTML document

   - After the HTML document is loaded, the process of loading JavaScript files starts

   - After loading all the required Javascript files, the application starts the execution process

   - After all the files are loaded, our application is now viewable and interactable

After the initial request, all the operations are done on the client-side, but the server’s role is vital for all the data-related transactions.

We use XHR to asynchronously load JSON-typed data from the server. When the data is received, the process of re-rendering starts and a new view is generated.

As I mentioned before, in SPA we have only one entry point for our application which is a shell (index.html).

All new views are generated using a client-side rendering approach by JavaScript. In SPA we don’t have complete pages, those are all views (sections, regions). Subsequent portions of the application are loaded dynamically and independently of the shell without a full-page reload, giving the user the perception that the page has changed. 

Build and Deploy

After the SPA building, it gives us static assets: a single HTML file which is our shell, JavaScript files, CSS files, and media files (image, video).

The deployment process is very easy and cheap, for certain kinds of lightweight applications it can even be free. For SPA we don’t need any server to run our application, it can be any static server. For instance, we can use GitHub pages for our application and it’s free.

Many frameworks or libraries use this approach to create SPA such as React, Angular, Vue, etc.

Isomorphic or Universal Applications

Isomorphic or Universal applications are web applications where the code is shared between the server and the client, and can run in both environments.

In those applications, we can decide which part should be rendered on the server-side and which one on the client-side.

Isomorphic applications are a combination of server-side and client-side rendering. This means that we can render part of the page on the server and part on the client.

So, by now we have discussed the client-side rendering technique in the SPA section. We have a missing part there though which is the server-side rendering. Let’s now discuss what server-side rendering is and then go through the Isomorphic approach.

What is Server-Side Rendering?

In the server-side rendering technique, every new HTML page is constructed on the server. The browser then receives the new HTML page and, via a UI refresh, the user sees the new view containing the requested data.

This process happens every time when we request a new page. This is an old approach but is still in use.

Now it’s time to understand how isomorphic applications work. As we said, isomorphic applications give us the ability to run our application in both of these environments: the server and the client. There is one hybrid approach which we can use to construct part of our application on the server to improve the time of interaction and then load additional JavaScript files for transitioning our application to SPA.

In this approach, after the initial request, our application transitions to SPA. This is an advantage because when the client receives part of the page, it’s partially rendered and search engines can already index the page, as compared to full client-side rendering. There is also another thing, our users visually view the content of the page in a really short time.

Every application session is initiated when a user navigates our web application. We differentiate initial requests because that process happens only once per user session during the first load. In the image above, I show how the initial request flow works.

After the initial request, our application transitions to SPA. From this point, our application works as an SPA. All rendering processes happen on the client-side and for data transactions we use XHR to receive the needed data and to do DOM manipulations.

There are many frameworks that give us the ability to create Isomorphic applications.

Jamstack Applications

Jamstack is a new way of building web applications that are fast, secure, and easy to work with. Jamstack isn’t any framework or library, it’s a set of technologies that we can use to create a lightweight application.

JAM stands for JavaScript, APIs, and Markup. For this type of applications, there is no need to have a server, we can host our application in CDN and use APIs to provide dynamic functionality.

The Key Parts of Jamstack 

   - Static Assets: Jamstack applications are primarily built on static assets and are always deployed as static assets. This means our pages don’t generate runtime on the server, those are generated at a build time. But this doesn’t mean our application’s content is static. We can use APIs to provide dynamically updated content.

   - SSG (Static Site Generator): Static assets in Jamstack generated by SSG. SSG is the tool that takes templates and combines them with content. The content and template are combined to dynamically generate the site’s HTML, CSS, and JavaScript assets. This process happens at a build time, and after that, we can deploy our static assets to CDN.

   - APIs: Jamstack leverages APIs. All server-side processes and database actions are abstracted into reusable APIs which we can call using JavaScript. Those APIs can be called at build time or runtime. This gives us a big advantage because we can call this API’s runtime on the client-side and dynamically update the content of the page.

   - Markup: Templated markup of application which should be pre-built before the deployment process, using a static site generator.

   - JavaScript: Jamstack uses JavaScript to provide dynamic functionality. This is the key ingredient for Jamstack. We can call APIs and dynamically update content using the functionality that JavaScript gives us.

Behind Jamstack is the pre-rendering technique which differentiates Jamstack applications from SPA. In SPA we also have static assets which are generated after build time, but in SPA we don’t have a pre-rendering system, there is only client-side rendering, and all the views are generated on the client-side via JavaScript.

The process of receiving the page is very fast because that page is already rendered and there is no need to do additional actions. From this point, we have all the tools to provide dynamic functionality to our application (JavaScript, APIs).

We use JavaScript and Markup to build our application after which we use a static site generator for building and then deploy the application to the server. Now the users can interact with our application.

Summing up

In this article, we discussed three types of architectural approaches in the frontend. Let’s summarize what we have learned so far.

Single-page Applications (SPA): This approach uses the client-side rendering technique via JavaScript. After bootstrapping the application, the UI framework executes and dynamically generates the content and attaches it to the DOM. The data transactions are done asynchronously via XHR. We receive JSON-typed data and manipulate the DOM.

Isomorphic or Universal Applications: Isomorphic or Universal applications are types of web applications where the code is shared between server and client and can run in both environments. The Isomorphic applications are a combination of server-side and client-side rendering. We can decide which part to render on the server and which part on the client.

Jamstack Applications: A new way of building web applications that are fast, secure, and easy to work with. Jamstack uses pre-rendering techniques and is always deployed as static assets.

Hope you learned something new. Thank you for reading!