Serverless — User Interface

Explore UI libraries and frameworks to develop our serverless frontend application.

Serverless — User Interface

When it comes to frontend application development, there are dozens of libraries and frameworks. We use Vite as our build tool and the react-ts template for our frontend application. In this article, let’s continue to enhance the user interface. We are going to

• Check out existing and trending front-end frameworks.
• Develop the Stocks component using MUI and tailwindcss.
• Configure Storybook for component testing.
• Configure Cypress for end-to-end testing.

This article is part of the Serverless for Beginners series.

The source code can be found in this repository.

Getting Started

We will go through trending libraries and frameworks before using them to improve our front-end user interface. This should help us understand the options we have.

Frontend Frameworks and Libraries

Most likely we should be familiar with at least one of the following frameworks or libraries.

• Angular (>80k GitHub Stars)
• React ( >186k GitHub Stars)
• Vue.js (>196k GitHub Stars)
• Svelte (>57k GitHub Stars)
• Preact (>31k GitHub Stars)
• Lit (>10k GitHub Stars)
• Solid (>16k GitHub Stars)
• Alpine.js (>20k GitHub Stars)

This is not a comprehensive list. They are just the options we considered when developing the frontend application.

UI Components and Libraries

There are again dozen of libraries to choose from.

• MUI for React (>77k GitHub Stars)
• Semantic UI (>50k GitHub Stars)
• Bootstrap (>156k GitHub Stars), React Bootstrap (>20k GitHub Stars)
• Ant Design for React (>79k GitHub Stars)
• Styled Components (>36k GitHub Stars)
• Chakra UI (>25k GitHub Stars)