DEV Community

Cover image for Building A Dashboard In Svelte
Srishti Sharma
Srishti Sharma

Posted on

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):

Dashboard

Dashboard

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(using Service 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.

Dashboard
The one with sidebar and navbar

Dashboard
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.

Top comments (15)

Collapse
 
timhlm profile image
moth

This was a great read, love to see all the awesome work being done with Svelte right now. Really feels like this is where front end frameworks should be headed.

Our team had a lot of luck building a simple dashboard (can't share the source, apologies) with Svelte template project and the svelte-spa-router on npm.

If you don't have the option to use Sapper, or are waiting for it to mature a bit, you can use these tools to get going with Svelte + routing quickly.

github.com/sveltejs/template
npmjs.com/package/svelte-spa-router

Collapse
 
erickmarcia profile image
Erick Marcia

Excelente Post, recien encontre a svelte soy prácticamente nuevo (10 dias mas o menos ) y me gusto tanto tu proyecto que lo ocupe para un proyecto de clases donde conecte una api laravel con svelte, fue super facil aprenderlo a aplicarlo el único problema que encontré con svelte o sapper es la forma de guardar imágenes y documentos adjuntos.
Si tienes alguna ayuda te lo agradeceria. Gracias!!

Collapse
 
sonicoder profile image
Gábor Soós

It's good to see others also trying out Svelte. I've also made experiments with it on the Todomvc application.

What I can't understand why there should be a "best" or "ideal" Javascript framework...every one of them has its ups and downs and can be ideal or best in a specific use-case + team.

I really like the bundle size and the speed of Svelte. On the other hand, the non-existent unit/e2e testing (you have to find out and build everything yourself) and no structure for the store (returning a singleton from a file and direct write access to stores just doesn't seem right) makes me feel that Svelte needs to become more mature to be widely adopted.

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

Good read and impressive work. Just a quick thing are you also looking into responsive design of your implementation as I couldn't see the side navigation in mobile view. My bad if it is work in progress

Collapse
 
thatzacdavis profile image
Zachary Davis

Thanks for including a link to the Github repo!

Collapse
 
cordialgit profile image
Cordial

Today, we have SvelteKIt-- which as at July 2024, is in version 2.5.18.

It is no longer called Sapper.

Can You now create a new Post, and show us how to create the same Dashboard using Svelte and SvelteKit?

Regards.

Collapse
 
diegocastrum profile image
Diego Castro

Nice post! Very well done!!

Collapse
 
jonrandy profile image
Jon Randy 🎖️

From what I've seen, Svelte looks a lot like the fantastic riot.js.org - which has been around since 2013 and is now on v4

Collapse
 
sumitkharche profile image
Sumit Kharche

Great work Srishti.

Collapse
 
sm0ke profile image
Sm0ke

Great work. I will play with the project.
One missing thing on Github is the Sponsor button. :)