The typical Javascript frameworks love playing the middleman. They continue playing that role at development and at run time. Svelte is not your typical middleman - instead the framework lays out the path during build, and completely hands over to standard Javascript at runtime.

If that does not pick your interest - I don’t know what will 😜.

This is the dev cycle cycle for a typical framework -

1. Create your application using a template provided by framework
2. Create application using the excellent toolset provided by framework. The development is almost magical - use components for max reuse, and test/debug your code easily and quickly
3. Package everything without fuss. The build scripts will include a lot of framework code + your own code
4. Deploy build to your web server and reach nirvana

While frameworks do an excellent job of running applications, they sit on top of Javascript and web standards to deliver that experience.

On the other end of spectrum are applications supported by fanatical purists. They denounce frameworks, abhor any and all additional code, and build using vanilla Javascript. I suspect they sometimes fall back on Assembly, but I can neither confirm nor deny that.

The big question on anyone’s mind is not that big afterall - “is there a middle ground”?

Svelte is that, and much, much, much more.

Svelte

Svelte helps you create next-gen applications, but smartly vacates the stage at runtime. It provides the tools to build components, compiles your code to plain Javascript + HTML, and let the standard platform do its thing. There is no svelte component running in production masterminding the whole setup.

Svelte also does not have any virtual DOM. You see React, Vue and friends followed this innovative model to optimize DOM updates. Your UI looks cool and does not refresh itself a 100 times since -

• frameworks do the hard work of keeping track of all components of a UI seen by a user
• they also track user-initiated or system-initiated changes, find out what components changed, do a diff between what user sees and what elements of UI should get updated
• finally, sequence updates from the virtual DOM to the actual DOM within browser so that user see the UI updates

Svelte skips the virtual DOM. The Javascript it generates directly go for DOM updates, but does that smartly so that you still see the modern UI experience as with any framework, but with no virtual DOM.

There are arguments on whether virtual DOM or direct DOM updates are better. I am a simple man. I don’t claim to have knowledge about which is better and how. What I do see is both sides of the argument and believe both have their strong points. I also strongly believe both virtual DOM and actual DOM updates have their place in the web. I use them both until one (or both) of them emerges a clear winner.

So then, back to Svelte.

Why Svelte?

You have to use Svelte because -

• Svelte’s model allows you to have the full power of framework at development. This is much much better than having to work with vanilla Javascript (yes, even with plugins et. al.)
• Since there is no framework at runtime, Svelte produces minimal code for runtime. The order of reduction can be as much as 10x depending on what you are set out to achieve
• For simpler tasks (i.e., tasks that I need in my production app), Svelte appears to be faster than regular frameworks. I have not built production grade applications on Svelte and cannot confirm that in a large application, but there are arguments that support or deny that the execution speed is faster than its virtual DOM compadres

Start with Svelte

The process for getting started is the same as in any other Javascript framework.

Optionally install ‘degit’, the CLI for Svelte.

1

npm i -g degit

Create your first Svelte application.

1
2
3

degit sveltejs/template hello-world
cd hello-world
npm i

Open the project folder in VS Code.

1

code .

Run application.

1

npm run dev

Did you see just how light and how fast is Svelte?

When I previously mentioned that I was not in best position to give out opinions on speed across frameworks (as of this day) is precisely because how fast the whole experience is. The setup, and subsequent build is super fast.

You will see that the project folder has a src folder, which is the folder that will contain all our code. src in turn has two files -

App.svelte

This is the main Svelte component. It has a <script> tag, <style> tag and one line of html to say “hello” + prop.

App.svelte feels just like a Vue single file component. Except that you don’t need a <template> but introduce the HTML (+ framework-specific components) directly in the file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script>
  export let name;
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

Prop is for a component what arguments are for a function. In our case, you can keep prop generic and say ‘hello’ to whatever gets passed to component. The export statement specifies the prop - which is called name.

{name}! is the syntax that Svelte uses to refer to the variables within HTML. This is similar to {{ variable }} in other templating languages. name gets substituted with the actual value at runtime.

main.js

This file is the entry point for the app. It calls (creates new instance of) App.svelte with a prop. The prop name is name and value is ‘world’ and renders that in the HTML body.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "world"
  }
});

export default app;

You will see a rollup.config.js, which is the configuration file for ‘rollup’ - a packager (bundler) of apps just like Webpack. In the rollup.config.js file you can see that main.js is specified as input. main.js is called by the application, which in turn calls App.svelte. (if you want to nitpick: main.js is incl. within bundle.js at runtime. bundle.js gets called by public.html).

The result -

If you visit http://localhost:5000, you will see this beautiful site -

Up next: Create a Todo app in Svelte

Did I catch you wondering what more we can do here to demonstrate the power of Svelte? How about creating a universal Todo app using Svelte using GraphQL for effect - let’s call it Svedo!

You will find all about it next - create a to do application using Svelte and GraphQL.