Getting started with Svelte

Hey everyone!

I recently started using Svelte and it's quite amazing. The good part about Svelte is that it is a compiler and has no additional framework dependencies. The only dependencies are the devDependencies, that's it. Hence, the result is a light-weight performant app with a significantly smaller bundle size (thanks to those rollup plugins). Moreover, Svelte ensures that everything happens during the compile or the build time rather than on the browser at runtime.

Here’s how the package.json file of a brand new Svelte app looks like,

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

Creating Svelte apps involves writing less code which is what most developers prefer these days. Svelte doesn't use a virtual DOM unlike other frameworks like React or Vue. If you are not a huge fan of JSX then perhaps Svelte is the ideal framework as it provides a proper demarcation of the HTML, JavaScript and CSS code. Let's understand this with the following example.

Create a new Svelte app

npx degit sveltejs/template hello-world

Now, open the App.svelte file and let’s write less code 😄

<script>
	export let count = 0;
  	const increment = () => {
    	count += 1
  	}
</script>

Here, using a HTML-like syntax we simply tell our component we want a count prop by exporting a mutable variable called count and then Svelte handles the rest. All the developer needs to do is to bind it to the appropriate HTML tag.

<button on:click={increment}>
    Clicks: {count}
</button>

and the result would end up looking something like this:

In addition, one can also specify CSS styles as follows:

<style>
 button {
    font-family: inherit;
    font-size: inherit;
    padding: 1em 2em;
    color: #ff3e00;
    background-color: rgba(255, 62, 0, 0.1);
    border-radius: 2em;
    border: 2px solid rgba(255, 62, 0, 0);
    outline: none;
    width: 200px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }

  button:focus {
    border: 2px solid #ff3e00;
  }

  button:active {
    background-color: rgba(255, 62, 0, 0.2);
  }
</style>

This was a very basic example of a Svelte app. However, one can do complex stuff as well. Please do read the official docs for the latest API documentation. Svelte is definitely here to stay and it would be great to use it while developing Production-level apps.

Stay tuned for more!

If you have happened to use Svelte recently too, please feel free to post your comments below 😄