DEV Community

Cover image for 5 Popular Frontend Development Tools in 2021
Esther Agbaje
Esther Agbaje

Posted on

5 Popular Frontend Development Tools in 2021

As a frontend developer, you'll be building out web designs (usually handed over from a User Interface Designer) with programming languages like HTML, CSS, and JavaScript.

However, the increasing number of frontend developer tools out there make it difficult to decide which to pick for your next project. I've compiled five popular frontend developer tools you should include in your workflow that boost productivity🚀🚀

A good understanding of what these tools are, their features, tradeoffs, and ease of use can help you decide the right one to use.

We'll explore these popular frontend development tools under the following categories:

  • JavaScript frameworks
  • JAMStack
  • UI Component Libraries
  • Quality Assurance & Testing
  • Low Code Tools

 

I. JAVASCRIPT FRAMEWORKS

JavaScript frameworks are one of the most preferred platforms to build dynamic web applications. They make complex Javascript processes such as DOM manipulation(Document Object Model), complex state management, routing between pages, form data management, etc., very straightforward.

One of the most popular JavaScript frameworks (or library if you prefer this term 😉) is React.js.

ReactJS

According to a StackOverflow survey in 2020, JavaScript continues to be the most used language, with React ranked as the second most popular JavaScript framework.

Popular JavaScript Frameworks

React is also well-known for its:

  • vibrant community
  • declarative syntax using JSX
  • ease of managing and sharing state using hooks
  • large ecosystem of packages to solve specific problems
  • cross-platform capabilities (React Native, React 3D)

These key features make frontend developers pick React.js over other counterparts like Vue.js and Angular.
 

II. JAMSTACK

JAMStack stands for JavaScript, APIs, and Markup.

It's a modern front-end architecture that helps developers build fast, performant, and scalable websites or web apps.

The top emerging JAMStack frameworks are Gatsby and Next.js.

Top JAMStack tools

While Gatsby and Next.js have some overlapping features, I personally prefer Next.js and I'll tell you why shortly.

Next.js

Next.js is a React framework for developing single-page Javascript applications. It was developed by Vercel to abstract the complexities that come with using Reactjs.

Next.js makes it seamless to create:

  • statically rendered sites (like blogs, magazines, corporate websites)
  • server-rendered sites (like eCommerce shops, SaaS software, etc.)
  • or both, depending on your need

Some of the features that stand Next.js out are:

  • Image Optimization: Images take up to 50% of most web pages. Next.js has built-in image optimization to ensure images don't have a negative impact on your app's load time.
  • Data fetching: Next.js eliminates the need for loading spinners by making it possible to fetch data at build time or on the server.
  • Routing: Creating a route by adding a file to the pages directory is such a pleasure!

Next.js looks promising as a React framework because its unique features improve developer productivity.

 

III. UI COMPONENT LIBRARIES

When starting a new project, you'll likely face the decision whether to build your UI internally or to buy a ready-made library of UI components.

In most cases, using an existing UI component library saves you time, increases developer productivity, and helps you ship your product to your customers faster.

Some popular UI component libraries include Material UI, AntDesign, Radix UI and Chakra UI. After using some of these libraries, I’ve been so consistently impressed with the simplicity, modularity, flexibility and ease of use of Chakra UI.

Chakra UI

With over 22,000 Github stars, Chakra UI is blazing hot in the front-end developer community.

Chakra UI

It's an open-source React component library (released in 2019) that provides the building blocks you need to create accessible websites and apps.

Some features that make Chakra UI delightful for frontend developer are:

  • Style props: Chakra UI comes with a very intuitive, prop-based model of styling components, which makes it easy to use
  • Accessibility: Getting components to have the right color contrast, keyboard, and screen reader accessibility comes for free!
  • Beautiful and customizable Components: All Chakra's components look stunning by default and come with dark mode support. Who doesn't love dark-mode?

When you need to build a React application, I strongly recommend using Chakra UI as the starting point for your UI elements. It's a real time saver! If you're a Vue developer, you'd want to check out Chakra UI Vue.

 

IV. QUALITY ASSURANCE & TESTING

Front-end testing is pivotal in ensuring web apps are stable and reliable. And as a front-end developer, you are responsible for making that happen!

