The 3 broad types of JS Frameworks
Tags: javascript, angular, react, vue
Published: 2022-10-11 13:44:30

There are, broadly speaking, 3 categories that almost all JS frameworks fall into:

1. The **All-in-one**: This comes with everything and the kitchen sink built in.
   * **Pros:** There is a clear and recommended path for how to solve every problem. Going from one code base or job to another should be pretty trivial, as they will be using all the same tools, organization, and patterns as your previous job/code base.
   * **Cons:** Huge amount of information to learn up front. There is everything and the kitchen sink. So it can be very daunting, and take a lot longer to get started. Documentation tends to be harder to parse. Because it comes with everything, dist sizes are usually much larger, and performance slower. If one part of the system doesn't work well, or you just simply prefer a different approach for ideological reason, swapping it out can be difficult, and you may end up shipping both the new and original solutions because one is built in (even if it isn't used).
   * **Examples:** Angular is the best example of an all-in-one framework
1. The **Incomplete Framework**: Incomplete* does not mean *unfinished*, it just means it is a portion of a framework and you are left with the task for completing the framework by pulling in other tools/libraries and hooking them together yourself.
   * **Pros:** The framework is small by default. Theoretically, making it easier to get started with. You can pull in different libraries to solve the same problem. This leads to a larger ecosystem of options all trying to re-solve the same problem, which can lead to interesting experiments or innovations. Because nothing is officially recommended, the framework can move fast and evolve, even if that breaks everything in the ecosystem.
   * **Cons:** Because nothing is officially recommended, the framework can move fast and evolve, even if that breaks everything in the ecosystem. Since there is no recommended path, or officially maintained solutions to common problems, you are left to rely on the ecosystem. Simple problems that you probably don't care about will require a lot of time for you to evaluate a lot of different possible solutions. It is not uncommon for a chosen library to become deprecated over time, and require the project to undertake major tech debt to rip it out and replace it. Though there is much interesting experimentation in the ecosystem, and the ideas are all very interesting, experiments exist to fail and to be learned from, they don't exist to be solid, production ready, solutions. But sadly, many end up in use as such.
   * **Examples:** React is by far the best example of this.
1. The **Progressive Framework**: If the two above types of frameworks are opposite ends of a spectrum, the "Progressive" framework is halfway between both. A progressive framework is broken up into libraries that solve common problems, like an incomplete framework, except it has an officially maintained recommended solution for each, like the all-in-one.
   * **Pros:** You can start small, and learn just the main library quickly, then when you need to solve a specific problem (routing, state management, internationalization, testing, etc) there is a well maintained, officially recommended solution for everything. Because everyone uses the same recommended libraries, they get all the focus, attention, and improvement. This is a benefit, but at the cost of much less innovation within the ecosystem. However, if the community can innovate or improve on the existing solution, then that solution will become adopted as the new recommended and maintained approach going forward. (Such as Vue switching from Vuex to Pinia for state management).
   * **Cons:** The library maintainers take on the burden of complexity in maintaining many official libraries. Since they all most work together seamlessly, they must move slower to not break anything. If almost everyone is using the recommended solutions, then it means experimental ideas are often ignored in favor for the popular and stable default choices.
   * **Examples:** Vue.js coined the term "progressive framework", and is therefore the best example of it. However, the concept predates it. Even Backbone.js, considered the first popular frontend framework, would fall into the category. But newer options like Svelte, also fit this definition.