The Svelte Jolt

June 12, 2023 The Editorial Board - Teamware Solutions

A framework

Svelte is just a framework. It accelerates you to build a web app. Which is the one primary task that a
framework must fulfil. We are not going to start a war by comparing and passing awards on the best
framework or so here. We rather take the principle and analyse the reasons that drove the unit to build
this framework. One of the best approaches to understanding the principles that drove the framework
builders to build a new front-end framework is from the tagline. Put succinctly it serves the primary
purpose of recall, of the principle. Here is a compilation of the popular frameworks –
Framework Tagline

Angular The modern web developer's platform

React A javascript library for building user interfaces

Vue The progressive javascript framework

Gatsby Start building amazing web experiences

Svelte Cybernetically enhanced web apps

Though we go around bucketing all of them as frameworks, they do not identify themselves at least from
the principles with which they are built. The only one which claims to be the framework principally is Vue.
We have a couple of them with principles oriented in the dimension of result i.e., the product of using the
framework. Svelte is one of them who blends the end product and adds an attribute to it as well –
Cybernetically.
As we said earlier, the principles do reflect the tagline. Cybernetically is used to reflect the emotion of
augmenting developers' thoughts in writing code. Please do not stretch your imagination. We are not talking
about GitHub CoPilot or equivalent. We are talking about augmenting as more rule and syntax based. The
verb "enhanced" cements the principle further by ruling out such imagination. It is not generative but
enhances the developer's code to deliver web apps.

Principle
As a developer, the principle is easy to state –
Leverage language features instead of taxing the client's browser.

Leveraging language features often lead to non-uniformity in developed code. Also, creates barriers for
young developers to be effective. Svelte thus principally is working to balance the complexity of code
associated with "leverage language features" and the value of the feature delivered.
Anatomy
Structure
Svelte has the concept of components which have the javascript, style and markup all in a single with
the extension "svelte". This could be counter to pop culture these days. Practically it hinders the
smooth operation of the development assembly line. You have a designer who cuts the jpg files or in
some places cuts the HTML, and style files. Next developers add their magic code to make it a product
of value – A web app. Now if you give a framework that has everything in one file it leads to
inefficiencies and secondary challenges such as merge conflicts etc.
The question that surfaces are Does Svelte solves a problem or introduce one? We answer
conservatively that it does solve. You can hammer your way through it by conventional style where a
developer picks the HTML and breaks it into multiple files per the templating and programming
language needs. In the modern world, you could have a full-stack developer who can do all this by
shrinking the assembly line to one specialized person operating at maximum efficiency with no hops
and skill mismatch.
Wait, we took a detour let us stay focused on the anatomy. Let us circle back with an example from the
Svelte starter pack. Provided you have the latest version of node you could pull the starter pack by

npm create svelte@latest starter-app
cd ./starter-app
npm install

There will be a couple of prompts use the default and proceed. Once you have this you will have the svelte
components and configuration etc.
Runtime
The starter pack has enough to analyse for the curious ones. Issue the following command
npm run dev

You will notice on the command prompt that you have a website running on the localhost:5173. Navigate to
it and you should be greeted with an amazing-looking Svelte web page. Now open the Developer toolbar
and switch to the network tab and refresh the page for it to capture the traffic. You must notice that there is
no single request to say index.html, or app.html or something like that. Remember we told you that svelte
files are all in one with the HTML, javascript and styling in a single file. The case is curious and let us
inspect the network capture bit more closely. You must have seen the following entries –

 localhost
 …
 +layout.svelte
 +page.js
 …
 localhost
We did not expand the details on other columns in this article, but you can notice, the first localhost's
initiator is other and the next ones is client.ts. The protocol is different as well. The first one is http and the
next one is ws (websocket). Now why is that?
Next notice there is no index.html and if you try accessing the index.html or app.html you will meet Svelte's
404 page. Why is that?
Well switch over to the command prompt you will notice it outputs
[vite-plugin-svelte] ssr compile in progress…
[vite-plugin-svelte] ssr compile done.

Yes, Svelte is defaulting to Server-Side-Rendering (SSR) for the content that can be pre-rendered. This is
defaulted because of svelte.config.js –
import adapter from '@sveltejs/adapter-auto';

const config = {
kit: {
adapter:adapter()
}
};
export default config;
Now you could use other adapters which are not auto e.g. '@sveltejs/adapter-node' for delivering a svelte
application via node and '@sveltejs/adapter-static' for delivering a static web page with some interactivity.
Let us change this and see what happens. So the revised configuration will look like this –
import adapter from '@sveltejs/adapter-static';
…
Only the changed lines are shown here. Once you change this when you run npm run dev nothing much
will be different, however, if you run npm run build that is going to generate a lot of files and folders inside
.sveltekit folder.
We will give you some time to do your analysis on that content and will take it up in the next dispatch on the
details.