Me and Svelte

Svelte is a rendering library which is an alternative to React, Angular and Vue, the big three in rendering frameworks for front-end at this moment. Svelte approach somehow is different, it tries to do jobs as much as possible in build step so theoretical when running the svelte app should be lightweight.

I myself knew Svelte about 3 years ago but I did not try it too much at that time. In recent months Svelte became my new favorite choice beside NextJs when I choose stack to work with.

Here are 5 things that I prefer in Svelte than in React

1. ** less boilerplate cod**e. so you do not need to repeatedly import base things like in React import React from 'react'. This is not so true with the current Create React App Typescript :) but I still prefer Svelte in this term.
2. state handling is easy, javascript friendly. So instead of using useState hooks or setState to update state, sveltes state is quite easy to use with let variable. Svelte also has concept of context which is similar idea as React also.
3. style integration by default, so when using React I usually use styled-components or emotion for styling in svelte styles by default are modularised by component so it just works.
4. adding style class in svelte is also smoother, so instead of rendering like className={baseStyle ${customStyle}} in svelte we can use class="baseStyle {customStyle}"
5. slot concept in svelte is cleaner than renderFunction or component props. so in svelte when working with a layout component you can define a named slot <slot name="demo"></slot> and in the host components you can just define <Layout><div slot="demo">demo</div></Layout>. Comparing with <Layout renderDemo={() => <div>demo</div>} />