What's up with so many Javascript frameworks?

I wrote this high level overview of Javascript Front End Frameworks to help beginner coders (who are already familiar with React) understand the differences between other Javascript front end frameworks and tools. This is by no means an exhaustive list, nor an in depth one. Some of the opinions found here are based on my research of other people's thoughts on these tools, so if there is anything here that you consider inaccurate, let me know in the comments! I'd love to hear what other developers think of these frameworks.

Notes on Vue

Released in 2014

• Vue was designed to be flexible and incrementally adoptable. Meaning that you can add Vue at any point during the development process. You can use it either as a library (aka, minimal Vue interaction) or as a full framework.
• One of the main ways that people use Vue is by building single file components. This is when we have Javascript, HTML and CSS for this component within a single file.
• pros:
  • short learning curve for JS devs
  • lightweight
  • highly compatible with most projects
• cons:
  • difficulty with older browsers
  • limitations in plugins/libraries in comparison to other frameworks

/App.vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello, World’
      }
    }
  }).mount('#app')
</script>

Source: https://vuejs.org/guide/quick-start.html

Notes on Angular

AngularJS released in 2010, Angular released 2016

• AngularJS came first, but as of 2022 it is no longer being updated.
• In 2016, Angular was released. It is a rewritten version of AngularJS, and it is not cross compatible. Meaning that, generally speaking, an AngularJS project will need to be extensively adapted to be able to support Angular.
• Angular is designed to make updating as straightforward as possible.
• Angular was built for easy scalability, from single-developer projects to enterprise-level applications.
• pros:
  • huge community and history
  • loads of libraries available
• cons:
  • steep learning curve
  • high complexity
  • need to be aware that it is different from AngularJS
• meh?: corporate backing by Google (could be a pro or a con, depending on your view of corporate maintenance of frameworks)

/hello-world.component.js

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <h2>{{ message }}</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  message = 'Hello, World!';
}

/index.html

<hello-world></hello-world>

Source: https://angular.io/guide/what-is-angular

Notes on React Native

Released in 2015

• Mobile app development using code based on React.
• pros:
  • short learning curve for React developers
  • supports both iOS and Android
• cons:
  • debugging can be a pain (devs need to leverage a debugging library for development of React Native)
  • complex smartphone gestures are not fully supported
  • will require expanding your knowledge of both mobile engineering and web development.
• meh?: corporate backing by Facebook (could be a pro or a con, depending on your view of corporate maintenance of frameworks)

/App.jsx

import React from 'react';
import {Text, View} from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default HelloWorldApp;

Source: https://reactnative.dev/

Notes on Next.js

Released in 2016

• Next.js is a React framework. It comes bootstrapped with an assortment of libraries for building out your React app. Similar experience to create-react-app, the command to start out a Next.js app is create-next-app.
• Includes features such as file based routing and the pre-rendering of HTML.
• pros:
  • quick way to get a site up and running
  • great choice of tools right out of the box
  • feels like an upgrade to React without being too heavy.
• cons:
  • opinionated (you’re committing to a set of pre-installed dependencies)
  • not as many available plugins in comparison to other React based frameworks

Source: https://nextjs.org/

Notes on Gatsby

Released in 2015

• Like Next.js, Gatsby is a React framework. It is also bootstrapped with an assortment of libraries, and can also be created with just one command. In Gatsby's case, this is npm init gatsby. Netlify acquired Gatsby in early 2023.
• pros:
  • like Next.js, easy to get up and running in development
  • LOADS of plugins available
• cons:
  • opinionated (you’re committing to a set of pre-installed dependencies)

Source: https://www.gatsbyjs.com/

Other frameworks to look into

• https://vitejs.dev/
• https://remix.run/
• https://www.11ty.dev/

Originally posted on my github.

Photo by Lautaro Andreani on Unsplash