loading...
Cover image for Building A Dashboard In Svelte

Building A Dashboard In Svelte

geeksrishti profile image Srishti Sharma ・5 min read

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.

Posted on by:

geeksrishti profile

Srishti Sharma

@geeksrishti

Like to do experiments with new technology and framework

Discussion

pic
Editor guide
 

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

 

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

 

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!!

 

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.

 

Thanks for including a link to the Github repo!

 

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

 

The dashboard looks impressive! Well done!

 

Great post, I hope you can continue working on the repo, it would make a great starter template

 

Nice post! Very well done!!

 

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

 

Great work Srishti.

 

Amazing project but I have to ask you one thing - When I refresh any subpage, I have an URL Error. Do you have any plan to fix it?

 

Just tried out Svelte, and this made up a helpful read. Aweosme.