To achieve this, you need an excellent suite of automated tests to ensure that nothing breaks when your users interact with your app.

The 2020 State of JS Testing ranks Testing Library, Jest and Cypress as one of the popular tools for testing.

Testing tools

Of the popular tools, Cypress is a top pick.

Cypress is a JavaScript end-to-end testing framework that allows front-end developers and QA engineers to write automated tests for their web applications.

Two features that stand Cypress out are:

  • Automatic waiting: Automatic waiting is a mechanism built into Cypress that enables it to wait for elements to appear in the DOM before executing any query or assertion. By default, Cypress waits for 4 seconds.

  • Real-Time Reload: Cypress can detect whenever you save changes to your tests. Cypress automatically re-runs in the browser without the need to trigger the run manually.

Cypress also offers more features such as debuggability, spies, stubs & clocks, and many more. With Cypress, you get to ship better code to production.

 

V. LOW CODE TOOLS

As the name implies, low code tools require little to no code to build fully-featured websites and web applications.

A recent article by John Rymer of Forrester proves that low-code offers the potential to "make software development 10 times faster than traditional methods."

Common tools in this category are Webflow, Retool and Bubble.

I've used Retool a few times and I love it.
 
Retool

Retool is a low-code, drag-and-drop software that makes it fast and easy to build internal apps (think dashboards and admin panels).

Retool

A recent survey showed that front-end developers spend over 30- 45% of their time building internal apps from scratch which can reduce developer productivity.

Retool saves you time by providing pre-built components, an easy connection to your datastore, and a clean drag-and-drop interface to visualize data.

Here's how Retool works:

  • connect your datastores like Postgres, MongoDB, or Firebase
  • write queries to select aspects of the database you care about using SQL or Javascript
  • connect these queries and logic to the pre-built components (https://retool.com/components) like Data tables, Charts, Dropdowns, etc.
  • organize the components to help you visually display and customize data.

 

Conclusion

When choosing a tool as a front-end developer, the first step is to research to figure out your work process and then pick the most efficient tool that gets the job done.

 

Frontend Devs, what other tools will you add to this list and why?

Discussion (49)

Collapse
cswalker21 profile image
cswalker21

I read this whole disappointing flame war, and still don’t have a clue why the term framework is inappropriate for React. If someone could take the time to explain that (if they can do so in a civil manner), it would be a great help.

Define terms. What is a framework? What is a library? Why does React fit the latter and not the former? What is different about Vue that makes it a framework?

Thank you.

Collapse
samjakob profile image
Sam (NBTX)

Yea I think this is all a beyond pointless argument, but with that said my two cents is I think the defining characteristics listed in this Wikipedia article are a good way of articulating the difference: en.wikipedia.org/wiki/Software_fra...

The reason I’d be willing to argue React isn’t a framework (if I cared) is that of the key features of a framework listed in the article, React has no inversion of control - the order in which code is called (what code is executed and when) is not decided by React, unlike with frameworks such as Vue - and no default behavior (templates) - where Vue has its .vue single file components that are stitched together by Vue in a manner that Vue decides, with React you imperatively declare exactly how everything is rendered too.

Collapse
karteek_godavarthi profile image
Karteek Godavarthi

Great Article Esther! I've been working with React JS on & off. Mostly feature enhancing or bugs. Never really thought of creating a project from scratch, This made me interested to start one :).

Keep creating content like this! More power to you

Collapse
estheragbaje profile image
Esther Agbaje Author

Thank you, Karteek!

Collapse
imiahazel profile image
Imia Hazel

Thanks for the valuable resources. Some are new to me. Well Researched and Well Explained :)

Collapse
estheragbaje profile image
Esther Agbaje Author

You're welcome, Imia! Glad this was helpful to you

Collapse
wkylin profile image
WKYLIN

Thanks!

Collapse
estheragbaje profile image
Esther Agbaje Author

You're welcome!

Collapse
rafidmuhymin profile image
Rafid Muhymin Wafi

How have you built these awesome charts?? They are really looking cool! Especially the testing libraries one.

Collapse
renaisense_ profile image
Jordi Riera

It is a good list albeit mostly react centric, would be nice to see some other alternatives for other frameworks/libraries. Thanks for the list and explanations though

