Like what you're reading? Share it!
Follow us to stay up to date with our latest and greatest!

Battle-Tested JavaScript Frameworks - Part 1

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.

Front-end

React

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.

React Pros

+ 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

React Cons

- Can be a bit heavy

- Mixing JavaScript, HTML, and CSS directly together

- Not too fast

- A limited list of first-party plugins

When to use React

Software engineers from companies of all sizes choose React, because of its extensive community support, and the depth of the talent pool. You can’t go wrong with picking React.

React GitHub Repository

https://reactjs.org/docs/getting-started.html

Vue

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.

Vue Pros

+ 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

Vue Cons

- The least popular in startup & corporate settings in the West

- Handles introductions of new major versions of the library poorly

When to use Vue

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 (Weex, Nativescript-Vue, Vue Native).

Vue GitHub Repository

https://github.com/vuejs/vue

Angular

The last front-end framework in this section. It is the heaviest and has the most amount 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.

Angular Pros

+ The most regularly released out of the three

+ Entirely written in TypeScript

+ Heavily Opinionated

+ A CLI generator

Angular Cons

- Heavily Opinionated

- Heavy

- Slow

- Not universally liked among developers

When to use Angular

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 really large.

Angular GitHub Repository

https://github.com/angular/angular

 

Hybrid

Next.js

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.

Next.js Pros

+ No configuration needed

+ Fast time-to-market

+ Much better SEO than with plain React

+ A great solution for both startups and enterprises

Next.js Cons

- Opinionated routing — you are forced to use the page-based routing

- Few third-party plugins

When To Use Next.js

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.

Next.js GitHub Repository

https://github.com/vercel/next.js

Nuxt.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.

Nuxt.js Pros

+ 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

Nuxt.js Cons

- Opinionated routing – you are forced to use the page-based routing

- Few third-party plugins

When To Use Nuxt.js

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.

Nuxt.js GitHub Repository

https://github.com/nuxt/nuxt.js

Backend

Nest.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.

Nest.js Pros

+ Heavily opinionated

+ Designed to be reliable

+ Feels great with combination with Angular

Nest.js Cons

- Heavily opinionated

- Few third-party plugins

- Not as popular among developers

When To Use Nest.js

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.

Nest.js GitHub Repository

https://github.com/nestjs/nest

Express

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 has been in alpha since 2014 (!). 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.

Express Pros

+ Heavily unopinionated

+ Likely the most popular backend framework in the Node.js world

Express Cons

- Heavily unopinionated

- Likely dead or on life support

- No async/await

When To Use

Use when developing your hobby projects, or as a starting point for your internal library.

GitHub Repository

https://github.com/expressjs/express

Fastify

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.

Fastify Pros

+ Built-in Validators

+ Lightning fast

+ A rich plugin ecosystem

+ Opinionated with a way out

Fastify Cons

- Not as popular

- Not many companies use it

When To Use Fastify

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.

Fastify GitHub Repository

https://github.com/fastify/fastify

Unit Testing

Jasmine

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.

Jasmine Pros

+ No external dependencies

+ Whatever you’re working on — you can test it with Jasmine

+ Built-in assertion library

Jasmine Cons

- Plenty of configuration required

- Slightly unintuitive reports

- Does not have in-built support for rerunning failed tests

When To Use Jasmine

Since it is the most universal position on the list, when in doubt, use Jasmine.

Jasmine GitHub Repository

https://github.com/jasmine/jasmine

Jest

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 Facebook, 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.

Jest Pros

+ Great documentation

+ Simple

+ Visual regression tests

+ Easy coverage report

Jest Cons

-      Can be difficult to get used to it, learning it for the first time

-      Does not support as many libraries as Jasmine

When To Use Jest

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.

Jest GitHub Repository

https://github.com/facebook/jest

Mocha

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.

Mocha Pros

+ Simple

+ Easy support for generators

+ Easy asynchronous testing

+ You may choose between a wide variety of assertion libraries

Mocha Cons

-  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

When To Use Mocha

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.

Mocha GitHub Repository

https://github.com/mochajs/mocha

End-to-end testing

Cypress

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!

Cypress Pros

+ Doesn’t use Selenium

+ Uses JavaScript for defining tests

+ Easy to use

+ Fast to configure

Cypress Cons

- Doesn’t use Selenium

- Does not provide support for Safari; runs tests in Chrome only

When To Use Cypress

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.

Cypress GitHub Repository

https://github.com/cypress-io/cypress

Nightwatch.js

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.

Nightwatch.js Pros

+ Can use different browsers

+ An integrated solution

+ Selenium as an opt-in

Nightwatch.js Cons

- Does not provide support for Safari

- Not as popular

When To Use Nightwatch.js

Out of the two, go for Nightwatch if you are designing your app in the Behavior-Driven Design way.

Nightwatch.js GitHub Repository

https://github.com/nightwatchjs/nightwatch

Conclusion

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.


Categories:
Check Out Our Latest Podcast Episode

Related articles

© 2021 ITMAGINATION. All Rights Reserved. Privacy Policy