Usually, I like to stick to my comfort zone when building a new app, but this time I’m tired of using the same tech (React 😅). I wanted to mix things up a bit. I've been browsing the StackOverflow survey for a while, and one technology always catches my eye: Svelte.

#Documentation of Svelte

This week, I’ve started to muster the courage to break out of my comfort zone. I began checking out the Svelte documentation and going through its tutorials. By the way, they're very well-made and fun to follow—I recommend them!

The first main difference for me between React and Svelte was how a component is implemented :

In React, a component is usually a JavaScript function that returns JSX element. Props are passed as an object to the component.

import React from 'react';

function MyComponent({ name }) {
  return <div>Hello, {name}!</div>;
}

export default MyComponent;

In Svelte, a component is a single .svelte file that contains HTML, CSS, and JavaScript. Props are declared using the export keyword, which is very simple.

<script>
  export let name;
</script>

<div>Hello, {name}!</div>

If you want to add some style to your component, you can do:

<script>
  export let name;
</script>

<div class="container">Hello, {name}!</div>

<style>
  .container {
    color: blue;
  }
</style>

The styles are scoped to the component by default, which is a neat feature that avoids CSS conflicts.

After that for example you want to add a specific color to the name without passing through the style tag:

<script>
  export let name;
</script>

<div class="container">Hello, <span style="color: blue;">{name}</span>!</div>

<style>
  .container {
    font-size: 20px;
  }
</style>

Okay, but you can use the shorthand version :

<script>
  export let name;
</script>

<div class="container">Hello, <span style:color="blue">{name}</span>!</div>

<style>
  .container {
    font-size: 20px;
  }
</style>

It’s cleaner! What do you think?

I invite you to check these tutorials if you are interested 🙂

#SvelteKit

After getting the hang of Svelte (thanks to the interactive tutorials), I jumped into SvelteKit. SvelteKit is a framework for building web apps with Svelte. It's got built-in features that make development a breeze, like routing, build optimization, offline support, SSR, and more!

Feel free to check out the documentation about it 😄

#Practice, practice…

When I’m learning a new tech, I like to find ways to practice it. For that, I've looked into the platform devchallenges where you can pick up various challenges to practice your skills in different paths like Responsive, Frontend, and FullStack. I highly recommend it!

To start slowly and avoid frustration from complexity, I chose to create a small landing page: the coffee listing challenge. It requires fetching the coffee list from an API, and everything needs to be responsive, of course.

#What I’ve learned from it?

The main thing that I really liked about Svelte is the simplicity. For example, when you are building a component you can share a prop through a CSS variable :

<div class="container">Hello, world!</div>

<style>
  div {
    color: var(--color);
  }
</style>

MyComponent.svelte

<script>
  import MyComponent from './MyComponent.svelte';
</script>

<MyComponent --color='red' />

MyOtherComponent.svelte

As you can see, -—color works like a simple attribute. Easy! I've used it a lot in the components I've created for my application. But in my opinion, this feature should be used sparingly. If you change the variable name while keeping the same dynamic attribute name, there are no lint errors (maybe it's my IDE), and you can quickly lose the context of your code and create styling bugs.

Also, if I have child components inside MyComponent.svelte with the same CSS variable name in their style, they can take the —color value from the parent component, adding more complexity in the end.

I prefer to do it in that way in the future :

<script>
	export let color;
</script>

<div style:color={color}>Hello, world!</div>

MyComponent.svelte

<script>
  import MyComponent from './MyComponent.svelte';
</script>

<MyComponent color='red' />

MyOtherComponent.svelte

I'm defining the color prop directly (which I can type) and using it to set the style:color directive. It feels more secure and reduces the scope of my change.

#Conclusion

Svelte has been a refreshing change from the usual frameworks I work with. The streamlined syntax and powerful features like scoped styles and reactive props have made development enjoyable and efficient. I look forward to exploring more advanced features, such as building forms and looking into SSR, and building more complex applications with Svelte in the future.

You can check out the source code and demo of the app I made :)

Overall, this journey with Svelte has opened up a new perspective on how I approach building web applications. If you're considering trying out a new framework, I highly recommend giving Svelte a go. Happy coding!