Collapse
matthew_anderson profile image
Matthew Anderson

You should try stellisoft.com/?edit. All of these benefits wrapped up in one platform.

Collapse
gravy17 profile image
Tofi Agbaje

I think I might get into Chakra UI and Retool. Thanks for the info!

Collapse
estheragbaje profile image
Esther Agbaje Author

That'll be great, Tofi! You'd enjoy using them

Collapse
swish933 profile image
Nomso Ikem

Great article. I’ll be sure to check out chakraUI

Collapse
leomjaques profile image
Leonardo J. 👨🏻‍💻

Great post, Esther!

Collapse
chris2kus31 profile image
Chuy Moreno

Wrong! React is NOT framework please stop spreading this nonsense

Collapse
bl1133 profile image
Bryan Lee

With all this great researched information, your problem is a nitpick. Even if it's not technically a framework, many people refer to it as such

Collapse
chris2kus31 profile image
Chuy Moreno • Edited on

That’s the problem, it is not “technically” a framework, it’s just simple not. People that refer it as a framework heard it from somewhere and it confuses people as to what React actually is. NextJs is a framework that uses React library. This is how it should be informed. I guarantee newbies are getting confused as to…”well, should I use NextJs or React and what’s the difference?”

Thread Thread
dennisfrijlink profile image
Dennis Frijlink

And Nuxt js is a framework that uses the Vue.js framework

Thread Thread
chris2kus31 profile image
Chuy Moreno

Well, I think you failed to read correctly, I said NextJs not Nuxtjs.

Thread Thread
dennisfrijlink profile image
Dennis Frijlink

I said Nuxt.js :). Just saying that you also can make frameworks on top of frameworks like Vue.js and not only on top of libraries like React.js

Thread Thread
chris2kus31 profile image
Chuy Moreno

Gotcha, point taken.

Collapse
estheragbaje profile image
Esther Agbaje Author • Edited on

Chuy, this is such a poor way of communicating your thoughts/feedback on a public platform. You can do a lot better!

Collapse
chris2kus31 profile image
Chuy Moreno

Perhaps, I’ll take your advice and I hope you take mine as well.

Collapse
skylersaville profile image
Skyler Saville

Seriously…. someone needs to pump the brakes on their ego

Collapse
dennisfrijlink profile image
Dennis Frijlink

Everybody knows non-alcoholic beer is not actually beer because of the fact is doesn't contains alcohol. Despite that we all call it non-alcoholic beer instead of soft drink or lemonade.

So we all know that for example Vue.js is a Javascript framework (beer) and React.js is a Javascript library (non-alcoholic beer). But in everyday life or at blog posts like this, it doesn't matter people call it a library or framework.

So don't make a point of it and cheers. Thank you :)

Collapse
chris2kus31 profile image
Chuy Moreno

Well, let’s take your analogy. Who is all? Adults?(exp devs) Children?(newbies). I would argue that a child does not know any better and will take this as a fact and therefore go order a BEER and get drunk (failed because he got confused).

Thread Thread
dennisfrijlink profile image
Dennis Frijlink

That's what we call 'learning'. A newbie doesn't know anything a about the programming and have to learn how it is structurized, how it works etc. So the child wouldn't even get a beer because of his or her age. And the adult that starts drinking has already heard a lot about what it can do and what it can't do. But does not know how it tastes etc.

So stop making a problem of a small thing like this. Everybody knows how to use the Pythagorean theorem but a small part of the people that uses it knows how it actually works.

Thread Thread
chris2kus31 profile image
Chuy Moreno • Edited on

I think your missing the point. React itself doesn’t even carry themselves as a framework so why should we? In addition, by calling it a framework your taking away the core of what React is, a lightweight, flexible JavaScript library. So no, is not a small thing, it’s makes a HUGE difference.

Thread Thread
dennisfrijlink profile image
Dennis Frijlink

No you're missing the point. Read this post again. Does it matter in this post that React is a library or a framework?? No it doesn't. It's just about it's popularity. Think about it. I can guarantee that I can find at least one spelling mistake in every Dev.to blog post. Does that matter? No because it is not a dictation.

So focus on the meaning of this post instead of crawling just to one mistake or one misunderstanding.

Amen :)

Thread Thread
chris2kus31 profile image
Chuy Moreno

