Can I build complex apps without a JavaScript framework?

While understanding Vanilla JS is crucial, attempting to build non-trivial apps without a framework is generally discouraged. You often end up Reinventing the wheel and creating your own unwieldy framework.

What are the main differences between React and Angular?

React is minimal and less opinionated, relying on the community for additional features. Angular is highly opinionated, requires TypeScript, and comes with built-in solutions for routing and animation, making it suitable for enterprise applications.

How does Svelte differ from other JavaScript frameworks like React?

Svelte works as a compiler, converting your code into efficient, imperative vanilla JavaScript at build time, rather than shipping a virtual DOM runtime to the browser like React.

When should I consider using Lit or Stencil?

Lit and Stencil are excellent choices if your primary goal is to build standard web components that can work across different frameworks. They offer a more streamlined developer experience for this specific purpose.

What is SolidJS and why is it fast?

SolidJS is a UI component library inspired by React but it avoids the virtual DOM. It compiles to native DOM nodes, leading to very high performance benchmarks.

Is Alpine.js suitable for large single-page applications?

Alpine.js is a tiny library best suited for adding small amounts of JavaScript interactivity to existing HTML. For complex single-page applications, larger frameworks like React, Vue, or Angular are generally recommended.

I built the same app 10 times // Which JS Framework is best?

Fireship

Science & Technology4 min read22 min video

Aug 11, 2021|2,805,334 views|89,892|3,573

webdev app development lesson tutorial javascript js react angular svelte vue

Save to Pod

Key Moments

TL;DR

Comparing 10 JavaScript frameworks by building the same app to highlight trade-offs and developer experience.

Key Insights

No single 'best' JavaScript framework exists; the choice depends on project needs and developer preference.

Vanilla JavaScript is fundamental but quickly becomes unmanageable for complex applications due to manual DOM manipulation and state management.

Frameworks offer declarative UIs, automatic data binding, and component-based architectures, streamlining development.

React, Angular, and Vue are popular, established choices with large ecosystems, suitable for complex apps.

Svelte compiles code to plain JavaScript, avoiding a runtime and offering a clean developer experience.

Lit and Stencil focus on Web Components, enabling framework-agnostic UI elements.

SolidJS provides high performance by compiling to native DOM nodes without a virtual DOM.

Alpine.js is a lightweight option for adding interactivity to existing HTML, akin to jQuery replacements.

Mithril is lightweight and performs well but has a unique, JavaScript-centric UI definition that can be awkward.

The choice of framework impacts maintainability, scalability, community support, and job marketability.

THE CASE FOR VANILLA JAVASCRIPT

While understanding Vanilla JavaScript is crucial for all developers, building complex applications with it is challenging. It requires manual DOM manipulation and explicit state management, leading to cumbersome code. This approach lacks the automatic data binding and declarative UIs that frameworks provide, forcing developers to essentially build their own framework, which is inefficient and hard to scale.

REACT: THE POPULAR DECLARATIVE CHOICE

React, often considered a library, excels at building complex user interfaces declaratively. It relies on components and JSX for UI structure and uses hooks like `useState` and `useEffect` for state management and lifecycle events. While minimal by design and requiring external libraries for routing or state management, its vast community, extensive job market, and official CLI (Create React App) make it a dominant force.

ANGULAR: THE OPINIONATED ENTERPRISE SOLUTION

Developed by Google, Angular is a highly opinionated framework that dictates project structure and tooling, making it excellent for large teams and enterprise applications. It mandates TypeScript and offers built-in solutions for routing and server-side rendering. Its powerful CLI, component-based architecture (TypeScript classes with decorators), and extensive templating language simplify complex projects, though it has a steeper learning curve.

VUE.JS: APPROACHABLE AND FLEXIBLE

Vue.js offers an approachable developer experience, similar to Angular but more flexible. It provides official packages for routing and state management and boasts a large ecosystem. Vue's components are defined in single `.vue` files (template, script, style) and use directives like `v-for` and `v-model` for efficient UI development. Its powerful CLI and ease of integration make it a strong contender for various project sizes.

SVELTE: THE COMPILER APPROACH

Svelte stands out by compiling code into highly efficient, imperative Vanilla JavaScript at build time, eliminating the need for a virtual DOM or runtime in the browser. This results in smaller bundle sizes and faster performance. Components are defined in `.svelte` files, and its syntax feels natural to JavaScript developers. While beloved by its users, its smaller community might pose challenges for library support or job searching.

WEB COMPONENT FOCUSED FRAMEWORKS: LIT AND STENCIL

Lit (Google-sponsored) and Stencil (from the Ionic team) focus on building standard Web Components. Lit simplifies the complex Web Component API using template literals, offering a React-like JSX feel. Stencil, similar to Angular in component definition, uses JSX for templating. Both compile components into reusable, framework-agnostic elements, ideal for design systems or libraries intended for use across multiple frameworks.

SOLIDJS: HIGH PERFORMANCE REACTIVITY

SolidJS is a UI library inspired by React but without a virtual DOM. It compiles to native DOM nodes, achieving exceptional performance benchmarks. It uses a concept similar to React hooks called 'signals' for reactive state management. Components are defined in JSX. SolidJS offers a more optimized and developer-friendly experience than React, though its community is smaller, impacting library availability and job prospects.

ALPINE.JS: LIGHTWEIGHT INTERACTIVITY

