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>

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.