In the previous article, we talked about the main steps of starting React development. But what’s next? How to grow your application? Do you need some additional technologies and frameworks?
For sure, you will definitely want to expand your project, adding functionality and integrations. Here comes the question of what programming tools to use.
As a React JS development company, we use the most up-to-date UI frameworks, CSS styles, and state management libraries to build maintainable, sustainable, and scalable React applications. And in this article, we will share the list of these tools.
Many developers say that the usage of UI frameworks is important. They state that it accelerates and simplifies the development process. Generally speaking, it is true. However, lots of programmers miss the primary goal of the framework's existence.
Actually, there is a good reason for using frameworks. They solve the problem of synchronizing the UI and the internal app state. So, the key to a high-quality UI lies in building the best possible graphical solution.
Now, let’s take a look at the most popular UI frameworks that we use at Codica.
Ant Design is an open-source design system for web applications. It provides a set of high-quality out-of-the-box React components. This tool is written in TypeScript with predictable static types. Here is the list of features from the official documentation:
- Whole package of design resources and development tools;
- Internationalization support for dozens of languages;
- Powerful theme customization in every detail.
Also, Ant Design supports modern browsers and IE 9+. Here is a comprehensive tutorial on how to use Ant Design with Create-react-app.
Considering the popularity, Antd is one of the most used UI frameworks with 57.8K Github Stars and 20.9K forks (at the moment of writing).
To be exact, it is a design language first introduced by Google in 2014. It offers grid-based layouts, flexible animation, add-ons, and depth effects. Here are the main features provided out-of-the-box:
- Blazing fast performance;
- Extensibility via a plugin API;
- Usage of CSS-in-JS in its core which works at runtime and server-side;
- Less than 15 KB in a gzip file format and no bundle size increase.
The goal of Material Design comes down to three things: Creation, Unification, and Customization.
Semantic UI React
Semantic UI React is an official React JS integration for Semantic UI. Actually, it offers almost the same features as the official tool does. However, there are still some additional ones: a Declarative API, Augmentation, and Auto Controlled State. Most importantly, this framework is jQuery-free.
If you check its GitHub repo, you can see 11K stars and 3.1K forks.
Comparison of Ant Design, Material-UI and Semantic UI React
Let’s compare the mentioned UI frameworks by popularity and usage among developers. Take a look at the comparison table that shows the number of package downloads for the past 6 months.
In conclusion, all the mentioned tools perfectly work with React JS and offer a wide range of features. This way, you get fast integration with your project and lots of ready components for building an efficient user interface.
Styling in React development
Nowadays, solid ReactJS applications use a complex toolchain to write CSS code. One of the biggest benefits you can bring to your team is knowing how to style your ReactJS app correctly. A web product needs to have a unique, intuitive, and visually appealing interface as it is an important part of every UX experience.
There are different approaches to app stylization, but we want to highlight the main two options we use in practice:
- Modular Stylesheets (CSS/SCSS Modules);
- CSS-in-JS (styled-components, glamorous, emotion, etc).
Let’s discuss each CSS tool in detail.
The similarly-named GitHub repository says: “A CSS Module is a CSS file in which all class names and animation names are scoped locally by default”.
CSS modules are not an official specification, they are not implemented in browsers. Rather, it is a task launched at the project bundle stage (for example, using a Webpack or Browserify). During this process, the class names and selectors are changed so that a kind of local scope emerges (something like a namespace).
This approach was developed to solve the problem of global scope in CSS. The modules ensure that all styles of one component are in one place and are applied only to that block.
Let’s take a look at the benefits and drawbacks of CSS-in-JS in the following table:
|Pros and cons of CSS-in-JS (JSS)|
|Component approach to CSS.
You no longer need to maintain multiple CSS files. CSS-in-JS makes CSS logic an abstraction of the component level, not the document level (using the principle of modularity).
|"Real CSS rules isolation."
The scope limitations of the selectors are not enough. CSS has properties that, if not explicitly set, are automatically inherited from the parent elements. However, thanks to the jss-isolate plugin, JSS rules do not inherit properties.
|It increases the entire bundle size which leads to a long page load time.|
|Selectors with limited scope.
There is only one global namespace in CSS. It is impossible to avoid collisions of selectors if we are not talking about a small project. JSS generates unique default class names when compiling JSON representations in CSS.
|Browser prefixes are automatically added to the CSS rules, so you don’t need to think about them at all.|
JS and CSS easily use the same variables and functions.
|The DOM contains only those styles that are currently used to display elements on the screen (react-jss).|
To conclude, both modular stylesheets and CSS-in-JS are powerful tools. They help you styling a React.js application. They provide numerous features that simplify and accelerate the development process.
State management in React application development has been a subject of discussion for many years. Consequently, the tool to operate with the React.js app state management is a hot topic as well. The reason for such importance is evident. If you want to create or extend your ReactJS application, you need to manage the state of the app. Moreover, it should be scalable and maintainable for future improvements.
Now we want to cover such popular tools as Redux and MobX. We will share our vision on the pros and cons, functionality differences and when it is better to use one or the other. Let’s begin with Redux.
Redux is a perfect choice for single-page applications (SPA) where state management can become difficult over time. The tool is not related to any specific framework. Although developed for React, it can also be used with Angular or jQuery.
Redux has three main principles that are worth considering before you start work with state management:
- Single source of truth
Redux uses only one store for the entire application state. Since the state is stored in one place, it is called the only source of truth. The data structure of the storage is completely up to you, but for a real application, it is usually an object with several nesting levels. This single-store approach is the main difference between Redux and Flux with its multiple stores.
- State is read-only
According to the Redux documentation, “The only way to change the state is to emit an action, an object describing what happened”.
Shortly, it means that an application cannot directly change the state. Instead, pass an “action” to express the intention of changing the state in the store.
- Changes are made with pure functions
MobX generally consists of:
Arrays, references, and objects are considered as the application data cells in a state.
Derivations are the value that can be processed by the application state automatically.
Reactions mainly take care of input-output operations and DOM updating. Network requests need to be handled on time automatically.
Actions modify the state and MobX makes sure that all the changes are processed synchronically.
The library supports any modern JS environment: Node.js, React Native, Rhino and all the browsers (except for IE 8 and earlier versions). The only thing you should remember is that MobX is not a framework. It does not know how to structure your code, how to process and store the data.
To summarize, let’s compare Redux and MobX within different development aspects.
|Comparison of Redux and MobX|
|Stored data||There is only one large store for data storage.||There is more than one store for data storage.|
State is read-only and cannot be simply overwritten
State can be overwritten simply with the new values
A lot of development tools available, pure functions and less abstraction.
Tools available are not sufficient that may result in unpredictable responses many times.
A lot of built-in abstraction.
There is less abstraction, so you need to write more code.
|Maintainability||More maintainable||Less maintainable|
48.5K GitHub stars
12.4K GitHub forks
14.5K GitHub Stars
1.1K GitHub Forks
Generally, testing is one of the quality control techniques. It includes planning, test creation and running, and analysis of the received results. It is a process of validating the functionality created within the defined requirements. It becomes possible by testing a product within artificially created situations.
It’s worth noting that software testing includes numerous additional activities:
- Analysis and planning;
- Development of test scenarios;
- Assessment of tests completing criteria;
- Writing reports;
- Documentation and code review;
- Static analysis.
In this chapter, we’ll cover some of the most common and effective ways to test React.js code using Jest and Cypress.
When it comes to choosing a technique of testing React JS applications, you should take a look at the Agile testing pyramid. It helps you understand when to use a certain method.
The pyramid shows that many unit-snapshot tests can be used to validate one integration test. This way, many integration tests can be used to validate one manual test. At the peak of the pyramid, we have an end-to-end test: manual testing of the whole application.
Let’s now briefly discuss the pros and cons of each pyramid element.
- Manual testing
The main goal of this technique is to pre-verify that the defined functionality is working. Also, manual tests define whether this functionality has errors and provides the expected results. This testing method is slow and unsustainable. Also, it is rather expensive to maintain.
- Integration testing
The purpose of this technique is to expose faults in the interaction between integrated units. It can be good to test connections between components and finding bugs in these liaisons.
- Unit/Snapshot testing
This testing method is useful when you concentrate on a certain isolated element and its logic. The unit/snapshot technique is one of the easiest approaches to test components.
So, the Agile test pyramid helps you understand when to use a certain method at each stage of developing ReactJS applications. Let’s step forward and discuss the most efficient tools for testing your React.js application.
In general, Jest allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly. Everything you need is to come up with input parameters for your code. Then describe the output that your component should produce. The library tests your code with input parameters and checks the result against the expected one. If it matches, the test will pass.
At Codica, we started using Jest with a powerful tool called Enzyme. It provides a special testing function that makes a snapshot of your project components’ structure. When you run tests, the tool compares the new snapshots with the saved ones.
Subscribe to Codica monthly newsletter.
Cypress is an open-source tool used for automated UI and end-to-end testing of modern web applications. The platform is also popular among QA engineers and software developers around the world. It has 19K GitHub Stars and 1.1K forks.
The main task of Cypress is to check how the client part interacts with the server (end-to-end tests). Also, the tool provides integration tests of the individual page components.
One of the tool’s biggest advantages is its lightning speed. Cypress can provide you with high performance because of running inside the browser. It runs the same execution loop that your app source code does.
What are the differences between Jest and Cypress?
First, it is worth noting that Jest refers to Unit Testing and Integration Testing libraries. On the flip side, Cypress is an example of the End-to-End (e2e) testing platform. It means that you can simulate the user interaction with an app from start to end. It includes all the page clicks, navigation, and so on.
Also, Jest is more difficult and requires certain testing knowledge to use it. However, Cypress.io has such drawbacks as weak cross-browser testing, no page object, tabs switch, and iFrame support.
In a nutshell, the choice of the right testing tool depends on your code skills, project requirements, and personal preferences. You can even decide to follow a hybrid approach and use several instruments at once. For example, Cypress-Jest is an npm package that combines the features of both tools.
We believe our best practices will come in handy for you when you turn to React app development. We have discussed the most recent React UI development frameworks, CSS styles, and state management tools. All of them were designed to greatly simplify and accelerate the project development process of any scale and complexity.
The choice depends on the technical inquiry and your personal preferences. As a React JS development agency, we believe this information will be useful for you to choose the most relevant programming instrument for your needs.
Want to learn more about new technologies and tools and their implementation? Read more articles on our blog and subscribe to our newsletter.