Frontend Toolchain 2024

Based on some research into the best and/or efficient and up-to-date tools to use in the frontend development space in 2024, I've jotted down a list of different leaders/viable options in each sector. This doesn't read as gospel and is just based on my understanding and preference for NextJS.  
 

State Management

I used Context API and React Providers for state management (and use-immer) in my most recent commercial project.  
 
I’ve been recommended Recoil or Jotai.. which allow you to manage state simply by declaring properties and methods on an object which seems to be the way most libraries are headed. Obviously on a contextual basis - I didn't need to implement state management for this website because it’s a blog and portfolio site.  
 

Data Fetching

As far as fetching data in React, context API doesn't seem to be the flavour of the month. While React has built in tools like useState and useReducer, It seems like TanStack query (or React Query as it was formerly known) is in. (SWR is also recommended).  
 
A lot of NextJS projects use getStaticProps/getStaticPaths which fetch CMS data at build time for SSG, in combination with ISR.. which improves initial and subsequent load performance. Or they may use getServerSideProps for SSR which is also good for initial load performance. But what I've also noticed is an increased use of NextJS API Routes for SSR.  
 
Of course, a lot of applications take on a hybrid approach that fits the use case of their project.  
 

Entity Mapping

auto mapper is a great tool in the .NET ecosystem that simplifies the process of mapping between different objects. It's commonly used in scenarios like mapping between DTOs (Data Transfer Objects) and domain entities, but it can also be utilized for mapping CMS (Content Management System) objects and custom component props within a shared library.  
 
This ensures that whatever headless CMS is used for a multi-tenant project, the custom component library within the design-system associated with that project will be easier to maintain as all the props and expected content types will overlap.  
 

Bundler

Vite has now replaced CRA as the client-rendered React tool. For this SSR project we're using NextJS. NextJS framework uses turbopack under the hood (from the same peeps that made Turborepo).  
 

Package Manager

Bun is a package manager that’s faster than NPM/PNPM and a JavaScript runtime engine like Node. But npm and pnpm are still viable.  
 

Design

I tend to use Flowbite for design inspiration for different ui design components.  
 

Styling

I'm a big fan of using Storybook for developing components locally and collaborating with designers/team members, but not for snapshot testing.  
 
Big fan of CSS variables for global styling variables, mixed with Tailwind config.  
 
Tailwind CSS is still very viable and a pure CSS tool. You can make use of other component libraries like Radix UI - but ShadCN combines Tailwind CSS with Radix UI — and uses cva for customization of styling to build great design-system components. ShadCN also extends proptypes on React HTML attributes which enables developers to ensure that the props being passed meet certain criteria or constraints. Also recommended is tailwind-merge, clsx and classNames libraries for variant control.  
 

Databases and ORM

The general preference seem to be for SQL databases like MySQL or PostgreSQL over NoSQL databases like MongoDB or Firebase.  
 

Dates & Times

date-fns or day.js.  
 

Forms

Previously I’ve been a big advocate of yup for validation and Formik, but lately I've used React Hook Form as an all in one - it has a more modern API based on hooks and usually requires less code than other form libraries. Zod for validation.  
 
I use emailjs for sending emails.  
 

Deployment

Vercel, whether it's client-rendered or server-rendered. It's more cost effective than AWS/Azure/gcp regarding hosting smaller projects or projects that are static content heavy.  
 

Continuous Deployment Toolchain

Husky is a utility that allows linting, type checking and testing when committing code. It has a pre-commit hook that runs and typechecks, lints and prettifies code. It’s also a good idea to use lint-staged which achieves something similar but only checks the files that have been updated, rather than every file.  
 
As for the pre deployment build, linting and type checking runs there too. This enforces quality control measures, automating checks, and ensuring that only high-quality code is integrated into the codebase. CI helps maintain the integrity and stability of the software throughout its development lifecycle.  
 
For my portfolio I use Vercel to automated deployment upon comitted code into the main branch, and maintain a separate staging and main (production) domain for their respective branches. I also follow development branch naming conventions and github actions to round out an effective source control methodology (not that I need it for this but.. good practice).  
 

SEO

Meta tags, JSON-LD Schemas, Sitemaps, robots.txt, Link tags, Next Image optimization.  
 

Accessibility

To make the application more accessible, we must consider:  
 

• WAI-ARIA standards for designing the JSX structure of your app, to prevent the exclusion of anyone living with motor, cognitive, audio, or visual differences. This includes ARIA attributes (role, aria-describedby, aria-labelledby, aria-label, sr-only). Contextually, an app should be proficient in WCAG 2.1 Accessibility standards for AA compliance.  
   
• WCAG guide for implementing design and development practices that ensure web content is understandable and navigational for all users. This includes focus management, using semantic HTML, keyboard shortcuts, alternative image text, avoiding text that is too small and colours that don't contrast enough, hiding or replacing the browser native scroll bar, not removing :outline on links so users can tab to focus on links.

February 15, 2024