My current FrontEnd Stack — React, Vite, Mantine, Tanner-query, react-hook-form & Typescript
Over the past year whilst developing on several small scale React apps I have experimented with multiple libraries to help with the development of the main building blocks of any FrontEnd app. The main building blocks are:
- Data fetching
- State Management — Once you have the data, managing it locally to your application and keeping it in sync with data in your database
- UI — Rendering data to the user in a clear and digestible manner
- Forms — Collecting required data from the user
- Static Typing — Making sure you code doesn’t have type errors when working with data
- Development Environment — An environment that lets you develop and iterate quickly to build an MVP
Not only must you build out your idea quickly but it has to look good also.
Through this experimentation I have tried many libraries such as Redux, RTK Query, RxJS, Formik, Material UI, Tailwind, ChakraUI and a whole host of others. All wonderful libraries and ones I will goto depending on the specific use case but not ones I will go into detail here.
Why I like this Frontend Stack
Before I share the libraries/tools I personally use I would like to share the high-level reasons why I picked these:
- I can make a dynamic, interactive, well functioning web app: These libraries give me everything I need to enable me to collect and present data from a user. Its the building blocks of any good interactive web application.
- These libraries are tried and tested: They are built and developed by some really smart developers who I know I can trust. The Javascript community is full of such talented individuals and its amazing to be able to utilise their work in your everyday projects.
- I can iterate fast: Moving fast these days is essential. You have an idea or your client has an idea its really important these days to turn that idea into reality as soon as possible.
- My apps look half descent with minimal effort: Not only must you build out your idea quickly but it has to look good also. It’s great to be quick but if your app looks like a pile of turd then less people will use it and you will have less engagement.
- Forms are hard: Making forms in any UI is hard. To get it flowing, showing user enough information so they know what to do but not too much they become overwhelmed and lost. Having a super useful library to assist you in this endeavour is essential.
What these libraries/tools give me
React
I have been using React for a good 5 years now. Ever since I tried it and understood the improvement in DX from using JSX and also how props work I fell in love. There have obviously been some changes along the way such as classes to functional components and the implementation of hooks. But it beats writing UI in pure Javascript and gives you a really nice set of tools to build modern, reusable UI components and can be interactive and dynamic.
Vite
Since I first tried Vite it just worked and it was fast. Since then I haven’t looked back. If you ever used npm with CRA and remember waiting for it to first load up when you had any sizeable app then you will really appreciate tools like Vite. This is what it gives you:
- Instant Server Start
- Lightning fast HMR (Hot reloading)
- Out of box support for Typescript
- Optimised builds
- Universal plugins
- Fully Typed APIs
I can testify for the first 4 of these (I got this list from their website). For me as a developer this is more than enough reasons to use Vite.
Mantine
I’ll be honest, I first tried Mantine because I was bored of Material UI and wanted to try something new that was close enough to Material UI but different enough to make it interesting.
Mantine hit that sweet spot. It’s selection of components is very extensive. It’s being continually developed. It’s on version 7 at the time of this writing. It’s native styles are really nice. It allows me to develop good looking UIs quickly without looking like a typical Google app.
If you haven’t tried it I suggest you do. So far I haven’t been disappointed.
Tanner Query (React-query)
Tanner Query is so useful for calling apis, handling the loading or error state and also providing a cache across the Frontend which you can easily use or refresh depending on your use case. If your app is API heavy and there isn’t much need for lots of global state then Tanner Query is such a useful library and I recommend it to anyone. The documentation is also great and the maintainers seem to really care about the library.
React Hook Form
Forms are an inevitable part of any application. They may not be the sexiest thing in web development but if you want to capture any kind of data from the users then you’re going to need them. I first started with the Formik library and that was great. But then I tried out react-hook-form and really liked the api it provided and the ease with which is handled pretty complex form situations. Especially with dynamic forms. Since making the switch I haven’t looked back.
Typescript
I admit I was slow to get on the Typescript train but once I did I have had no desire to jump off. I remember very vividly adding Typescript to an existing JS project I was working on as part of a team. Straight away type errors started popping up — incorrect props being passed down, variables being used as one type even though they were something totally different and many other things.
Tanner Query is so useful for calling apis, handling the loading or error state and also providing a cache across the Frontend which you can easily use or refresh depending on your use case.
A couple of things hit me:
- You can get away with so much sloppy code in Javascript
- Making any kind of sizeable app in Javascript these days is just asking for trouble.
Since that day I have only ever used Typescript and the amount of times it makes my development life easier cannot be underappreciated.
Conclusion
As Javascript developers we live in a day and age where we are spoilt for choice over what libraries and tools we can use in our everyday work. It’s got to a point where you could probably spend all your days just learning about all the tools rather than actually building anything!
However, I think its important to look around and see whats new but at the same time to actually get to business and build things. That is the main reason why we do this line of work. Therefore it’s important to settle on some main tools and libraries which can get you 70–80% of the way there. When you use these things over and over you not only get really efficient at using them, you also discover the depth of utilities they actually contain.
With every app there will always be specifics that need individual tools but the large majority of Web applications do the same thing. So pick some libraries and tools you like and get really freaking good at using them!
About me
I am a Frontend Developer working mainly with React and Typescript in my day to day professional life. I love exploring new tools and libraries and love the Javascript Ecosystem.
I like to write blog posts that share exciting new tools I’ve discovered, how-to articles and also the occasional opinion post.
I live in Prague in the Czech Republic with my family.
Check out the original blog post on my blog here.
