Architectural Approaches in Front End: Best to Know How It's Designed Before Using It
25 Jan 2023
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 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.
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 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).
Build and Deploy
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.
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 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.
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.
- Markup: Templated markup of application which should be pre-built before the deployment process, using a static site generator.
In this article, we discussed three types of architectural approaches in the frontend. Let’s summarize what we have learned so far.
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!
Transform your business with Volo
Ready to discuss your next tech project?