Spelling mistake haha..This is more than a spelling mistake lol. So I guess to you, referring Mars as Venus makes no difference since they are both planets right?(even though there huge obvious differences). This Somewhat shows your understanding of things.

Thread Thread
dennisfrijlink profile image
Dennis Frijlink • Edited on

If we're comparing mars and venus no XD. But in this post we're not talking about comparing mars and venus. And woooh this post is also not about the differences between Libraries and Frameworks. So if you said that China is not equal to Japan. And red is not equal to green.
Then it would have meant just as much, just saying React is not a framework but a library.

Beside that "Wrong! React is NOT framework please stop spreading this nonsense" is not the most commenly way of commenting blog posts. Just a tip for next time.

Thread Thread
chris2kus31 profile image
Chuy Moreno

One fact and one opinion out of all this.

Fact:
React is not a framework

Opinion:
“Is not the most commenly (whatever this means) way of commenting blog posts. Just a tip for next time”

Thread Thread
lamba3 profile image
LaMbA3

Well react is more a framework then a library. The distiction between the two terms can be looked from multiple persectives. But it doesent really make a difference call it what you want. No need to be mad about it.

Collapse
toxictoast profile image
ToxicToast

nah - non alcoholic beer is not beer, its a mistake!

Thread Thread
dennisfrijlink profile image
Dennis Frijlink

XD

Collapse
jackmellis profile image
Jack

Having had this debate a hundred times and done research into the matter I have come to the conclusion: who bloody cares? Like it couldn't possibly be less relevant to this article. This whole debate is just semantics

Collapse
mattbidewell profile image
Matthew Bidewell

Instead of screaming "wrong". Maybe use this forum to explain why you think its not a framework rather than accuse people of spreading nonsense.

Collapse
chris2kus31 profile image
Chuy Moreno

What? What’s in dispute is not an opinion, it’s a fact. It’s literally on the homepage banner of reactjs.org. Also, it’s not an accusation but a fact that this is spreading misinformation

Thread Thread
mattbidewell profile image
Matthew Bidewell

Okay, let me rephrase, instead of calling it nonsense and just declaring "Wrong!". Maybe take a kinder approach of directing people to the correct information so people can learn for themselves.

It's not very helpful to people who trying to learn and make themselves better engineers and developers when you just declare them wrong, if anything it makes the writer feel worse about what they wrote.

Constructive criticism is a great way to learn, but also a great way to teach.

Collapse
bovermyer profile image
Ben Overmyer

You should look up the word "pedantic" in a dictionary.

Collapse
toxictoast profile image
ToxicToast

To give my 2 Cents to that Topic aswell -
As an React Expert myself - i do not care if its called Jquery 2.0, Library, Framework whatever.
But if i would starting learning React i would like to have the right Term - therefore "Library".

Collapse
vadimkolobanov profile image
Vadim Kolobanov • Edited on

In fact, the creators of React (Facebook or Meta) call it a library

Collapse
danbamikiya profile image
Dan Bamikiya • Edited on

Now that you've given your opinion in the worst way possible I hope you feel smarter 😀

Collapse
leob profile image
leob

That's a bit harsh, and a bit of semantic nitpicking as well ... if you take React, and then (as almost everyone does) you install a few other tidbits alongside it (like react-router and a couple of other standard packages), well, then by all means you've got a "framework".

Collapse
skylersaville profile image
Skyler Saville

I think you could find a much more tactful way of going about this. But, whatever. You seem like the type that absolutely NEEDS to show they are right. So, congratulations on proving that, while also looking like a complete ass. Yes, React IS a library and NOT a framework. But, constantly needing to point this out to people must get tiring.

Collapse
appurist profile image
Paul / Appurist

While this might be accurate, if you're suggesting React be excluded from this list, that would be a disservice to both React and the reader. Does changing the section title to "JavaScript Frameworks and Libraries" resolve this? The problem with that is that this opens the scope to thousands of useful JavaScript libraries, while the focus of that section is on those providing that list of important framework-like packages available to the developer. Excluding React here because it doesn't actually provide a framework is worse.

Collapse
pengeszikra profile image
Peter Vivo

en.wikipedia.org/wiki/Software_fra... from this perspective any one can call react as framework.