DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
pontakornth
pontakornth

Posted on

What I learned from using Svelte to create basic note taking app.

The code is store on this repo
This is not production ready. It's not even linted.

I heard about Svelte that it is simple and good. So I decided to go through the tutorial and created a simple project base on knowledge I have. These are what I learned

Svelte is easy to setup.

There are official Webpack and Rollup template. However, I used community created Parcel plugin as I am more familiar with Parcel.

Single file component is easy to pickup.

I find that Svelte is easy to learn especially when you use Vue or Nuxt before. There is no need to declare a component. You can just declare a variable and used in template. This is convenient. You might still have to get used to label syntax and dollar sign for store.

Condition and loop are represented by its block so it's similar to how you write other program

<ol>
{#each pages as page (page.id)}
 <li>{page.name}</li>
{/each}
</ol>
Enter fullscreen mode Exit fullscreen mode

Svelte syntax may cause false positive error in linting.

I didn't lint the code this time but my VSCode validation report unused label and values even it's used in template. Store is used with dollar sign so it can trigger false positive on some linting program. You might want to use dedicated plugin for Svelte.

Reactivity may need additional work.

Svelte's reactivity has a problem dealing with array and object update. If you use other methods than assignment, you need to reassign variable to itself. It can lead to redundant code.

This is my first time using Svelte. There are more things I need to learn. I don't know if I am going to use Svelte in next project but this is one of the tool I considered. Thanks for reading. Feel free to comment anything.

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›