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

TL;DR

There is no absolute best JavaScript framework; the right choice depends on a project’s needs and the trade-offs a developer prefers. The same to-do app is built with 10 options, Angular, React, Vue, Svelt, Lit, Alpine, Solid, Stencil, Mithril, and Vanilla JS, to compare how they handle concerns such as state, data binding, events, and application lifecycle. Read on to see where each approach fits.

Transcript

which javascript framework is the best if we go off of downloads react wins but based on github stars view is the best but svelt is the most loved framework according to the 2021 stack overflow survey and some people out there might even tell you that you don't need a javascript framework and whether you're a new developer or have 20 years of exper... Read More

Key Insights

• 🗯️ Choosing the right JavaScript framework is crucial for frontend development, impacting productivity, scalability, and maintainability.
• 🌥️ React is the most popular framework, with extensive community support, a large ecosystem, and flexible architecture.
• 😤 Angular is an opinionated framework with predictable conventions, suitable for enterprise-level applications and large teams.
• 🏛️ Vue.js is independent, approachable, and empowers developers to build complex UIs with a large ecosystem.
• 🥰 Svelt is the most loved framework according to the Stack Overflow survey, focusing on minimalism and compiler-based approach.
• 🕸️ Lit and Stencil are ideal for building web components, while Alpine is a lightweight library for adding interactivity to existing HTML.
• 🎮 Solid and Mithril prioritize performance and offer compact sizes, while Vanilla JS provides ultimate control without abstractions.

Questions & Answers

Q: Which JavaScript framework is best?

There is no absolute best JavaScript framework. React leads by downloads, Vue by GitHub stars, and Svelt was the most loved framework in the 2021 Stack Overflow survey, so the best choice depends on the project and the developer’s preferences.

Q: Which 10 JavaScript frameworks and approaches are compared?

The comparison covers Angular, React, Vue, Svelt, Lit, Alpine, Solid, Stencil, Mithril, and Vanilla JS. Each is used to build the same basic to-do app so its trade-offs can be considered on a common task.

Q: What does the example to-do app do?

The app lets a user enter text in a form, submit it, and display the new item in a list. It also saves items to local storage so they remain available after the page is refreshed.

Q: Why do developers use JavaScript frameworks instead of Vanilla JS?

Frameworks automatically bind or connect HTML to JavaScript, while Vanilla JS requires developers to retrieve and update DOM elements imperatively. Frameworks also help avoid implementing additional capabilities, such as routing or animation, entirely from scratch.

Q: What makes the Vanilla JS to-do app difficult to scale?

Its application state is decoupled from the UI, making the two difficult to keep synchronized. Updating the interface requires manually creating a list item, setting its HTML, and appending it to the DOM, while event behavior may be invisible from the markup.

Q: How does the Vanilla JS app handle form submission?

It registers an event listener for the form’s submit event. The handler calls preventDefault to stop a page refresh, then passes the current input value to the add-to-do function.

Q: How does the Vanilla JS app restore saved to-do items?

When the application initializes, it retrieves existing items from local storage. If items exist, it loops over them with forEach and calls the add-to-do function for every item.

Q: What are React’s main characteristics in this comparison?

React is presented as the most popular option and as a tool designed to build complex user interfaces. It is minimal and unopinionated about code organization, relying on the open-source community for concerns such as routing, animation, and state management, which leaves developers with many decisions.

Summary & Key Takeaways

• The video demonstrates building a to-do app using 10 different JavaScript frameworks, highlighting trade-offs and considerations for each.

• Frameworks discussed include React, Angular, Vue, Svelt, Lit, Alpine, Solid, Stencil, Mithril, and Vanilla JS.

• The video emphasizes the importance of choosing the right framework for frontend development and suggests building something with each framework to find the best fit.