Building A Dashboard In Svelte

Introduction:

The newest entry in the race to be the best JavaScript framework in the market today is Svelte. It is a new JavaScript framework just like React, Vue and Angular, but with a twist.

What makes Svelte spectacularly fresh and promising is the fact that it offers the following features:

• No virtual DOM
• Boilerplate free code
• More of a compiler
• Very Easy Syntax
• In-built Store

It presents a radical new approach to building user interfaces. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Not just that, Svelte has many other amazing features at your disposal as well outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it's a compiler, etc. are just some of them.

How It Started:

With me, it's like whenever I hear about something new, I want to dig deep into it and when I heard about Svelte, I knew I had to do something with it. So, to begin with, I started with the basics of Svelte. Reading about how to declare a variable to handling events, I learnt it all very quickly.

Does that make me a quick learner? I don't know ? but the real reason was that Svelte made it easy. In fact, anyone who knows basic JavaScript, HTML and CSS can understand Svelte without a hiccup. It is really that simple.

The Idea behind the Dashboard:

I had learnt the basics of Svelte and now wanted to use my concepts to build some sort of a mini-project. I was searching for some reference but could not find anything suitable. That was until I found the sb-admin-dashboard, which is a very famous dashboard to start with and nobody had made it in Svelte yet. I counted my blessings and decided to create one from scratch. I had my project in front of me. All I had to do next was get to work. In my head, the dashboard looked something like this (which is exactly how it turned out):

Problems I Faced:

After I decided what to make and started coding, I gradually started to realize that there were some issues that I needed to address. First off, I needed to figure out how to manage CSS. Spending a majority of the time writing CSS when I am in the process of learning Svelte was felt like an injustice to Svelte. So, I needed a UI-Component Library to help me ease into it. After some searching, I found one called SvelteStrap.

SvelteStrap:

It is a UI-Component Library for Svelte. More practically, it is a Bootstrap Library built exclusively for Svelte. If you want to read about it in detail, You can follow this link for more info.

The next problem that struck was routing and folder structure. How do I handle routes? Svelte does not have any in-built routing services and I needed one to make my dashboard work. A little cruising off the internet coast led me to a solution for that too, which was Sapper. Yes, another framework which comes with server-side rendering, routing, highly efficient folder structure management and a lot more.

Sapper :

Sapper is short for (S)velte (App) Mak(er). According to the English dictionary, Sapper was a term used for soldiers responsible for building bridges, repairing roads, handling demolitions during wars. Made a lot of sense because in a way, this is what Sapper does for Svelte.
Sapper includes all of Svelte's features plus additional features which supplement the existing goodness of Svelte, which is why it is the official recommendation from the Svelte team to build server-side rendered apps with routing.
How, you may ask? Sapper provides the following:

Routing

• Server-side rendering
• Automatic code splitting
• Offline support(usingService Workers)
• High-level project structure management

How does Sapper Work?

Well, there are two basic concepts that Sapper is based upon:

• Sapper considers each page of the application as a Svelte component, and
• We create pages by adding files to the src/routes directory of our project. These pages will then be server-rendered so that a user's first visit to your app is as fast as possible before a client-side app takes over.

How Sapper Manages Folder Structure:

Every Sapper project has three entry points along with a src/template.html file:
src/client.js : entry point of the client-rendered app.
src/server.js : entry point for the server to serve the app
src/service-worker.js (optional) : gives access to features like offline support, push notifications, background synchronization.

How Sapper handles routes:

Navigation between pages can be handled by using basic HTML anchor tag. Just provide the page's name in the href attribute and boom, you're done! It is that simple, believe me you!

Layouts:

So far, we've treated pages as entirely standalone components but what about navigation? We all are aware of the fact that upon navigating within an app, the existing component is destroyed and a new one takes its place. But in many applications, there are elements that should be visible on every page, such as top-level navigation, a sidebar or a footer. Instead of repeating them in every page, we can use layout components so that the common ones are not repeated again and again.

To create a layout component that applies to every page, just make a file called src/routes/_layout.svelte.

Talking about the dashboard that I'm building, it actually has two layouts: the one with a sidebar and a top-navigation bar and the other with none of these.

The one with sidebar and navbar
The one with no sidebar and navbar

I bifurcated these layout by using a simple if-else, but Sapper provides a better way of doing it, which is by creating nested layouts. For now I have not implemented it but will surely do in the near future.

This was all about the things which I used and how I used them to build this dashboard. As it is a work in-progress, I'll be adding more to it from time-to-time. Also, it is completely open-source so I would really appreciate if anyone wants to contribute. The end goal is to make it ready to use for any one who wants to start with a simple dashboard in Svelte.

Check the live demo of the dashboard here

The GitHub repo of the dashboard is here

It is an amazing experience to build something new in a technology that is recent and promising. With the pace that it's picking up, I think sooner than later, Svelte will be the ideal framework to work with and build apps in.

Doubt that? Well, why don't you go and check it out.

I also appreciate you taking time out to read my piece. A big thank you to you for that.