Learning SvelteKit

Is this supposed to be fun ?

Front end for me has always been something I need to do, more than something I want to do. I need a website, but I quite literally have nightmares about not managing to center a div!
Is always been hard. On one hand, you can actually look at it. You make changes and boom its right there in front of you. It might not be the change you actually wanted… but it’s something at least.

Despite not liking it and preferring to just deal with data and infrastructure. I have somehow managed to land myself in situations where I am making UI and entire front end solutions. I have been involved in 4 projects so far and learned a lot. But I have always had the feeling of me not using the right tools or not doing things in the most effective way. I mean, I have been correct the entire time, but knowing there is a problem without an actual solution is basically useless.

My journey in the realm of javascript and horrible design

I don’t think I can say that I like Javascript. It’s kind of like a bipolar uncle that comes to your family reunions and starts talking nonsense about 5G and how its altering our DNA. It might be entertaining, but quite mad! I mean look at this !

1 == true; // -> true
// but…
Boolean(1.1); // -> true
1.1 == true; // -> false

true == []; // -> false
true == ![]; // -> false

NaN === NaN; // -> false

[10, 1, 3].sort(); 
// -> [ 1, 10, 3 ]

parseInt('06'); // -> 6 
//makes sense

parseInt('08'); // -> 0 ... what?
parseInt('08', 10); // -> 8
// ah yes... 
//anything grater than 8 in parseInt
//  does not use base 10 as standard...

//And my personal favorite
setTimeout(() => console.log("called"), Infinity);

You can Find more fun stuff like this here and or listen to the great talk from 2012 here. But you get my point. Javascript is not as elegant as some of the other languages out there. But, man is it easy to just pick up and make stuff with.

Javascript has some of the characteristics of some games. Easy to learn, hard to master. And I genuinely believe that this is part of the reason JS is so popular.

My first stint with javascript was in university. In our intro to webdesign we used it to swap out some strings and do basic checks for user input. Back then I did not really grasp what was possible to do with JS. So i put it aside and focused on more “useful” languages like bash and python. Because for some reason, writing file manipulators and auto backup solutions for my game-saves was more important.

Sometime later I decided that I needed a website. And like any normal person I did not go to wix or squarespace or something that could have me be done with it in a day or two. No no no. I rent a server, learn Docker, find out what NodeJs is and create a CICD pipeline to deploy my website with NodeJS and Express running on a docker-container on a server with Nginx-proxy to expose the correct internal endpoint. All in all took me some months and a LOT of trial and error. I wrote all of it from scratch and did not want to use any library or framework. Because why use something that would make this process less painful 🤪

Of course I, many times, almost decided to rm -rf my entire project. But instead I took some detours checking out all these fancy frameworks people were talking about. I was using NodeJs and express at the time. Routing was basically non existent just redirecting and rendering different views. Little to no data going anywhere. Everything rendered client side. Not performant, not good. So I do a little research and I end up trying React, view, gatsby, jekkyll and some others I can’t remember. (there was one with a hamster as a logo. It did not last long)

Frameworks… more like Lame works 🤦

After many tries and many git branches, I was kind of confused. I saw the appeal of something like react for a big project with a large codebase and many different teams. Sectioning your webapp into components or modules makes sense. But the startup weight is heavy. Getting into just adding what you want is a tedious process and understanding the virtual-DOM is hard. Also styling in react can go die in a fire🔥 pls no javascript in my css, k thanks bby. I get that its very flexible and whatnot, but man does it make a lot of room for bad and untidy code! Especially if you are working with people who are, like you, new to the framework. Then add on all the things you need just to get some “extra” functionality and before I had even started. React was out.

The others suffered from a lot of the same issues as react and ultimately just did not work out. There are a lot of cool features in these frameworks but a lof of them simply were just not in scope of what I wanted to do. I am not a company with teams. I am a dude, that wants to write simple code to do simple things. Here is a short list of what irked me the most with these frameworks.

Hard start:

• Starting the project was painful. The documentation was not good enough for someone to feel comfortable that they had what they needed to start developing. “Just npm init insertframeworkhere” and you are off to the races? No. what if you want to do x or y. Then install all of these extra things and then you have to go read their documentation. So in the end you have not written anything useful and have sat on your butt reading documentation for 2 hours.

Virtual Dom is hard:

• I get the flexibility of having an abstraction from the DOM to play around with. keeping state and rendering only changes to affected nodes. But MAN is it frustrating to not understand why something does not look the way it is supposed to because you forgot that the third rerender of the component does something to the state bla bla bla. Headache. I get that this is a skill issue… But as Grug said. Complexity bad!

