How Svelte made me understand Web development better in general

In this article I'm going to be talking a lot about Sveltekit when saying "svelte", since it's the way Svelte team advises building web apps with Svelte and it's the way that I now build my apps with it.
I also wanted to say that this post is about my experience, and I'm not going to talk only about Svelte specific things that I think made me a better developer, but things I learned during the process of learning svelte.

I wanted to share this with everyone that might be wondering if Svelte is the right choice for learning web, and I couldn't say anything less than yes by my experience. Of course I was and still am at the start of my career and I'm constantly learning new things but I guess it accelerated some knowledge that I didn't think I would catch that quick, only because on other frameworks, it wasn't needed.

Progressive Enhancement

For those who don't know, this is the wikipedia definition:

Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead.

This is one thing that I didn't even think before learning Svelte, and I heard about that while learning through the learn.svelte.dev and other tutorials of Svelte, props to Joy of Code , Huntabyte and Svelte Society for always sharing valuable content that made me think about things I never thought before.

Before Svelte, I only worked with React, mainly using Nextjs(No app dir back then), and I never thought about making things work without javascript, and that thought suddenly got into my mind when I was exposed to form actions in Sveltekit. Sveltekit is thought of working without javascript, working always with server-side rendered pages, working with form actions(meaning no need for javascript to make your forms work as expected), fetching data with redirects instead of client-side fetch(this is relative, but in many cases you may not need client-side fetch). Almost anything can be done without client-side fetching.

Learn Javascript, not React

I'll probably still use React on some next projects, but even though I still find React pretty good, I can't say I prefer writing "Reacty" way of code instead of just javascript. React may only be javascript, but if you've worked with it, you know there are some caveats, making libraries not ported to React work in React, is hard, and at the end you are not learning javascript, you're React way of working with javascript.

With Svelte, you don't have to think about what you have to do to make your code work in Svelte, even though you can change things to use Svelte actions, you don't have to. Everything that works in javascript, works in Svelte out of the box, no overhead of converting packages.

Accessibility

That's not actually a Svelte specific topic, but more a Svelte community one, but either way, I wanted to share this one. The Svelte community is quite amazing, one of the most awesome things I see in it is the "This Week In Svelte" that the Svelte Society has every Friday by sharing new updates of Svelte, new packages made with svelte or made for Svelte, and not only Svelte specific topics, but also web related content in general.

There has been one episode that really changed my vision on accessibility(they have many episodes that tackle some parts of accessibility), that he was using voiceover to walk through the wikipedia page of Svelte and was showing how people using screen readers might navigate through your application, and even though I already knew people would use screen readers, before that, I didn't take time to understand how it worked, and nor used it on my day-to-day, and after that, I cannot build components without thinking about accessibility. Now every component that I build I run voiceover and check if there's anything that could be better, I'm not saying this should be top priority every time but I guess that if you can take some time to improve the accessibility of your websites, you should, it will be good for you, being able to reach more people than before, and of course, for people that now will be able to use your website.

Saving more state on URL than variables when applicable

Since Sveltekit encourages you to use your page handlers to fetch data instead of client-side, I ended up coming with more solutions that worked without javascript, sometimes using forms for redirecting to the page with the correct parameters or even with javascript, but saving the state on the URL enables you to save "sessions" for a user to share with someone.

I have to say that it's again not a specific thing that Sveltekit introduced, but a thing the environment encourages, and because I didn't feel the need for doing so and nor had the incentive to do so when using Nextjs, I did not learn those things the way I should.

By saying "I didn't feel the need for doing so" I mean that all tutorials I've watched and blog posts that talked about mutations and submitting forms, always were using something like this in React:

function ExampleForm() {
    function handleSubmit(e: FormEvent) {
        e.preventDefault()
        // ...
    }

    return (
        <form onSubmit={handleSubmit}>
            {/* ... */}
        </form>
    )
}

Doing something like this, is relying on the user having javascript enabled, why not teaching people to handle forms as they're natively built and handle form inputs as they were thought, by using native formData()?

I guess it is fair to say that almost all people will be using javascript nowadays, but having javascript enabled is not the only condition for the javascript to run, the user still has to download it. Maybe the user is with bad internet connection, working with forms and redirects will make everything work without having to download that extra bit of javascript.

Conclusion

I guess that's all I wanted to share, learning svelte made me learn more about web development and I'm grateful for it, If you didn't give svelte a chance yet, take a shot, you might love it ❤️.

Comments

[artydev]

Here is my way to validate forms in vanilla js

You can play with it here : Forms

[Fyodor]

You’d like Remix I believe. Svelte has its templating DSL which is quite weird and specific, and as with any abstraction layer it’s an additional knowledge bag you need to create, nurture and maintain following the library updates. Same about the reactivity model (especially with the latest updates).

However, Svelte is definitely nice and more pleasant to work with than many other frameworks.

[Nicholas Costa]

I've been looking at Remix recently but haven't gotten to build something yet, definitely something interesting. I agree with the Svelte things you said about abstraction layers, but I guess it also applies for JSX in React, there also are many abstraction layers and I think that at the end, it just comes up to what do you feel like is best for you.

I might change my mind about Svelte some day but I'm liking it a lot recently, however, I'll try to build something with Remix, it's been on the shelf for soo long. Maybe the experience with Remix feels better than Svelte, who knows