• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
  • Partners
  • For Companies
Home » Frontend » JavaScript » Svelte: Why Is It an Innovation to Javascript Frameworks?
JavaScript

Svelte: Why Is It an Innovation to Javascript Frameworks?

If you are a cutting-edge Javascript developer and have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands when it comes to building SPAs and web applications.

May 19, 2022 by Riccardo Degni

svelte, javascript frameworks, vue.js, angular
Table Of Contents
  1. The need for Svelte: how Svelte differs from common front-end frameworks
    • 1- A library? You mean a compiler, right?
    • 2- A real “reactivity” mechanism within the language
    • 3- Upstanding development experience and growing ecosystem

There are always a lot of choices in the dev world, especially when establishing a production environment, and Javascript frameworks are no exception. And now there’s a new kid on the block: Svelte.


We all know React, Vue, and Angular and how good they are for modern web development, but Svelte – a new challenger in this field – may not be familiar to everyone.

All the development tools available on today’s market are high-quality tools, and sometimes the choice to use one tool over another is more a matter of personal taste and passion than the result of an objective “this is better than that” assessment. However, Svelte’s potential is very impressive, leading some users to switch systems for previous projects written in React and Vue. Svelte is a top choice for developing SPAs and web projects; here are three fundamental features that explain why:

The need for Svelte: how Svelte differs from common front-end frameworks

If Svelte were simply an alternative to the big three libraries, it probably would have been short-lived. The genius of Svelte lies primarily in its innovation – let’s take a closer look at what this means in practice.

1- A library? You mean a compiler, right?

Although Svelte is officially defined as a ‘component framework’, the words ‘library’ and ‘framework’ are perhaps not the most accurate terms to use in this context. Rather, Svelte is a true compiler that takes a combination of enhanced Javascript+CSS+HTML code input and outputs native code, which in turn interacts with the Document Object Model (DOM) without intermediaries.

In a common Javascript framework context, developers build declarative state-driven code. In this strategy, the browser must handle conversions of this declarative code into DOM structure and actions. A common technique used to achieve this is the Virtual DOM. This behaves like a layer between the declarative code and the browser production. When the ‘reactive’ data changes state, the engine makes a comparison between the newly updated Virtual DOM and the real DOM in the browser to determine which data has changed. It then updates only these necessary parts of the onscreen UI.

Of course, this ‘diffing’ technique within the Virtual DOM is brilliant, but the browser still has to take additional steps to update the final DOM, a process that can tax the garbage collector and rankle the frame budget. Svelte, on the other hand, is a compiler that already knows at build-time how things might change in an app, rather than waiting to do the work at run-time. Here, the tool converts Svelte files/components into highly efficient imperative code (highly optimised vanilla JavaScript) that surgically updates the DOM without the need for diffing techniques. The outcome is blazing fast results with an excellent improvement in overall performance.

2- A real “reactivity” mechanism within the language

Although all major Javascript frameworks can be considered ‘responsive’, since they have the ability to automatically update the DOM when part of the app is updated, this mechanism depends on a specific API that the developer must use to notify the system of changes. For example, notifying the app to update the DOM by changing its state in React demands the use of a specific API (the setState method in class-based components and set hooks in functional components).

5 JavaScript Frameworks to Follow in 2022


Even in Vue, which may feel more reactive because the state is updated directly using the properties’ names, in reality this process involves calling a setter in the background, generated and controlled by the library. Without using this API, the framework cannot update the Virtual DOM and consequently the final page. The approach taken by Svelte, as a compiler, is to execute the code in topological order, rather than top-down. The Svelte compiler generates a sort of dependency graph in which a variable’s value will be updated when one of its dependencies updates, reacting to its own data changes.

Every time an assignment to a variable occurs, the compiler will explicitly compute the dependencies and update the real DOM – as a compiler, Svelte can compute the dependencies in the build-time. This brings true reactivity into a core part of the Javascript language rather than depending on a particular external technique or API.


Here’s a very simple comparison between state updating in a React class component, Vue component and finally, a Svelte file:

// React state with class component

class Counter extends React.Component { constructor(props) { super(props); this.state = {counter: 0}; } updateCounter() { this.setState(({ counter }) => ({ counter: counter + 1 })); } render() { return ( <div> The counter is: {this.state.counter} <button onClick={this.updateCounter}>Increase</button> </div> ); } }
Code language: JavaScript (javascript)

// Vue state

export default { data () { return { counter: 0 } }, methods: { updateCounter () { this.counter += 1 } } }
Code language: JavaScript (javascript)

