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

Fireship・2 minutes read

React is the most downloaded framework, Vue has the most GitHub stars, and Svelte is the most loved according to the 2021 Stack Overflow survey. Choosing a JavaScript framework is crucial for frontend development, with each framework offering unique features like declarative UI development in React, simplified project structure in Vue, and a minimalistic approach in Svelte.

Insights

  • React, Vue, and Svelte are highlighted in the 2021 Stack Overflow survey for being the most downloaded, most GitHub-starred, and most loved frameworks, respectively, showcasing the diverse popularity and strengths of various JavaScript frameworks in the frontend development landscape.
  • The video demonstrates the differences between frameworks like Vanilla JavaScript, React, Angular, Vue, Svelte, Lit, Stencil, Solid JS, and Alpine JS, emphasizing the unique features and approaches each framework offers, from manual data connection in Vanilla JavaScript to reactive state management in Svelte, providing developers with a comprehensive understanding of the trade-offs and benefits of different JavaScript frameworks for frontend development.

Get key ideas from YouTube videos. It’s free

Recent questions

  • What are the key differences between React, Vue, and Svelte?

    React organizes apps as component trees, Vue offers reactive data management, and Svelte compiles to plain JavaScript.

  • How does Angular differ from React in terms of project structure?

    Angular enforces a specific project structure, while React offers more flexibility in organizing components.

  • What are the advantages of using Vue.js for frontend development?

    Vue.js offers a simplified project structure and user-friendly CLI experience.

  • How does Svelte simplify the development process compared to other frameworks?

    Svelte compiles code to plain JavaScript without a virtual DOM, streamlining development.

  • What are the key features of Lit and Stencil frameworks for web development?

    Lit focuses on web components with TypeScript, while Stencil simplifies building components compatible with various frameworks.

Related videos

Summary

00:00

Comparing JavaScript Frameworks for Frontend Development

  • React is the most downloaded framework, Vue has the most GitHub stars, and Svelte is the most loved according to the 2021 Stack Overflow survey.
  • Choosing a JavaScript framework can be challenging, but it's crucial for frontend development.
  • To understand the trade-offs between frameworks, the video demonstrates building the same app with 10 different JavaScript frameworks.
  • The first framework used is Vanilla JavaScript to create a basic to-do app, emphasizing the manual connection between HTML and JavaScript elements.
  • Vanilla JavaScript lacks automatic data binding and state management, making complex applications challenging to build.
  • React, a popular framework, organizes applications as a tree of components, allowing for declarative UI development.
  • React's JSX syntax simplifies UI rendering and state management with hooks like useState and useEffect.
  • Angular, developed by Google, is opinionated about project structure and requires TypeScript, making it suitable for large teams.
  • Angular's powerful CLI and templating language simplify component creation and state management.
  • Vue.js, similar to Angular but more approachable, offers a simplified project structure and reactive data management with the data property.
  • Vue's CLI provides a user-friendly experience, and components are defined in .vue files with separate sections for template, script, and styles.
  • Svelte, a minimal library, compiles code into plain JavaScript without a runtime like virtual DOM, simplifying the development process.
  • Svelte components are defined in .svelte files, similar to Vue, and offer reactive state management without a virtual DOM runtime.

13:11

Comparing JavaScript Frameworks for Web Components

  • To create a component in Svelt, declare a variable with the let keyword and define a plain JavaScript function to modify the state, offering a natural and minimalistic approach similar to regular JavaScript.
  • To handle lifecycle hooks in Svelt, import the on mount function and register a callback for component initialization, utilizing a special syntax in the template for looping over arrays and handling form submissions with on submit and preventdefault.
  • Implement two-way data binding in Svelt using the bind directive with value, providing a clean and concise code structure suitable for JavaScript developers, although the smaller community size may pose challenges for support or job opportunities compared to more popular frameworks like React.
  • Lit, a Google-sponsored project, focuses on building web components using standard custom elements, offering a starter project for TypeScript development and defining components as classes with reactive data properties and methods to update state, utilizing lifecycle hooks similar to web components API.
  • Stencil, from the team behind Ionic, simplifies building web components compatible with various frameworks, defining components as classes with the component decorator, reactive data as properties, and lifecycle hooks like component will load, using JSX for templating and requiring additional event listeners for two-way data binding.
  • Solid JS, inspired by React but without the virtual DOM, compiles code to native DOM nodes for high performance, defining components as functions with reactive state using signals, and utilizing on mount hooks for lifecycle events, offering JSX for UI and simplified form value binding with ref.
  • Alpine JS, a lightweight library for adding interactivity to HTML, allows direct data storage in DOM nodes, looping over arrays with x4, handling form submissions with x on submit, and sharing data between components using alpine store, providing a minimal code approach for simple JavaScript interactivity in existing HTML pages.
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.