Svelte hello world with steroids | Bruno Haetinger

Svelte hello world with steroids

August 20, 2020

What is it?

Svelte is a component framework that uses a "imperative" code that updates the DOM directly.

Performance

Svelte is extremely fast! I know that some frameworks have the called "live-reload", that is the feature where you modify the code and soon the changes will be reflected in the development server. Svelte has the same... or I would call it "live-reloaded" as it is faster than blinking your eyes hahahah.

Of course, great part of this power comes from the fact that it uses non-transpiled code and pure Javascript.

Another point is that Svelte doesn't use Virtual DOM to propagate changes, but it applies them to the real DOM. As you could see here in this article one of the problems with virtual DOM is the diff it has to do against the real DOM to check what to modify. There are more reasons described there that would argue in favor of the Svelte's performance strategy.

Ease of learning

It's is interesting to notice is that Svelte components arrange seens to be pretty natural to me. It's very close to web components. The idea is to declare your component, it's style inside and it's business logic in the same file with .svelte type. (kind of HTML + CSS + JS)

Who uses Svelte

As Svelte isn’t so popular, yet, it’s not so easy to see companies using it.As far as I found StoneCo not only use it in production in card machine as they had open positions for Svelte developers. You can find a list of companies that use it in production HERE.

Hands-on

As a first Svelte training, let’s create a super Svelte stepper to hold a number for us.

Steps:

Template clone
Clone the svelte app template: https://github.com/sveltejs/template
Hello World - See it running
Run yarn install to download the dependencies;
Run yarn dev to see the template running;
Open http://localhost:5000 in your browser;
Modify the name prop in src/main.js with any string and take another look in the browser... Voilà!
First Component
Create component
Create a new file, inside /src, called Stepper.svelte (you could copy App.svelte.

Note that there are 3 “sections”:

			<!-- JavaScript code -->
			<script></script>
			<!-- CSS code -->
			<style></style>  
			<!-- HTML (template) elements code -->
			<main></main>

Inside the