JavaScript Frameworks (React, Angular, Vue)

JavaScript Frameworks

In the world of JavaScript frameworks, it's quite a mess, to put it politely!

What is a JavaScript Framework?

When we talk about a framework, we're talking about a huge library that allows us to have a literal working framework!

We talk about frameworks for React, Vue, Angular, Svelte, Solid... etc. Often, we group them all under the name "JS framework"!

Important clarification

Strictly speaking, React is not a framework, but a JS "library"! But we group it with the other JS frameworks because it is widely used and very popular. The ecosystem around React is the richest and most popular today. If you're looking for anything, chances are a library has been created for React!

So when I talk about JS Frameworks, I will include React, but be aware that it is not really a framework in the pure definition!

Why use a JavaScript Framework?

The basic goal is to avoid reinventing the wheel over and over, and having to modify the DOM manually every time! So we start with a JS framework!

The current state of the market

Today, the market is very clearly moving towards React, but be aware that other JS frameworks are also widely used!

In this course, we will see the specificities of React, but I will take the time to provide you with documentation and courses on Angular, Vue, Svelte, etc.

Angular

Angular is widely used in large companies and in the most complex projects (ESN etc.) because it is close to a way of coding and an object-oriented architecture, close to multi-layered (MVC, MVVM, etc.). People who master Java will naturally prefer Angular!

React

React, on the other hand, is much lighter and more permissive. You can make it very simple, or very complex. It is used very heavily by a very large part of the market!

Reference: State of JS 2024 - Front-end Frameworks

None is better than another

Basically, none is good or bad, it's a matter of taste. I could accompany you in learning one or the other, but as a priority, we will see React.

The concept of components

The idea in all frameworks is that we will create components, functions, logical elements in blocks, following the basic concepts of JS, where we can easily create custom tags, custom logical elements.

Concrete example

For example, we want to create a leaderboard. We will create a Leaderboard component, which will contain a whole bunch of elements, logic, design, etc.

<Leaderboard />

And we can reuse this component everywhere in our application, without having to recode it every time! We can pass it props, events... etc. We can trigger a whole bunch of actions and logic via this component.

The fundamental principles

No matter the framework, the logic remains the same:

Avoid reinventing the wheel, recoding the same thing
Follow the general principles of atomic design
Without pushing it to the extreme, but in the idea of the concepts, break down the elements as small as possible
Keep the logic within the same component, the same feature

The different frameworks

Important: They are ALL good, they ALL have particularities, they ALL have an interest in certain cases.

The choice is good IF it meets your need, and that this choice does not become an obstacle.

The three main ones

Angular - Complete framework for large companies
Vue.js - Progressive and flexible framework
React - Most popular library (with a rich ecosystem)

Other popular frameworks

Complete frameworks

Svelte - Compiled framework, very performant
Solid - Modern reactive framework
Preact - Lightweight version of React
Lit - Web Components with TypeScript

Meta-frameworks (based on React/Vue)

Next.js - React with SSR/SSG
Nuxt - Vue.js with SSR/SSG
Remix - React with focus on web standards
Gatsby - React for static sites

Specialized frameworks

Astro - Framework for static sites
Deno Fresh - Modern framework for Deno
Docusaurus - Documentation and blogs
Eleventy - Static site generator

Backend/Full-stack frameworks

Nest.js - Backend Node.js (inspired by Angular)
Adonis - Backend Node.js framework
Meteor - Full-stack platform
Strapi - Headless CMS

How to choose?

The choice depends on:

Your experience (roughly React if beginner, Angular if Java/enterprise background)
( vue is good if you prefer the syntax as well )
The size of the project and especially the size of the team (Svelte for small projects, and specific needs, Angular for large projects with large teams)
The performances (Svelte/Solid for speed)
The ecosystem (React has the largest community, and therefore the greatest speed of dev, because everything already exists)
Specific needs (Next.js for SEO, Astro for static sites for example)

knowing that for each case, these are examples, Vue is capable of doing everything, just like Angular, or React.

Some resources

Théo t3.gg ( an American tech youtuber ) who compares the frameworks: https://www.youtube.com/watch?v=WJRf7dh5Zws
Cool stats on 2024 and the js ecosystem: https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/