DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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?

Top comments (51)

Collapse
 
leomjaques profile image
leonardo jaques πŸ‘¨πŸ»β€πŸ’»

Great post, Esther!

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
 
oniichan profile image
yoquiale

Because it's creators said so and because it needs to be used with more libraries to properly make an app. Angular is a framework because it comes with everything you need to make a proper app.(testing, routing, etc...)

Collapse
 
cswalker21 profile image
cswalker21

Thank you. BTW, I didn’t find the first point compelling. If the creators felt silly and decided to call it a banana, that wouldn’t make React a banana.

The second point, however was simple, concise, and well stated. Thanks again.

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

Thanks!

Collapse
 
estheragbaje profile image
Esther Agbaje Author

You're welcome!

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
 
connor98web profile image
Connor98web

Great post

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
 
matthew_anderson profile image
Matthew Anderson

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

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await