The ultimate frontend setup

I had the luck to work on two green-field projects in the last one and two years. The frontend setup, that we came up with eventually always felt to me like the “ultimate” frontend project setup, so in general the Gachou frontend incorporates the same tools. Since Gachou is a not a customer project, I am taking the opportunity to try new things. Thus, some libraries that I present here are new to me as well.

Automate everything.

The general goal of the setup is to automate everything that can be automated.

• It uses TypeScript as language to detect errors early and get the benefit of code-completion in the IDE.
• It uses Preact because JSX/TSX is better supported by TypeScript than Vue single-file-components (at the time of this writing). It could also use React, but I want to try something new from time to time, and the small size of Preact is very appealing to me.
• It uses prettier and eslint to check for errors, best practices and code-formatting
• It uses dependency-cruiser enforce architectural rules (like avoiding circular dependencies).
• It uses husky and lint-staged to enforce those static checks before committing files to the repo.
• It uses openapi-client-axios to generate a typed API client based on an OpenAPI-spec.

Further considerations

Writing tests is an important part of the development process, but it is hard to write tests for the visual parts of the program. The goal of the setup in this respect is to allow easy test writing. It also facilitates the creating of a Design System to create a consistent UI style.

• It uses jest and testing-library for unit- and integration-tests and Mock Service Worker to mock the backend
• It uses Storybook to allow isolated development of reusable Preact components.

Conclusion

This post gives a short overview over the tools and techniques used in the Gachou frontend. My plan is to handle at least some topics in more detail in dedicated blog-posts.