Note: This blog post is just an opinion and a take on why I have a personal preference.
Alright, let me confess a bit here. I'm not a fan of the frameworks. I understand the benefits they give me but given the scale at which I build stuff (literally next to none?), all those fancy frameworks like React, Angular, Vue and Flutter Web are just... you know, overkill.
I've always built my personal website and any short and small projects with plain and pure HTML, CSS and JS up until now. I've worked with a team to build a website for the Dept. of Computer Science and Engineering of my college which, lo and behold, we wrote in pure CSS and JS. Scary eh?
Yes it was, but we were the rebels we were and just hated all those bundling, transpiling, compiling and everything in the middle. And for our inexperienced eyes and hands, the document.getElementById() function was more than enough to build a website.
Of course, we completed the website and it was fast and all. It wasn't the most responsive website we ever built but hey, we were learning.
Fast forward to just an year ago, I would still prefer this plain old JS and CSS cause why not. It was getting my work done and I didn't have always tidy up everything into a bunch of folders and all. I just use a single JS file and make it as readable as possible.
I was building desktop apps with electron and building websites for a lot of purposes at the same time was building mobile apps with Flutter. I just missed the reactivity and reusability that Flutter offered. Although, I built applications with React at this point, I just knew it was overkill.
Now meet this new age framework I discovered, Svelte. Now this is a framework but it barely looked like one to me. Why? Cause it didn't change a lot of the structure of html and reactivity felt built in. Like I could just drop the document.getElementById() statements and call it a day cause it is just similar to vanilla web.
It also had an added advantage of components. So, I create a card and make it look exactly like I want it to but later when I find something annoying and have to change it, I just need to change it in a single file and the entire website will have the updated card without me copy pasting that card again and again. (I know we can achieve this in vanilla web as well but, confidence, confidence that we will never change that card again, but eventually we do)
So, I started using Svelte and discovered that a lot of things are already reactive, like do you want to reactively respond to a change in screen/window size? You can do that (without writing any additional functions). Only want to apply a CSS property to a h1 tag inside a component? That's the default way. Want to change the text color for all the text boxes? Yup, just edit everything in the global.css file. All of this while also being as close to actual vanilla web as possible. It felt like going from C to C++ rather than going from C to Java, C being vanilla web, C++ being Svelte and Java being frameworks like React JS.
So, that's it? Svelte is the framework to use for everything?
Nah! At least not yet for me. Frameworks like react, vue and angular have huge communities around them building stuff. A lot of startups choose them for the same reason. Svelte, I would say is still very young and for some things, chances are that you need to create a package and release it out on npm.
For me it currently looks like a good way to introduce people to reactivity. In an age where people start learning React and then learn HTML, CSS and JS and try to wrap their head around JSX. This framework can be a good starting point to learn the building blocks of web and also understand why we need reactivity and reusability in our applications/websites.
Svelte, is now my de facto framework for building small projects with ease. If you would like to see the kind of projects that I build with Svelte, you can take a look at podcast.cacheho.in and my landing page sampath.dev.
The opinions stated in this blog post are my own and do not represent that of my employer.
![Scalability, Reliability and Maintainability [Tenglish]](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1759079554176%2F86761c98-abd6-4c0a-a763-cb7578149542.png&w=3840&q=75)
