Serverless — User Interface
Explore UI libraries and frameworks to develop our serverless frontend application.
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 usingMUI
andtailwindcss
. - 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)