DEV Community

loading...

First Impressions on Svelte

chibichibibr profile image Amanda Cavallaro ・2 min read

According to the State of JS 2020 Svelte has the highest satisfaction and interaction ranking in 2020, so it makes sense you at least know what it is all about. The high satisfaction rate, doubled in popularity in the last years.

It is a good tool to get started if you haven't seen any other JavaScript framework or libraries before. It reminds me of a mix of HTML, AngularJS, CoffeeScript and React. It is just like JavaScript but some things have magical special meanings. It's componentized and it has a built in store system.

I've pair programmed with taw to create a typing & hangbot games to have a go at the syntax and overall experience. Some notes below:

  • $: dollar label do this whenever something changes
  • Looping {#each text as letter, i}
  • Writing something along of the lines of export let variable-name; is ok!
  • Directives are kinda ugly but they serve their purposes
  • When working with vs code auto formatting with prettier did not work well as it would adds spaces that impacted the HTML
  • Another curiosity I had was how to deal with global styling or component-scoped styling
  • The use of # : /

If you'd like to get started, the website svelte.dev has a pretty decent visual tutorial with code you can edit and see the changes live

Screenshoot of https://svelte.dev/tutorial/basics

As mentioned previously, I've pair programmed with Tomasz Wegrzanowski and we've created "Hangbot". It was interesting to have hands-on experience on how it feels to code in Svelte.
pair programming

Here's the github project for hangbot, go ahead and share you own projects and thoughts on svelte too.

Find me on twitter @amdcavallaro.

Discussion (0)

Forem Open with the Forem app