Need advice about which tool to choose?Ask the StackShare community!


+ 1

+ 1
Add tool

Stencil vs Svelte: What are the differences?


In this article, we will discuss the key differences between Stencil and Svelte, two popular frameworks used for building web applications.

  1. Library vs Compiler: The main difference between Stencil and Svelte lies in their approach to building web applications. Stencil is primarily a compiler that generates efficient JavaScript code, which can be used to create reusable web components. On the other hand, Svelte is more of a library that allows developers to write declarative code, which is then compiled into highly optimized JavaScript during the build process.

  2. Component-Based vs DOM-Based: Stencil focuses on building component-based architectures by providing a set of tools and APIs to create reusable web components. These components can be easily shared across different projects and frameworks. On the other hand, Svelte takes a different approach by building the entire UI as a single JavaScript file and updating the DOM directly, resulting in a more efficient rendering process.

  3. Virtual DOM vs No Virtual DOM: Stencil makes use of a virtual DOM (VDOM) to efficiently update and render web components. This allows for faster updates and better performance, especially when dealing with complex user interfaces. Svelte, on the other hand, does not use a virtual DOM. Instead, it compiles the code directly into optimized JavaScript that interacts with the real DOM, resulting in even better performance.

  4. Language Support: Stencil is primarily written in TypeScript, which provides developers with static typing and enhanced tooling for building web components. Svelte, on the other hand, is primarily written in JavaScript and supports both TypeScript and pure JavaScript, allowing developers to choose the language that best suits their needs.

  5. Build Setup: Stencil provides a comprehensive build setup out of the box, including tools for code splitting, lazy loading, and generating static HTML files. This makes it easier for developers to get started with building web components and applications. Svelte, on the other hand, requires developers to set up their own build process using tools like Rollup or Webpack, providing more flexibility but also requiring more initial setup.

  6. Community & Ecosystem: Stencil has a growing and active community with a focus on building reusable web components. It has integrations with popular frameworks like Angular, React, and Vue, allowing developers to use Stencil components in their existing projects. Svelte, on the other hand, has gained significant popularity in recent years and has a strong community of developers. It has its own ecosystem of plugins and libraries, making it easier to extend and customize the framework.

In summary, Stencil and Svelte have different approaches to building web applications. Stencil is a compiler-focused framework that enables component-based architectures, while Svelte is a library that compiles declarative code into optimized JavaScript. While both frameworks have their strengths and use cases, the choice between them depends on the specific requirements and preferences of the project.

Decisions about Stencil and Svelte
Máté Homolya
Senior developer at Self-employed · | 11 upvotes · 275.7K views

Svelte is everything a developer could ever want for flexible, scalable frontend development. I feel like React has reached a maturity level where there needs to be new syntactic sugar added (I'm looking at you, hooks!). I love how Svelte sets out to rebuild a new language to write interfaces in from the ground up.

See more
Alex Guesnon
Full-stack software engineer · | 3 upvotes · 112.4K views

Svelte 3 is exacly what I'm looking for that Vue is not made for.

It has a iterable dom just like angular but very low overhead.

This is going to be used with the application.

for old/ lite devices . ie. * android tv, * micro linux, * possibly text based web browser for ascci and/or linux framebuffer * android go devices * android One devices

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Stencil
Pros of Svelte
    Be the first to leave a pro
    • 56
    • 39
    • 34
    • 34
    • 34
      Javascript compiler (do that browsers don't have to)
    • 30
    • 28
      Near to no learning curve
    • 26
      Fast as vanilajs
    • 26
      Real Reactivity
    • 22
      All in one
    • 18
      Compiler based
    • 18
      Use existing js libraries
    • 16
    • 16
      Very easy for beginners
    • 16
    • 13
    • 12
      Ease of use
    • 12
      No runtime overhead
    • 10
      Built in store
    • 9
    • 7
      Best Developer Experience
    • 7
      Start with pure html + css
    • 6
    • 4

    Sign up to add or upvote prosMake informed product decisions

    Cons of Stencil
    Cons of Svelte
      Be the first to leave a con
      • 3
        Event Listener Overload
      • 2
        Little to no libraries
      • 2
      • 2
        Learning Curve
      • 2
        Hard to learn

      Sign up to add or upvote consMake informed product decisions

      What companies use Stencil?
      What companies use Svelte?
      See which teams inside your own company are using Stencil or Svelte.
      Sign up for StackShare EnterpriseLearn More

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Stencil?
      What tools integrate with Svelte?

      Sign up to get full access to all the tool integrationsMake informed product decisions

      What are some alternatives to Stencil and Svelte?
      Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
      Polymer is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries. Polymer is based on a set of future technologies, including Shadow DOM, Custom Elements and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Polymer evacipates, leaving only the value-adds.
      React Router
      React Router is a complete routing solution designed specifically for React.js. It painlessly synchronizes the components of your application with the URL, with first-class support for nesting, transitions, and server side rendering.
      Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
      It is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
      See all alternatives