Alpine.js is a tiny (~4KB) library designed to add JavaScript interactivity directly to HTML, similar to jQuery's role or Tailwind CSS for styling. It allows reactive data and directives (`x-data`, `x-on`, `x-bind`) to be applied directly in the markup. It's excellent for enhancing existing static sites or adding small interactive widgets but may not be suitable for building complex single-page applications from scratch.

MITHRIL: A UNIQUE PERFORMER

Mithril is a lightweight framework that uses a virtual DOM and offers good performance. It allows component definition as functions, classes, or plain JavaScript objects, with UI defined using a hyperscript-like `m()` function. While providing a unique, pure JavaScript approach to UI definition which some may prefer, the author found it to be the most time-consuming to build with, highlighting its distinct developer experience.

CHOOSING THE RIGHT FRAMEWORK

The decision between these 10 frameworks—Vanilla JS, React, Angular, Vue, Svelte, Lit, Stencil, SolidJS, Alpine.js, and Mithril—hinges on project complexity, team familiarity, performance needs, and desired developer experience. While popular frameworks like React, Angular, and Vue offer extensive ecosystems and job opportunities, innovative solutions like Svelte and SolidJS provide compelling performance and developer ergonomics, albeit with smaller communities.

Mentioned in This Episode

●Software & Apps

●Tools

●Companies

●Organizations

●Studies Cited

●Concepts

JavaScript Frameworks: Dos and Don'ts

Practical takeaways from this episode

Do This

Build a small app with potential frameworks to find the best fit for your happiness.

Understand Vanilla JS fundamentals, but don't try to build complex apps with it alone.

Leverage framework CLIs for project setup and configuration.

Organize your code into components for better maintainability and scalability.

Consider the community size and job market when choosing a widely adopted framework.

For adding basic interactivity to existing HTML, consider lightweight options like Alpine.js.

Avoid This

Try to find one 'absolute best' framework; the best choice is subjective.

Build your own framework when existing, mature options are available.

Underestimate the learning curve of opinionated frameworks like Angular.

Neglect exploring newer frameworks like SolidJS for performance gains.

Rely solely on framework documentation for complex concepts like React's useEffect hook without further study.

Framework Popularity Metrics

Data extracted from this episode

Framework	Weekly Downloads (npm)	GitHub Stars
React	10M+	170K+
Angular	N/A (2nd most downloaded)	75K+
Vue.js	N/A (tied for 2nd on npm)	187K+
Svelte	N/A	50K+
Alpine.js	N/A	17K+

Common Questions

There is no single 'best' JavaScript framework. Popularity can be measured by downloads (React) or GitHub stars (Vue.js). The most loved, according to a 2021 survey, was Svelte. The ideal choice depends on your project needs and personal preference.

Topics

Frontend Development JavaScript Frameworks Vue.js Svelte Web Components Lit Stencil SolidJS Alpine.js Mithril Vanilla JS

Mentioned in this video

softwareGatsby

Another alternative tool to Create React App for building React projects, often used for static site generation and performance optimization.

companyFireship.io

A platform offering full courses on web development frameworks, with the creator encouraging viewers to become pro members.

softwareTailwind CSS

A utility-first CSS framework. Alpine.js is compared to it as being the JavaScript equivalent for interactivity.

softwareSolidJS

A tool for building UI components that is inspired by React but does not use a virtual DOM, instead compiling code to native DOM nodes, resulting in high performance.

softwareWebpack

A module bundler used under the hood by Create React App to bundle all JavaScript code into a single file.

conceptWeb Components

A browser standard that allows developers to create reusable custom HTML elements. Lit and Stencil are frameworks focused on building them.

softwareMithril

A lightweight JavaScript framework that uses a virtual DOM, offering a different developer experience, where the UI is defined in pure JavaScript.

toolCreate React App

The official command-line interface for creating new React projects, though alternatives like Next.js or Gatsby are also mentioned for project generation.

studyStack Overflow survey 2021

A survey cited to show that Svelte was the most loved framework among developers.

softwareSvelte

A framework identified as the most loved in the 2021 Stack Overflow survey, it functions as a compiler rather than shipping a runtime to the browser, turning code into plain JavaScript.

softwareLit

A Google-sponsored project focused on building web components, providing a nicer way to create standard custom elements without deep expertise in the underlying APIs.

toolVue UI

A command provided by the Vue CLI that opens a browser-based graphical interface for managing and configuring Vue projects.

organizationIonic framework

A component library for mobile development built with Stencil. The team behind Ionic developed Stencil.

softwareAlpine.js

A tiny JavaScript library (around 4KB) for extending existing HTML with reactive data and features commonly found in larger frameworks, often seen as the JavaScript equivalent of Tailwind CSS.

softwareVanilla JS

Plain JavaScript without any framework. While essential for understanding, building non-trivial apps with it is described as a recipe for disaster due to manual DOM manipulation and lack of built-in features like data binding.

toolng new

The Angular CLI command used to create a new Angular project, which is pre-configured with TypeScript.

softwareVue.js

An independently developed framework that feels similar to Angular but is more approachable, offering official packages for routing and state management, and boasting the most GitHub stars.

softwareRollup

A module bundler that can be used when generating a new Svelte project, alongside Webpack.

softwareStencil

A framework from the team behind Ionic, used for building web components that compiles components down to standard web components, similar to Angular in structure but using JSX for templating.

softwareLitElement

The base class that components in Lit extend, used for building web components.