Frontend System Design

Before we open VS Code and start typing code for a UI, we should first design a system.

There are two things in system design. The first is Design, and the second is System components. In this blog, we will focus on system components.

The system design consists of 12 components.
1. Architecture Patterns
2. Communication Protocols
3. Availability
4. Accessibility
5. Consistency
6. Credibility & Trust
7. Logging & Monitoring
8. Databases
9. Caching
10. Security
11. Performance & Optimization
12. Testing

Let us go over each of these components one by one.

1. Architecture Patterns

Instead of using monolithic apps, we should use microapps or route-based apps. We can make use of Iframe, Web components, and module federation.

2. Communication Protocol

This component can be achieved using long polling, web sockets, and SSE (the server keeps sending data until the data is received by the client).

3. Availability

This is essentially offline support. As an example, Google has a game to engage customers when the internet is down. Service workers can accomplish this.

4. Accessibility

This means that it is accessible to everyone. For physically challenged people, we can implement it through screen readers, keyboard accessibility, or color combinations.

5. Consistency

A project must produce the same results in different browsers.

Problems: CSS is inconsistent. Some Js are not available in all browsers.

Solution: JS polyfills can be used. Styled components can be used for styling.

6. Credibility & Trust [ SEO ]

We can accomplish this in two ways. One is on-page, while the other is off-page. In On-Page, We can use the head tag on the page. In terms of title, description, content, meta, and performance

Off-page, we can accomplish this through backlinks and advertisements.

7. Logging & Monitoring

Problem statement: There is an issue with the application loading or some features and functionalities do not work for some users.

To avoid this, we can use sentry.

Tracking of Users, For example, what age group they belong to, where they are from, and what language they prefer.

Infra and Capacity: Monitor application or server traffic.

8. Database & Caching

For the client’s randomly used data, we can use caching.

This can be accomplished through HTTP caching, in-memory caching, state management, and local/session storage.

9. Security

We can use authentication or authorization to verify the user. Aside from that, we can use CSP and CORS policies.

10. Performance & Optimization

To improve performance, we should focus on asset optimization, delivery options, building assets, SSR, and web vitals.

11. Testing

We can perform various types of testing such as jest, mocha, cypress, selenium, protractor, and playwright.

When designing a system, these are the primary elements on which we should focus.