HomeNewsLatestHigh Performance Frontend Technologies for Highly Transactional Products – How to Know What Technology to Use and Why?

High Performance Frontend Technologies for Highly Transactional Products – How to Know What Technology to Use and Why?

  • April 26, 2021

In broad terms, the frontend refers to the screen rendering of the application along with user interactions. New frontend frameworks are finding their way into markets every day. Since web applications are rendered by the browsers, frontend frameworks are based on Javascript, since this is the only language browsers understand. In this post, we shall try to identify the major FE technology to use.

Reasons to choose stack

Choosing the right frontend tech stack is overly critical for the application life cycle. Below we list points that need to be considered when selecting your technology stack:

  1. What FE stack your client prefers. If you are building an in house application or does not have a client restrictions, you can read further. Otherwise, you should always ask the client’s requirements.
  2. What is the use case of the proposed application? Suppose this application is to be used without access to the internet and external scripts cannot be downloaded, therefore meaning you need to stick with the “simplest” FE stack. You will want to exclude all the external Javascript and CSS scripts and go with the simplest approach.
  3. Which browser will the application be running on? Your frontend development stack must support the browser the application intends to run. This becomes an extremely critical problem if the application needs to be developed for legacy browsers such as IE7.
  4. Whether the application needs to be SPA (single paged application) and you need to expose APIz’s or not? If you need to expose many API’s,  SPA’s are the best route.

frontend high transaction volume

HTML and CSS

HTML and CSS are the building blocks of any web application. If your application needs to run on legacy browsers, keep your application simple and stick to plain HTML CSS. HTML5 or CSS3 are the recent versions of these however they may not be supported across all the browsers.

Javascript

Javascript adds interactivity to web applications. This is the standard for browsers and only script browsers are capable of rendering. For legacy browsers, stick to plain Javascript and keep things simple.

Javascript based frameworks

Using plain HTML/CSS and Javascript tends to keep things simple but they do lack features desired for modern web applications such as MVC architecture. Frameworks are built on top of Javascript that extends its capabilities and most popular are React JS, Vue JS, and Angular. React JS is a popular framework for building UI while Angular provides a component-based approach to web development.

CSS Preprocessors

Modern web applications need to run on a wide variety of devices. CSS preprocessors help to remove the limit of CSS by using the programming-based approach to CSS styles.

External CSS Libraries

This should fall under the CSS category however we prefer to go over it separately. When building applications, why waste time designing the components over and over again? External CSS libraries such as Material UI and Bootstrap UI allow  the reuse of CSS components from off the shelve saving development teams time and code to style the UI components such as buttons, calendars, etc.