// Svelte state

let counter = 0 counter++
Code language: JavaScript (javascript)

What is clear is that Svelte controls reactivity directly into vanilla Javascript statements thanks to its internal mechanism and compilation. No API, method, or mechanism is needed to trigger reactivity, but instead a value is assigned to a variable using the assignment operator (=).  Using the REPL environment provided on the Svelte website (https://svelte.dev/repl) displays not only the final output of a Svelte code but the compiled version of the code as well. The Svelte compiler will produce something like:

counter += 1; $$invalidate('counter', counter)

in which the call to $$invalidate reports the state variable as changed/updated and checks (in the previously mentioned topographic manner) the dependency graph before surgically updating the DOM – that is, the page in the browser. As stated by Rich Harris, the creator of Svelte: “Svelte 3.0 moves reactivity out of the component API and into the language”.

3- Upstanding development experience and growing ecosystem

Apart from being super-fast and offering excellent performance, code in Svelte is significantly smaller when compared to that of React or Vue. In Svelte, abstraction isn’t necessary: plain Javascript is all that’s required, which is, at the end of the day, leaner, cleaner, and more compact. Apart from performance and benchmarking considerations, fans of Vanilla Javascript will really appreciate this feature because it gives the feeling of writing an enhanced version of a Javascript code rather than using a framework.

Furthermore, in addition to the quality of the code and the development experience, another very important factor in choosing a development tool is its ecosystem: the size and activity of the community, the production of bug fixes and new versions, the presence of tools that can assist in the production of code.

A Quick Guide to NextJS

Obviously Svelte does not enjoy the same qualities as React, Vue, and Angular in this respect, as it is significantly younger, and does not currently enjoy the support of a top brand. However, the Svelte ecosystem still features an active community, and is supported by two high-quality tools: SvelteKit and Svelte Native. SvelteKit is the counterpart of Next.js for React and Nuxt.js for Vue: a full-stack framework that exploits the potential of Svelte to produce SPAs and complete web applications in a server-side Javascript model. Svelte Native is a new approach to building mobile applications using NativeScript.

Here, unlike some other mobile development frameworks which do the bulk of their work on the mobile device, Svelte Native shifts that work into a compile step that takes place when building the app. Svelte Native offers the same mechanism highlighted previously; instead of using techniques like virtual DOM diffing, Svelte Native code surgically updates the native view widgets when the state of the app changes.

These are just a few features that make Svelte and its related tools amazing. Their presence will also help in further improving more popular tools such as React and Vue.

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Frameworks Web Developer

How to Deploy a Subnet on Avalanche Blockchain: The Case of DeFi Kingdom
Previous Post
Using the Twelve-Factor Methodology in Cloud-Native Microservices
Next Post

Related articles

  • Pro Tips For Web Designers Who Want to Create Better Web Experiences
  • 5 JavaScript Frameworks to Follow in 2022
  • Creating a Catalogue with StencilJS
  • How to Boost Performance With Lazy Loading
  • A Quick Guide to NextJS
  • Video: Let’s Build a Modern React Application
  • How-to Guide: Adding VueJS to Your Existing Project
  • JavaScript: A First Look at the Type Annotation Proposal
  • 6 Ways to Implement Metaprogramming in JavaScript with Proxies
  • Increase Your Speed and Efficiency With These 20 Incredible JavaScript Tips and Tricks

Primary Sidebar

Learn new skills for 2023 with our Edu Paths!

Codemotion Edu Paths for 2023

Codemotion Talent · Remote Jobs

Game Server Developer

Whatwapp
Full remote · TypeScript · Kubernetes · SQL

Back-end Developer

Insoore
Full remote · C# · .NET · .NET-Core · Kubernetes · Agile/Scrum

Full Stack Developer

OverIT
Full remote · AngularJS · Hibernate · Oracle-Database · PostgreSQL · ReactJS

Data Engineer

ENGINEERING
Full remote · Amazon-Web-Services · Google-Cloud-Platform · Hadoop · Scala · SQL · Apache-Spark

Latest Articles

Will Low-Code Take Over the World in 2023?

Frontend

Pattern recognition, machine learning, AI algorithm

Pattern Recognition 101: How to Configure Your AI Algorithm With Regular Rules, Events, and Conditions

AI/ML

automotive software

Automotive Software Development: Can Agile and ASPICE Coexist?

DevOps

programming languages, 2023

Which Programming Languages Will Rule 2023?

Infographics

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a Contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN