Update, May 18th 2022: We updated the article to reflect the latest changes to the frameworks.
JavaScript is like the Swiss knife of software engineering. It can do what you need it to do, and according to the Principle of Least Power, it will do it. In case you want to avoid reinventing the wheel, you should use a framework to help you. Some of them are more suitable for the job, while some are less suitable. With the series of posts “Battle-Tested JavaScript Frameworks”, we will show you which frameworks you can rely on, and which are not as reliable for specific use cases.
The most popular out of the three frameworks. It is also regarded as the most “flexible” one. In the past, it used to be only about the view layer of the app. Currently, with the planned introduction of Server Components, it might become a light full-stack framework.
+ The most popular
+ An ocean of third-party extensions for every purpose
+ Loved by the dev community
+ Business logic is easy to reuse in React Native apps
- Can be a bit heavy
- React 18 feels as if React is back in beta
- Mixing JavaScript, HTML, and CSS directly together
- Not too fast
- A limited list of first-party plugins
Software engineers from companies of all sizes choose this small library, because of its extensive community support, and the depth of the talent pool. You can’t go wrong with picking React.
https://reactjs.org/docs/getting-started.html
Vue is the most community-run framework out of the three we list in this section. It is the creation of Evan You, the main decision-maker, and the author of other libraries & frameworks, such as Vite or Vitepress. Associated with the lowest learning curve out of the three most popular frameworks, it gained traction in China, after which it gained popularity in the West.
You can think of it as being an option in between React and Angular.
+ Can do what you need it to do; it is the most flexible out of the three
+ An ecosystem of first-party frameworks extending Vue’s functionality
+ Versatility
- The least popular in startup & corporate settings in the West
- The transition process between Vue 2, and Vue 3 was rough
Vue tends to be used together with PHP backends quite often. The talent pool is smaller than in the case of React or Angular developers; however, you still won’t have much of a problem finding developers who are proficient with Vue. Go for Vue if you know you won’t want to reuse code between the web app and a native mobile app, as the options for Evan You’s framework are somewhat poor and/or not well-maintained (Quasar, Nativescript-Vue, Vue Native).
The last front-end framework in this section. It is the heaviest and has the highest number of features built-in. With Google’s backing, it is the most popular in big companies. Its use in the biggest of projects is heavily emphasized, with every aspect of the framework written in TypeScript.
An interesting fact is that a lot of internal Google projects use AngularDart, a port of the framework written in Dart.
+ The most regularly released out of the three
+ Entirely written in TypeScript
+ Heavily Opinionated
+ A CLI generator
- Heavily Opinionated
- Heavy
- Slow
- Not universally liked among developers
Angular is the heaviest among the three mainstream frameworks and has the most specific use case. You want to use it almost only if you know your front-end is going to get large. Asking “Angular vs Vue vs React” does not have a point, as all of these libraries have their use case.
https://github.com/angular/angular
Next.js, one of the most popular React frameworks that got its popularity for making React development effortless. There are numerous built-in features such as hybrid static & server rendering, static HTML export, API routes (enables you to build an API with Next.js), and many, many more.
+ No configuration needed
+ Fast time-to-market
+ Much better SEO than with plain React
+ A great solution for both startups and enterprises
- Opinionated routing — you are forced to use the page-based routing
- Few third-party plugins
Next.js provides an opinionated setup for developing React apps that is used by the biggest thanks to its simple hybrid rendering. It is often used by those looking to set up a quick MVP because of its smart defaults. This showcases the ability of the framework to be a smart choice for all React development purposes.
https://github.com/vercel/next.js
Nuxt.js to Vue.js is what Next.js is to React.js. It simplifies and turbocharges the framework, bringing some much-appreciated features to the framework, letting you focus more on development.
+ No config needed
+ Fast time to market
+ Much better SEO than with plain Vue.js
+ A great choice for startups and enterprises alike
+ Tight collaboration with the creator of Vue.js
+ The new version of the framework brings spectacular improvements
- Opinionated routing – you are forced to use the page-based routing
- Few third-party plugins
Nuxt.js is “The Intuitive Vue Framework.” It makes use of the same page-based routing, and is about as opinionated as its React counterpart. As such, the same use case applies. If you are developing a Vue.js app, and want to focus only on that, you might appreciate the set of smart defaults and the config.
https://github.com/nuxt/nuxt.js
Nest.js is a framework that goes best with Angular and will feel familiar for all Angular developers. Not only is it similar in all that it’s built entirely in TypeScript. It is also built with big applications in mind and has an enormous number of first-party modules.
The authors of the framework did prepare numerous guides on how to implement some of the most important features, however. They should serve as a facilitator of adoption for startup engineers, and new learners alike.
+ Heavily opinionated
+ Designed to be reliable
+ Feels great with combination with Angular
- Heavily opinionated
- Few third-party plugins
- Not as popular among developers
Nest.js is best used when paired with Angular. As a consequence, it’s best to use it in projects of a bigger caliber. Using it in smaller projects is usually overkill.
https://github.com/nestjs/nest
Express is perhaps the most popular backend framework there is, in the world of Node.js. It is, almost always, the first framework that every JavaScript developer learns on their journey, and often is enough to quickly get your MVP up and running.
Unfortunately, it is not recommended to use it in bigger projects, as the framework is not ideal for that purpose. For one, it currently does not support async/await, which is a must to handle many requests at the same time. To make matters worse, the last release of the library (v.4.17.1) was… May 26th, 2019 (!), and Express v5 used to be in alpha since 2014 (!). We did get several updates since January 1st 2022, though. We did get the first Express v5 beta, and a few updates to Express v4.
The library is a good starting point for your own internal library, or for an MVP. For other uses, the other options on the list are better options for you. When Express v5 drops, we will reconsider the statement.
+ Heavily unopinionated
+ Likely the most popular backend framework in the Node.js world
- Heavily unopinionated
- Likely dead or on life support
- No async/await
Use when developing your hobby projects, or as a starting point for your internal library.
https://github.com/expressjs/express
Just as the name suggests, the main focus of this library is on speed. It also claims to be focused on developer experience while lowering the cost of the infrastructure. It definitely delivers on the promises, being the fastest out of all major backend Node.js frameworks.
+ Built-in Validators
+ Lightning fast
+ A rich plugin ecosystem
+ Opinionated with a way out
- Not as popular
- Not many companies use it
When speed is a number one concern for you, and you stick to JavaScript only, the library is for you. It is the fastest mainstream JavaScript framework and has a rich ecosystem of plugins. In case you want to use TypeScript, you still can.
https://github.com/fastify/fastify
A “[s]imple JavaScript testing framework for browsers and node.js” is what we will start off with. It runs everywhere that JavaScript runs, making it incredibly flexible. What’s more is that the library has no external dependencies, making it low overhead.
+ No external dependencies
+ Whatever you’re working on — you can test it with Jasmine
+ Built-in assertion library
- Plenty of configuration required
- Slightly unintuitive reports
- Does not have in-built support for rerunning failed tests
Since it is the most universal position on the list, when in doubt, use Jasmine.
https://github.com/jasmine/jasmine
Jest is a library “with a focus on simplicity.” As such, it is zero-config, and provides helpful error messages, when your tests go wrong.
Supported by Meta, it enjoys great popularity among JavaScript developers and works out of the box with the most popular libraries. When compared to Jasmine, however, the support for libraries is not that great.
On May 11th, 2022, Meta has transferred Jest to the OpenJS foundation.
+ Great documentation
+ Simple
+ Visual regression tests
+ Easy coverage report
- Can be difficult to get used to it, learning it for the first time
- Does not support as many libraries as Jasmine
If you want to have an easy time testing, go for Jest. It used to come as a default option with React apps created with create-react-app.
https://github.com/facebook/jest
Mocha is a library that is often called “Mocha/Chai” as it is used with Chai, an assertion library, the most often. Another library emphasizing its simplicity, it did not fare very well after the introduction of Jest. It is even perhaps a bit unfair to compare the two together – after all Mocha is a test runner, and as such, it requires other libraries to work.
Originally designed to support Node.js testing, its capabilities are now much wider, supporting Node.js, and the browser code as well. It can also perform a plethora of testing, since it can perform integration, and end-to-end tests as well. We included it here, in this section because it is its most common use case.
+ Simple
+ Easy support for generators
+ Easy asynchronous testing
+ You may choose between a wide variety of assertion libraries
- Reliance on third-party packages (it is not a con in itself, since it was not designed to be a test runner only)
- Intimidating for beginners
Slightly less popular than the aforementioned options, it is also the most flexible, since it is technically a test runner only, and as such, you may pair it with the assertion library of your choice.
https://github.com/mochajs/mocha
An evolved library for evolved testing for anything that runs in a browser. It simplified how you performed end-to-end testing – previously you had to use many different frameworks. With cypress all you require is just the base framework – everything is bundled together!
+ Doesn’t use Selenium
+ Uses JavaScript for defining tests
+ Easy to use
+ Fast to configure
- Doesn’t use Selenium
- Does not provide support for Safari; runs tests in Chrome only
When in doubt – use Cypress. It’s a solid option, with many benefits. It’s a safe bet for all of your end-to-end testing purposes.
https://github.com/cypress-io/cypress
Another one of the easy frameworks. It leverages the W3C WebDriver API to perform all predefined commands. It has a clean syntax that feels intuitive, therefore it feels easy to pick up. There is an option to use Selenium, though by default it uses the standard WebDriver API.
A huge advantage of the framework is that it can mimic Firefox & Chrome.
+ Can use different browsers
+ An integrated solution
+ Selenium as an opt-in
- Does not provide support for Safari
- Not as popular
Out of the two, go for Nightwatch if you are designing your app in the Behavior-Driven Design way.
https://github.com/nightwatchjs/nightwatch
The first post from the series of posts about the Battle-Tested Frameworks showcases the most popular frameworks from each category; this is only a small taste of what’s to come!
The JavaScript ecosystem is famous for having a package for every occasion, which is why we will continue to show our choices of libraries & frameworks for all different purposes. Only the ones, however, which are ready for serious use, and the ones that you are safe to bet on.
.svg){kind=small}
