DEV Community

Amanda Cavallaro
Amanda Cavallaro

Posted on

1

First Impressions on Svelte

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.

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️