Skip to content

How to Discover JavaScript Libraries in React, Angular, and Vue

Navigating the JavaScript ecosystem to find tools and resources is often an overwhelming and consuming task for many developers. But that makes sense, because it’s already so vast, and changes by the day!

Most libraries and frameworks have packages that help integrate with other development workflows like build tools, state management, styling, data-fetching, and form building.

This both makes it even more challenging to understand the ecosystem, and demands that developers continually learn with help from quality resources.

There are a few criteria to look out for when choosing tools and resources, including:

__Community adoption

  • Confirming the community’s adoption of the project is also important since it helps validate that others have tried a particular technology and have vetted it. You can infer the degree of adoption by checking out the number of downloads as identified by NPM.

__Community support

  • GitHub has a feature that allows the community to “star” or sponsor a repository. This helps the community support and promote the project, and generally means that the community is using the project and providing feedback for improvements.

__The Project maintainer

  • This is important because knowing the person, company, or community behind a project gives you an idea of the investment and commitment backing a project. You wouldn’t want to use a project that may be swiftly abandoned. The maintainer of a project is typically the host of the project repository on GitHub.

__Other criteria

  • The number of pull requests and open issues. Take note of not only the quantity of pull requests and issues, but when the most recent pull request merged. This helps identify the health of the project and if it is still actively maintained.

Finding relevant technologies doesn’t need to be this hard, which is why [framework.dev]((https://www.framework.dev/) is such a great open source tool for discovering tools, technologies, and learning resources!

🔗Framework.dev

[Framework.dev]((https://www.framework.dev/) helps developers choose the appropriate tools for their projects by comparing libraries, frameworks, and tools with individual platforms for [React]((https://react.framework.dev/), [Angular]((https://angular.framework.dev/), and Vue.

The platform considers all the criterias identified above such as open source community support, maintainers, and adoption, and compares them to help developers make important decisions for your project.

Since it is an open source project, you can add, edit, or suggest any project you feel should be added by submitting a PR.

Screenshot 2022-08-30 2.21.35 PM

🔗Using Framework.dev

Let me walk you through how to use Framework.dev!

Visit https://www.framework.dev/ and click on one of the available technologies. For this example, I will select Angular.

Screenshot 2022-08-30 2.23.48 PM

Here, you can search and compare tools, libraries, blogs, courses, and more for the Angular framework or simply browse through the collection by clicking on the categories from the sidebar.

Click on the Library dropdown from the sidebar and select State Management.

Screenshot 2022-08-30 2.44.30 PM

This will curate a list of every resource in the collection that has “state management” in its name, description, or tag.

To filter the list with advanced options, click on the Advanced button and type filter criteria you want to apply to the list.

Screenshot 2022-08-30 2.45.43 PM

In the list, you will notice each item displays a description including the number of stars, downloads, and size of the project. In the top right corner of each item, there is a plus icon. Click on the plus icon of 2 random items to compare.

You can see that two selected items are highlighted. For this article, I selected Akita and NgRx Store. Go to the footer of the page and click “Compare”.

Screenshot 2022-08-30 2.47.19 PM

Here, you will be able to see side by side to Compare the library with details of Authors, Weekly Downloads, Overall Health and Stars to help in making decisions for your project.

Screenshot 2022-08-30 2.48.06 PM

You can also search for a library or tool if it is not listed on the menu. Here, I searched for “State Management”, which curated a result with every resource in the collection that has “state management” in its name, description, or tag.

Screenshot 2022-08-30 2.49.40 PM

You can navigate to other categories of blogs, books, courses, communities and podcasts to browse and compare these resources.

🔗Conclusion

What will you use Framework.dev for next? Let us know how it has helped you!

Framework.dev is committed to helping developers navigate the often confusing landscape of JavaScript technologies and educational resources.

One of the best parts of this project is that it welcomes contributions from the greater web development community. If there is any content you want to see added to the platform, you can Submit a PR!

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript