Skip to content

Instantly share code, notes, and snippets.

@bmaupin
Last active December 3, 2024 15:16
Show Gist options
  • Save bmaupin/25e7bf945f3f06ec4de884c840177097 to your computer and use it in GitHub Desktop.
Save bmaupin/25e7bf945f3f06ec4de884c840177097 to your computer and use it in GitHub Desktop.
Thoughts on JavaScript frameworks

General

Recommendations

Full stack vs. frontend

Most people should use a full-stack framework and not a frontend framework by itself.

Frontend frameworks are best suited if you want to create a single-page application (SPA) that does not have any server/backend component, but this is rare. Even if you only want to call third-party APIs, this should be done from the backend and not the frontend for security reasons.

Which frontend framework

Even if you're using a full-stack framework, you should pick which frontend framework you want to use since the current full-stack frameworks support or are based on specific frontend frameworks.

React is the current de-facto standard frontend framework. If you want to benefit from the largest frontend ecosystem and pool of experienced developers, React is the best choice.

If you want to focus on simplicity and performance, Svelte is the best choice.

If you want performance without straying too far from the React ecosystem and don't mind bleeding edge, Solid.js is a good choice.

Which full stack framework

If you have a lot of static content, Astro is the best choice.

If you mostly have dynamic content:

  • If picked React for your frontend framework, Remix is the best choice.
  • If you picked Svelte for your frontend framework, Svelte's own SvelteKit is the best choice.
  • If you picked Solid.js for your frontend framework, Solid's own SolidStart is the best choice.

More notes on full stack frameworks

Full-stack framework based on React

  • Built in response to perceived shortcomings of Next.js
  • Built by the team that made React Router and has React Router integrated
  • Supports server-side rendering out of the box

Server-first framework with the goal of minimal JavaScript in the browser

  • Focuses on static-site generation, but server-side rendering is available as an option
  • Supports a number of different frameworks (React, Vue, Svelte, Solid.js, etc.)
  • Best suited for sites with a lot of static content

One of the first full-stack frameworks based on React

SvelteKit

Svelte's own full-stack framework

More notes on frontend frameworks

ⓘ Some are starting to call these front-end frameworks "libraries," indicating they should not be used on their own but as part of a larger (normally full-stack) framework. This is a recent trend.

Still the de-facto standard as of the time this page was last updated

Diverges somewhat from the React API by adopting signals, which give more control over when components re-render

  • Takes a lot of the good from React (JSX, one-way data binding) but changes how components are rendered for better control and performance
  • Faster than React
  • Uses JSX, like React
  • No virtual DOM

Supposedly simpler and more lightweight than React (hence the name)

  • Because it's so lightweight, it's faster than React
  • Potentially lower learning curve than some of the other frameworks that are more similar to React
  • Not related to React, so has a completely different API (as compared to Solid.js/Qwik which have React-like APIs)
  • Doesn't use JSX
  • Two-way data binding
  • No virtual DOM

Supposedly faster than React (hence the name) but with a very similar API

  • Speed seems to be due to out-of-the-box features like resumability, lazy execution, etc.
  • Doesn't seem like it really differentiates itself enough from React to pull people away from it
    • Those looking for something similar to React but faster might be better served by Solid.js
    • Those looking for something different from React and faster might be better served by Svelte
  • Uses JSX, like React
  • Uses virtual DOM, like React

Lightweight library for integrating interactive elements in HTML

  • Unlike most of the other frameworks, this one actually is more like a library
  • Built on JavaScript but doesn't require writing JavaScript
    • Interactivity comes by using specific custom HTML attributes
    • These elements interact with the web server, which can be JavaScript (e.g. Node.js), but this isn't a requirement

Framework based on web components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment