Sometimes we want to learn something, just for fun or to build new side projects. I heard about Svelte in 2016, but never tried it until a few months ago with Bezael to create a small microfrontend. However, yesterday I started to build a small side project for my sister and I fell in love with how easy and fun Svelte is.
Svelte is like back to 90 when you write your apps with "HTML, CSS, JavaScript," but utilizing concepts similar to React, Angular, or Vue but with some appealing distinctions. Its require a but requires a compilation process.
Perhaps you're wondering why compilation is necessary if you're using the platform, but we do the same with Angular by using TypeScript to access features not supported by browsers. While we can write native JavaScript, with Svelte, we must compile it to work effectively.
Why No Virtual DOM
One surprise for me was that Svelte does not rely on the virtual DOM, like React. I know the VDOM is a great way to interact with the DOM, preventing unnecessary modifications by comparing the original DOM with the in-memory snapshot.
The Virtual DOM has a cost - "the diffing" - which is the process of comparing the differences identified by the Virtual DOM. As the size of the app increases, so does this cost increases with the size of the app.
Svelte uses a compiler to wrap state changes, methods, and properties, allowing for fine-grained updates in the DOM.
Why Svelte Is Fun?
Svelte is simple and utilizes the SFC (Single File Component), which means we use a single file for HTML, CSS, and JavaScript without the need for decorators or custom properties, making it similar to the web.
You can reproduce the same example using the svelte repl or playground
<script> let title = "hashnode" </script><h1>Hello from {title}</h1>
so easy, and less boilerplate check the following code:
https://svelte.dev/repl/dc2de6e8c609485b98c69ac7fb0cac50?version=4.2.2
As you know I work with Angular, feel free to compare the boilerplate with Angular 16 and Svelte, for example:
import 'zone.js/dist/zone';import { Component } from '@angular/core';import { CommonModule } from '@angular/common';import { bootstrapApplication } from '@angular/platform-browser';@Component({ selector: 'my-app', standalone: true, imports: [CommonModule], template: ` <h1>Hello from {{ name }}!</h1> `,})export class App { name = 'hashnode';}bootstrapApplication(App);
Add color and styles using the tag (yes, like HTML)<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script> let name = 'hashnode!';</script><style> section { color: white; background-color: red; padding: 1rem; text-align: center }</style><section><h1>Hello from {name}!</h1> </section> </code></pre></div> <p></p> <h2> <a name="reactivity-and-optimization" href="#reactivity-and-optimization" class="anchor"> </a> Reactivity and Optimization </h2> <p>The Svelte compiler goes one step further than TypeScript or Babel with its transformations, as it also optimizes the code, removing dead code and identifying the variables used as states to invalidate them and update the DOM.</p> <blockquote> <p>The Svelte team released a new reactivity feature; feel free to read more about it.</p> <p><a href="https://svelte.dev/blog/runes">https://svelte.dev/blog/runes</a></p> </blockquote> <p>Compare the final code in each stack:</p> <ul> <li><p>Angular Example code: <a href="https://stackblitz.com/edit/stackblitz-starters-clsaav?file=src%2Fmain.ts">https://stackblitz.com/edit/stackblitz-starters-clsaav?file=src%2Fmain.ts</a></p></li> <li><p>Svelte example: <a href="https://svelte.dev/repl/6fa35f25caa4454694f9091d3507b85e?version=4.2.2">https://svelte.dev/repl/6fa35f25caa4454694f9091d3507b85e?version=4.2.2</a></p></li> </ul> <h2> <a name="child-components" href="#child-components" class="anchor"> </a> Child Components </h2> <p>We want to create a new component <code>tag</code>, and I will do the same in Angular and Svelte:</p> <h4> <a name="tag-component-angular" href="#tag-component-angular" class="anchor"> </a> Tag Component Angular </h4> <p>Create a new component tag, with a property label to customize in Angular, we need to use the following:</p> <ul> <li><p>Use the <code>@Component</code> decorator</p></li> <li><p>export the Tag <code>class</code></p></li> <li><p>use <code>@Input</code> decorator to allow getting public properties.<br> </p></li> </ul> <div class="highlight"><pre class="highlight plaintext"><code>import { Component, Input, OnInit } from '@angular/core';@Component({ standalone: true, selector: 'app-tag', template: ` <span> {{ label }}</span> `, styles: [` span { background-color: black; color: white; border-radius: 0.5rem; padding: 0.2rem;} `,],})export class TagComponent { @Input() label = '.net';} </code></pre></div> <p></p> <p>Because we use standalone, we need to import it in the <code>imports</code> section.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>import { TagComponent } from './tag/tag.component';@Component({ selector: 'my-app', standalone: true, imports: [CommonModule, TagComponent], template: ` <section> <h1>Hello from {{name}}!</h1> <button (click)="change()">change</button> <app-tag label='svelte'/> </section> `, styles: [` section { color: white; background-color: red; padding: 1rem; text-align: center } `,],}) </code></pre></div> <p></p> <p>Final Angular code:</p> <blockquote> <p>Final Code Svelte : <a href="https://stackblitz.com/edit/stackblitz-starters-clsaav?file=src%2Fmain.ts,src%2Ftag%2Ftag.component.ts">https://stackblitz.com/edit/stackblitz-starters-clsaav?file=src%2Fmain.ts,src%2Ftag%2Ftag.component.ts</a></p> </blockquote> <h4> <a name="svelte-tag-component" href="#svelte-tag-component" class="anchor"> </a> Svelte Tag Component. </h4> <p>Create the component, with the script tag export the label property, and use it in the template.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script> export let label = 'Svelte';</script><style>span { background-color: black; color: white; border-radius: 0.5rem; padding: 0.5rem;}</style><span> {label}</span> </code></pre></div> <p></p> <p>Import in the app.svelte component<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script>import Tag from './tag.svelte'; let name = 'hashnode!'; const change = () => { name = 'Hello world' }</script><style> section { color: white; background-color: red; padding: 1rem; text-align: center }</style><section><h1>Hello from {name}!</h1> <button on:click={change}>Change</button><Tag label="I love Svelte"></Tag></section> </code></pre></div> <p></p> <p>Another nice feature in Svelte is spread props, which makes it easy to bind multiple properties. For example, we have label and tag props:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script> export let label = 'Svelte'; export let tag = 'Svelte Framework'</script><style>....</style><h2>{label}</h2><span > {tag}</span> </code></pre></div> <p></p> <p>We can bind both properties easily:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script>import Tag from './tag.svelte'; let name = 'hashnode!'; const tagConfig = { label: 'I love', tag: 'Svelte' }</script><style>...</style><Tag {...tagConfig}></Tag> </code></pre></div> <p></p> <p>We pass all properties from tagConfig to the Tag component.</p> <blockquote> <p>Final code Svelte <a href="https://svelte.dev/repl/6fa35f25caa4454694f9091d3507b85e?version=4.2.2">https://svelte.dev/repl/6fa35f25caa4454694f9091d3507b85e?version=4.2.2</a></p> </blockquote> <p>It's just the beginning of basic stuff about Svelte and how easy it is to code and build apps with it.</p> <h2> <a name="recap" href="#recap" class="anchor"> </a> Recap </h2> <p>I'm an Angular Fan, but Svelte simplifies the development, we don't need to learn about decorators or too much boilerplate. Svelte requires a compilation process, but the advantage it does not use a virtual DOM, allowing for fine-grained updates in the DOM.</p> <p>Svelte offers easy component creation, reactivity, and optimization, as well as features like spread props for binding multiple properties. With less boilerplate and a clear separation between render and behavior.</p> <p>The bad part about Svelte is the market, of course, I hear about some companies using Svelte but most of them are startups or small companies, If you compare it with the market of Angular or React, I recommend taking a bit of time to read and play with it for your side-project.</p> <blockquote> <p><a href="https://svelte.dev/">https://svelte.dev/</a> Official website</p> </blockquote>
Top comments (0)