Fayez
Nazzal

Svelte: Is it the Game Changer We Were Looking For?

  • Software Development
  • svelte
  • sveltekit
  • Technology Trends
  • Problem Solving

Published on | Last updated:

Svelte is a compact Frontend framework and UI definition language for crafting user interfaces for the web. It was created by Rich Harris in 2016, and it was increasing in popularity since then, especially in the last few years when developers have begun noticing React’s drawbacks. It even got its own rockstar meta-framework: SvelteKit, the Svelte counterpart to React’s Next.js. And now both are endorsed by the same company, Vercel.

Svelte’s meta-framework, SvelteKit, reached its stable 1.0 release last year, and it offers a set of powerful features like mixed rendering patterns, nested layouts, server actions, and progressive enhancements, along with other useful features that contribute to a better user experience. According to Rich Harris - the creator of Svelte and SvelteKit, the team will now direct their attention to Svelte itself. So too, this article will focus on the impact and potential of Svelte in the web industry.

Since the beginning of the web era, it became well known to folks that, to build a website, they use the three couples HTML, CSS, and JavaScript. Even people who want to dive into the web world start their journey by learning those technologies, which is an excellent starting point. However, building highly interactive and visually appealing interfaces by only using those base technologies is challenging and often difficult to maintain. Developer teams have always been hardworking to simplify the web, which leads to the adoption of JQuery, and, subsequently, the most-popular library for building user interfaces - React.

The general paradigm is that JavaScript is event-driven. It reacts to events like user interaction, network calls, timers, and more. While UI is state-driven, it reflects the current state of the application or user interactions, This inconsistency led to unnecessary complexities, which is why the primary focus of React is to make JacaScript more state-driven. This is what has made it the most popular Frontend UI library, React changed how we build applications for the web, in a good way. ****

The internal concept behind React is to abstract the DOM away for the users and use a Virtual DOM to detect changes in the UI, detect changes in the component state and update the UI accordingly, but this also leads to other drawbacks, having a virtual DOM is another layer of complexity, it often leads to unnecessary renders, and having tools like useMemo and useCallback is also an additional concern, adding complexity and leading to buggy UI, and those were invented to address the problem of unnecessary renders, which is React’s problem, not us.

When Svelte came out, its primary goal was to show developers that we achieve the same with less complexity, and without additional costs like having the VirtualDom. Svelte is also event-driven, but unlike React, it works by augmenting HTML with JavaScript using DSLs - or magic!

Svelte adds a compile step so that we are only deploying HTML, CSS, and JavaScript in the end, which is a big advantage over React. The end result of deploying a Svelte app is that the website is mereley as the browser expects, without any unnecessary work and overhead.

The state-driven nature of Svelte is accomplished by making state assignments Reactive. Updates in the state reflect updates in the UI in the exact place where it’s needed, without any unnecessary work. The ultimate result is a front-end framework that has two impressive qualities: high performance and simplicity.

That seems it’s exactly what the web was intended to be, and it is. Svelte is a versatile choice for building modern websites, but it’s a bit late - React has become the go-to option and the frontend choice to lead the web, it already established itself being the go-to choice for most web apps. React now leads the game having it’s own large community and the trust of many prominent companies to use it in their production web applications.

Here is a tweet from @steventey which has a subset of what React is used for:

So if you are learning web development and you want to pick your first UI library, or you are looking to start a new web app business, picking React is a great safe option, especially with modern meta frameworks like Next.js and Remix.

Otherwise, if you are just starting with the web or are building your own personal website, I highly recommend picking Svelte, it’s closer to HTML and is much simpler and enjoyable to use for this kind of project. I had a great experience using SvelteKit for building my personal website.

If you have an existing project using React or other tools, don’t feel behind the track, your framework is fine and there is no need to switch for most cases. A good reason to learn or use technologies like Svelte is for experimenting or obtaining new perspectives, and if you find that it was a great handy experience, don’t be afraid to pick it for larger projects, in the end, Vercel bets on Svelte the same way as it bets on React.

Fayez
Nazzal
© 2023 Fayez Nazzal. All rights reserved.
Social Links:
fayez@fayez.io