Svelte: Embracing the Elegance of a Better Framework

Svelte: Embracing the Elegance of a Better Framework

So, I had this interview not long ago, I had an engaging conversation with the CTO who expressed their plans to migrate their application from React to Svelte. Admittedly, I had limited knowledge about Svelte before that chat, but I got curious afterward and decided to delve deeper into it. And you know what? I get the excitement surrounding this framework.

To be honest, I loveeeeee working with React. After learning JavaScript, I reached a point in my web development journey where I needed to pick a framework to advance further. Two frameworks were on my radar, but once I started using React, I instantly knew it was the perfect fit for me. I didn't even bother exploring the other framework because React felt like the one I had been searching for. So I was a bit hesitant to checkout Svelte but I did anyways and here we are.

What is Svelte?

Svelte is a user interface (UI) framework built on JavaScript that enables developers to create web applications with ease. Unlike traditional frameworks, it shifts much of the work out of the browser and into your build step generating optimized Javascript that updates the DOM. Yup, you heard that right, no virtual DOM. Now let's get into some of the deets.

What makes Svelte different

Unlike traditional frameworks, Svelte does much of the heavy lifting at build time rather than runtime, before the application runs in the browser. This is achieved through the compiler that takes your code and turns it into an optimized version of Vanilla Javascript.

The key takeaways from using Svelte so far

  • Learning curve: You can easily build components using the basics HTML, CSS and Vanilla JavaScript. Compared to other frameworks like React which has a steep learning curve (I know I had a bit of a challenge understanding some of the concepts), Svelte on the other hand is much closer to Javascript. So, beginners will find it easier to grasp and pick up this framework.

  • Simplicity: After tinkering with it for over a week now, I can say it's so easy to use, small, simple and fast. You don't need to have too many packages to have your app up and running. Anyone with a good knowledge of Javascript can look at your code and understand what is happening.

  • Reactivity: Okay, I have to admit, when I first delved into reactivity, it seemed a bit strange at this point, but I went with the flow nonetheless. In essence, it triggers an update to the DOM when the state of your application changes. Its purpose is to ensure that your DOM stays in sync with the state of your application.

  • It is enjoyable: I haven't felt this much excited as the first time I built my first app, a note-taking app with Python. And you know what they say, gotta love what you are doing or else it becomes a chore.

Conclusion

Now, I hope it's safe to say that you are probably won over by the Svelte idea, but word of advice before picking a framework make sure you have a solid grasp of Javascript. And remember that frameworks come and go, so don't fall in love too much with a framework. Learn and explore other things. Make sure you pick a framework that works best with your use case.