Javascript is still leading the pack in terms of programming language popularity. For the 10th consecutive year, Javascript is the most commonly used language in 2022 according to the latest StackOverflow Survey. It’s a very versatile language that can be used to solve virtually any kind of problem.
You cannot run out of choices when choosing Javascript libraries and frameworks. These are available for the web front-end, back-end application, infrastructure and more. There are popular libraries which are backed and funded not just by big companies but also by the community. The libraries in these ecosystem are considered large, stable and mature and a lot of people and organisations trust and love using them.
On the web side of things, the top six most popular libraries/frameworks are based on Javascript. NodeJS and ReactJS are the top two technologies which come hand in hand when creating full stack web applications.
Project Architecture
It’s really fun working with ReactJS and part of the fun is choosing the best libraries for each part of your project architecture. As we all know, the architecture of ReactJS is un-opinionated in nature and there are hundreds of libraries in the ecosystem that you could pick for your project.
In this article, I will discuss some of the most popular, battle tested and up and coming libraries that you can use as a starting point for your ReactJS project.
Scaffolding Tool
In past years, the Create React App (CRA) was the no-brainer choice when starting up a ReactJS web project. However, as the project matures, the build time slows down when the code base is bigger. As a result, it increases the development time and lessens the productivity of the developers.
Come 2022 and CRA has a new rival – ViteJS or Vite (French word for “quick”, pronounced /vit/ , like “veet”). Vite is a next-generation, front-end tool that focuses on speed and performance. This is a great choice when creating a new ReactJS project. You can also upgrade your existing project from CRA to ViteJS but that’s for another time.
Recommendation: ViteJS
Note: This project setup only covers the front-end and not a full-stack application.
Code Linting
Linting is the process of performing static analysis on source code to flag patterns that might cause errors or other problems. As an application progresses through the various stages of development, code quality becomes critical.
In Javascript, the uncontested code linting tool is ESLint and Prettier. If you’re using Typescript (TS) then you’d also need to integrate some TS linting rules with ESLint and Prettier.
ESLint style guides have more than 100 rules, but there are three popular style guides to save you time in configuration. These are Airbnb, Google and standard style guides. Choosing a base style guide is the first step, then you can override any existing rules to fit your needs.
Below are some of the rules for each style guide as listed on this website.
Rule Name | AirBnB | Standard | |
|---|---|---|---|
Semicolons | Required | Required | No |
Trailing Commas | Required | Required | Not Allowed |
Template Strings | No Stance | Preferred | No Stance |
Space before parentheses | No Space | No Space | Space Required |
Import Extensions | Allowed | Not Allowed | Allowed |
Object Curly Spacing | No Space Allowed | Space Required | Space Required |
Console Statements | No Stance | None | No Stance |
Arrow Function Return Assignment | No Stance | No | No |
React Prop Ordering | N/A | No Stance | No Stance |
React Prop Validation | N/A | Required | Not Required |
Object Property Shorthand | No Stance | Preferred | No Stance |
Object Destructuring | No Stance | Preferred | No Stance |
Recommendations: ESLint, Prettier, talk to the team when choosing a style guide.
Type checking
In ReactJS, prop-types is the go-to type checking library used before the popularity of TypeScript. It is still a great library for type checking while your existing application is not upgraded to Typescript. However, when starting a new project, it is highly recommended to use TypeScript.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. – typescriptlang.org.
By using a strongly typed language, bugs are easier to spot as the developers will detect code errors even before running the code. Errors will appear as you type with the help of code editor plugins, so be sure to enable this in the IDEs. In short, TypeScript makes the code predictable, cleaner and more understandable.
Recommendation: TypeScript
State Management
React state management is a process for managing the data that React components need in order to render themselves. This data is typically stored in the component’s state object. When the state object changes, the component will re-render itself. React state management is basically half of a React app. – freecodecamp.org.
A state manager is needed for a typical ReactJS application that needs to handle data, whether it’s local or data from an API. The most commonly used state manager in ReactJS components (local) is the useState/useReducer hooks or the ReactJS ContextAPI.
For a more complex project, a global state manager is required and the most commonly used library for that is Redux. Redux is a battle tested state manager, it’s very mature and recently they’ve released Redux Toolkit (RTK): the official, opinionated, batteries-included toolset for efficient Redux development. It comes along with RTK Query which is a powerful data fetching and caching tool.
Recommendations: Redux Toolkit, useState/useReducer hooks or ReactJS ContextAPI
ReactJS component testing
In the world of ReactJS, no library comes close to React Testing Library (RTL) when testing ReactJS components. React Testing Library comes with helpers that let you test React components without relying on their implementation details. It works on top of Jest and comes with code coverage.
Recommendation: React Testing Library (RTL)
End-to-end testing
End to end testing (E2E testing) is a software testing method that involves testing an application’s workflow from beginning to end. This method aims to replicate real user scenarios to validate the system for integration and data integrity. – browserstack.com
In web development, some of the popular automated testing tools used are Selenium and Cypress. Cypress is an automated test framework which is gaining a lot of popularity in recent years and a true alternative to Selenium.
Recommendation: Cypress
Error Boundary
It is a best practice to catch any error in the application as this makes the user experience better and application more stable. In ReactJS, it is highly recommended to implement an error boundary component which catches JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
In the code and proof of concept below, you’ll see that the error is thrown after clicking the button four times but we were still able to display a button to reset the error. Without the error boundary, there’s no fallback UI and we will only see an empty page that will leave users confused.
Proof of concept in action
By running the code above, you’ll see a button. Click it four times.
Clicking the button the fourth time will display the fallback UI with the stack trace of the error. As you can see, the error is fully controlled and the user can still click the Reset Error button to clear the errors.
Recommendation: Required
Error Tracking
When you deploy your code to production, you want to make sure that you’re capturing and being notified of any errors, as these might cause interruption to the user, or your app could become unstable.
You can say that tests should cover these errors, but some errors are edge cases and can only be tested in a real scenario. The good thing is that once you learn these errors, you’ll be able to mock it and make it part of your testing.
You can write your own error logging utility that will be sent to your server logs or you can also use some popular third party services like:
These tools don’t just ingest errors but it can also help you to identify performance issues.
Recommendation: You can’t go wrong choosing any of the above third party services.
Design System / Style Libraries
Choosing a design system library depends not only on the developer, but also on the designers. This means it is important to have the designer’s opinion when choosing your design system.
Some of the popular design system / style libraries are:
These design systems libraries already support plain CSS, and some of them already come with their own CSS-in-JS capabilities or CSS preprocessors.
CSS-in-JS is a technique for declaring styles within components using JS syntax, while a CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax.
Depending on your need, styled-components, SASS, LESS or SASS can be used as part of your kit. You might even need Storybook.
Recommendation: Required but you must consult with the relevant members of the team to decide which Design System or if an advanced CSS capability should be used.
Beyond the basics
The things I’ve discussed above are just the basic things you will need to start a ReactJS project. Your libraries will grow as your project progresses. There are topics that I consider as part of an advanced setup which includes but not limited to the following:
- Animation
- Forms
- Performance
- API libraries including GraphQL and communication protocols support
- Communication protocols such as HTTP, WebSocket, gRPC, and WebRTC
- Functional/Utility libraries (rambda, underscore, lodash)
- Project file structure and micro-front ends
- Security
- CI/CD and Hosting
In this post, I discussed and recommended the tools and libraries for the different parts of an application built using the ReactJS architecture. The parts I listed are required to have a foundation for a robust, scalable and testable code. This is an excellent starting point whenever you’re creating a ReactJS project or when you want to uplift your existing project to use industry best practices.
Sneak Peak
Stay tuned in my next article where I will showcase the working example of the ReactJS Start Kit and I will also show how to deploy in different hosting services.
