Despite these stats, however, a lot of people are hesitating to adopt Svelte as a framework in their frontend development process.
According to trends.builtwith.com, there are only about 6,000 approximate registered live and historical websites using Svelte as their preferred frontend library in total as of October 2020. This stat is super low when compared to React which has around 3.4 million, Vue at over 1.5 million, and Angular at over 3.7 million respectively.
Why developers are not switching to Svelte yet
Late TypeScript support
When coming from a framework like Angular, for example, you get pretty used to having a TypeScript development environment preconfigured for you out of the box. The Svelte team only just released an update containing official support for TypeScript in July 2020.
What this means is that developers can now run the following commands to set up TypeScript when creating a Svelte project:
npx degit sveltejs/template svelte-typescript-app cd svelte-typescript-app node scripts/setupTypeScript.js
Although TypeScript could be used beforehand, the initial setup process was rather tasking to go about because it involved a bunch of time-consuming custom Webpack and Svelte preprocess configuration. It’s a good thing Svelte now ships with TypeScript support included by default as this major missing point seemed to be one of the factors that discouraged developers from learning and using the framework. When Deno was officially released some time ago, one of its key selling points considered amongst developers was its TypeScript integration advantage over Node.
No official CRA or Svelte CLI
If you need to quickly scaffold a React application, you can easily make use of the create-react-app CLI app (given its installed globally) by simply running the
create react app myreactproject command and you would have your application scaffolding generated for you automatically.
With Vue, the process is similar, you simply have to run this command and your scaffolding is set up as long as you have the Vue CLI installed on your machine:
vue init myvueproject
Svelte however does not have an officially maintained CLI app for scaffolding projects since the
svelte/cli package was deprecated in 2018.
You need to always pull the scaffolding template from its
npx repository (which has the CLI integrated already). What this means is that each time you want to create a Svelte application you need to always run the following commands to set up a Svelte project:
npx degit sveltejs/template my-svelte-project cd my-svelte-project npm install npm run dev
Although this might seem like a small DX (developer experience) flaw, it’s definitely something that could be looked into by the Svelte team.
Compared to other major frontend development frameworks, Svelte has a very small community. You are more likely to find people to collaborate with if you make use of a popular language that has a large community. You are also more likely to find reference material and resources.
On Stack Overflow, for example, there are only about a thousand discussions (questions and answers) raised under the Svelte tag. Compared to React at 250k+, Angular at 234k+, and Vue at 64k+ respectively, a lot of work still needs to be done. The implication of this is that there is a relatively smaller chance of getting help if you are facing a problem as a developer when using Svelte.
Less package/tooling support
A lot of developers find it easier to integrate existing packages that help achieve a task faster. Because of the relatively low popularity of Svelte, there is less support from packages and utilities. If for example, you want to implement a date-picker component in React, there are hundreds of packages available on the NPM repository to choose from. With Svelte, however, you do not have that luxury as there are only a few available for developers to pick from and as a result, developers often spend time implementing these features from the ground up.
Low industry demand
It makes sense that developers would learn a tool given there is sufficient demand from employers for it. As a developer, you would want to gain knowledge of a tool if learning it would be profitable.
Why companies are not switching to Svelte yet
React is strongly backed by Facebook as it’s internal staff originally developed it, Angular’s development team is led by developers from Google who also use Vue on their careers site. Apple, for example, also uses Vue in their SwiftUI tutorials site. Svelte however is not (yet) backed noticeably by these major tech companies. I strongly believe more companies will begin to adopt Svelte if it gains backing from these. Svelte’s popularity could skyrocket should any of these companies adopt or back the framework in their infrastructure.
If a technology is around for a longer time, it is perceived to be more reliable than its counterparts as technologies tend to improve over time with respect to bug fixes, more documentation, and tutorials, improvements in language syntax and security, etc.
Because Svelte (released in 2016) is young and relatively newer than the likes of React, Vue, and Angular in the frontend framework space, it’s natural for some level of concern to exist regarding its maturity. I believe a good number of companies are skeptical of how safe it is to adopt Svelte in building their products because of its age.
Svelte is, without a doubt, a big part of the future of web development as far as its current popularity and usefulness are to be considered. As a Svelte developer myself, it would be awesome to have more companies and developers adopt Svelte and all of its beauty as their frontend web framework of choice in crafting web applications.
LogRocket: Full visibility into your web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.