If you don't want to have fun, stay away from Svelte!

To give some context, I've been using ReactJS for the past two years, and I've made pretty much every main-stream website one can make in React. I was pretty neutral on React. I recommended it to every friend of mine and thought it solved a really big problem coming from vanilla JavaScript.

So, what happened?

Since I've used React so much, it was getting a bit repetitive. I recently left my internship, where I worked intensely with React and React Native. The pattern of React, although intriguing initially, was getting a bit monotonous. That was when I tried Svelte and immediately fell in love with it!

Now, what's this about a Svelte?

For people who don't know about Svelte, imagine it as an alternative to React. Well, technically, it is a front-end JavaScript framework, while React is a component library, but you get the point. For any web project, you either choose React or Svelte, not both!

Now, when you look at Svelte, there's one thing that pops out. The files are all in the .svelte extension! How the hell is it a JavaScript framework if it uses the .svelte extension? Is it a completely new language that we have to learn?? Is it going to be difficult??

Suppose you asked any one of these questions, then fear not. No, it is not a new language that you now have to go searching for tutorials for on YouTube or, God forbid, Coursera.

The structure of a .svelte file is pretty straightforward. I mean so straightforward that it doesn't get much simpler than this. A normal .svelte file might have your HTML code in it with the JavaScript in the script tag and styles in the styles tag, as usual. For example:

Now this example above demonstrates 2 of Svelte's most amazing abilities. Svelte allows you to isolate your code using components just like React, and they would not get the CSS styles that you defined in the file above. The styles for the p tag are only for the particular .svelte file they are defined in and will not propagate down to Nested!

As a front-end developer, this allows you to write CSS styles without having to worry about giving highly specific class names to your components, so the right ones get the right styles without getting things messed up.

The second thing this example demonstrates so beautifully is the simplicity of Svelte. Svelte allows you to write code in such an elegant way. There's no need for having functions that export JSX; export those functions, then import them in another file! You can simply write your code, and Svelte will take care of the rest for you! Take, for example, the Nested component in the above example. Here's what its code might look like:

How pretty and readable the code has become now!

So now what?

The things I mentioned above don't even begin to scratch the surface of what Svelte can make more fun than React! I insist you all go and check out Svelte and the amazing work people are doing over there! I can safely assure you you won't regret it! It might just make web dev fun for you. :)