Project clutter:

• Projects in these frameworks tend to get very cluttered. A lot of files, a lot of different things floating around either because of path things or routing. Again another skill issue. But keeping your code and project clean is kind of hard for a beginner, or someone who is not a beginner but has little experience with front end development.

The simple way is faster:

• The most frustrating thing by far was that I knew that I could do all of the things I wanted in vanilla JS with Node so much faster. I had written a bunch of code that did the same thing as the frameworks, only in less code and it was better suited for my tiny project. Single page app? Let me just write a little function that takes in the current and the wanted view and then rerender only the main div. About 20 lines of code total. Kept state for going back and forwards. Just the knowledge of how to do this to begin with made it very hard to learn anything else, Because all you are thinking is “I could be done by now and moved on to something else if I just did this the old way”.

Stage left: Svelte enters.

I realize that this makes me sound like the biggest boomer there is. But it’s true. However being aware that there is a reason people flock to these frameworks, I decided to keep trying. So when something new came along or I found something I had not tried yet, I gave it a whirl.

Stage left: Svelte enters. I found svelte on the stackOverflow 2023 survey. I had heard of most of the entries there, but when I saw that 12k of those who said they worked with NodeJs or React actually wanted to work with svelte, I thought maybe I had found my people.

So did some research. Ok svelte and sveltekit are not the same. Use sveltekit if you want to use it like an actual framework. Use Vite and pnpm because vite is fast and pnpm does not waste space, great. I open up the tutorial and … it just clicked. It was so straight forward. So easy to start. It just makes sense.

Routing:

• folders within /routes are your routes 🤯

Rendering a page:

• files named +page.svelte inside your routes are rendered. They have a script tag and a style tag. Your html or whatever goes anywhere else.

Loading data:

• Inside your route you can have a js/ts file that can preload something for you with the load function and you can access it by default with the let data in your svelte file

Server side:

• If you want to do something server side you just name it something.server.js/ts and it works like an api returning the data or taking it in via the GET, PUT, POST etc functions 🤯

Dynamic urls:

• Using a directory within one of your routes called [insertSlugNameHere] you can create a dynamic url where within that slug directory you create the +page.svelte for the slug. Defining what data it will get and how it will look like.

Layout:

• Defining a layout within a directory ensures that all sub-directories inherit that layout. However. If you want to have a different layout within a subdirectory, you just add another +layout.svelte file within it.

NO VDOM:

• A compiler 🤯 love that 💜

Just these things made me super happy. The data flow alone makes so much sense to me! Make api that gets stuff, load stuff from the api, render content with stuff. Brilliant! I was able to pick svelte up quite fast. An MVP of my site was upp and running in 2 - 3 days (after work). These features and the way they are set up just make sense to me. I feel like I have been running with my shoes on backwards and svelte just corrected this and sent me on my way.

Sure there are problems. The project clutter is still there. Not as much code clutter though. But having a bunch of files called +page.svelte is not exactly pretty. But the functionality you get for it, I think, is worth it. The eco system is not as big as something like react… but I have not found that to be such big problem at all. The difference is mostly 2 things.

Quality

The quality of the resources available around svelte is amazing. The svelte docs, the svelte lab, stackBliz and Vercel. These are all tools that make your life so much easier. There are some youtubers making svelte content as well that are really informative and creative. Almost everything I found was quite good and even though I had to search a bit further sometimes. It was worth it. Even when I posted one of my problems on reddit. I did not get a flood of people trying to help. I got 1. And that was enough. One SvelteLabs link later and a bit of context, BOOM problem solved.

Open-ness

The sveltekit developers are pretty good at what they are doing. Their product feels better to use and easier to work with than some of products worked on by huge companies. One thing they have expressed quite a bit is open-ness. Being able to integrate sveltekit with whatever you want. Create the features you want to use and make sure you can at least integrate to ensure you can do the extra bits(like MDSvex or css libraries like open-props). This makes it quite accessible for someone like me who wants things to be done a certain way.

Conclusion

This site is made using sveltekit, open-props and MDsvex. I Have finally something that makes me want to work on my website, that does not make me consider inducing an extreme allergic reaction to lead entering my skull. I feel like I know what can be done and that I finally have tools to do it that are easy to use and that make sense. Moreover , that are fun! And is that not what this is supposed to be? Fun?