What’s Svelte?

Tram Ho

After working with React and Vue, I personally prefer Vue. Although React’s library is more, Vue’s flow is much more streamlined than React. So what about Svelte , is the code and flow neater? Let’s find out together

First, here is a classic code example showing Svelte’s neatness compared to Vue and React

Suppose we have a problem: Sum 2 numbers a and b

  • Input: a, b
  • Output: Sum of a and b

Here is the code with React

And this is with Vue

and with Svelte , that’s all we need

It seems pretty neat, but let’s not jump to a conclusion, given the fact that most of our apps will build Fronend (FE) and Backend (BE) separately. Vue, React or Svelte are also mostly FE support, and with code like this, there’s nothing to say, as most of the logic will be handled on the BA side.

Now let’s go deeper, and we will learn some systax for more analysis

1. Props

Similar to React, but Svelte’s declaration of props is very simple

2. Logic

If-else

For example:

Loop

Wait Block

Regarding systax logic, the wait block is the best part. Similar to try-catch structure. Wait Block allows us to build the logic that handles a promise. This is essential when FE interacts with the BA side.

In fact, code like this seems a bit wordy compared to systax draw gon 😕 huh?

3. Event

DOM Events

Svelte uses keyword on , systax

Supported modifiers include:

  • preventDefault – calls event.preventDefault () before running the handler. Useful for client-side form handling, for example.
  • stopPropagation – calls event.stopPropagation (), preventing the event reaching the next element
  • passive – scrolling performance on touch / wheel events (Svelte will add it automatically where it’s safe to do so)
  • nonpassive – explicitly set passive: false
  • capture – fires the handler during the capture phase instead of the bubbling phase ()
  • once – remove the handler after the first time it runs
  • self – only trigger handler if event.target is the element itself

For example:

This is similar to Vue

Event forwarding

If Vue supports $emit , Svelte supports event forwarding.

Below is an example where we can define a dispatch event and call it using systax on:event_name

4. Binding

Instead of using :binding_name= shortened like Vue, here we have syntax bind:binding_name

It is syntactically similar to Vue, but Svelte has no support for shortened syntax.

5. Lifecycle

Svelte supports several functions for lifecycle such as:

  • onMount: run after the first component is rendered
  • onDestroy: runs when the component is destroyed
  • beforeUpdate: runs before DOM updated.
  • afterUpdate: runs after the DOM has been updated (it is part of the beforeUpdate).

onMount

This is one of the most commonly used functions of Svelte. Similar to React’s useEffect or mounted on Vue.

This one looks more like React, with Vue you don’t need to import anything

onDestroy

Similar destroyed by Vue

beforeUpdate and afterUpdate

Unlike Vue, divided into beforeMount, beforeUpdate and updated, Svelte only has beforeUpdate and afterUpdate.

the beforeUpdate is executed just before the DOM is updated. afterUpdate is the opposite, it is used to run once when the DOM has synchronized data.

6. Store

writable

Then, for use, we import them into svelte files.

This is essentially the syntax of declaring function js shared and this is not really a state, or a mutation like Vue. I think this is a mutation, but Svelte also has a readable that allows changing data export.

readable

Another syntax allows you to declare a function.

derived

The derived is the export data

7. Component Action

As you can see, Svelte’s action is declared with syntax

Svelte’s store is not as clear and coherent as the flow of Nuxt or Redux Saga, but rather on pure js. It is easy to understand because Svelte renders code optimally to pure js and doesn’t use virtual DOM.

8. Component composition

slots

Similar slots in Vue

slot fallbacks – <em>

The <em> tag allows you to insert the default child element for the slot.

9. Special elements

One difference of Svelte is that some of the elements are quite special like:

  • <svelte:self>
  • <svelte:component>
  • <svelte:window>
  • <svelte:body>
  • <svelte:head>
  • <svelte:options>

<svelte:self> Instead of writing

you can change to

<svelte:component>

You can see, instead of having to check the selected component that is

then you just need to use <svelte:component> .

<svelte:window>

This element allows you to add some events to the window such as:

  • innerWidth
  • innerHeight
  • outerWidth
  • outerHeight
  • scrollX
  • scrollY
  • online – an alias for window.navigator.onLine

For example

<svelte:body>

Similar to <svelte:window> , <svelte:body> allows you to set listen events for documment.body

<svelte:head>

This element allows you to insert elements into <head>

<svelte:options>

Similar to Vue and React, Svelte lets you declare off options instead

you can write that

Through the parts I learned about Svelte in the tutorial, it seems that Svelte is fine, quite similar to Vue.

Plus mark:

  • Neat code
  • Performance is guaranteed to be high by running at build time and converting components into optimal command code that updates the DOM more quickly.
  • Suitable for pre-learning Vue and React because its syntax is short and relatively easy to understand.

Minus point:

  • Flow Store is not tight and clear
  • Little support library

References: https://svelte.dev/tutorial

Share the news now

Source : Viblo