I am always looking into other languages and frameworks for learning and new projects. I have been more interested in the web space lately after porting Draw! from C to web using Web Assembly, and have been curious how other tools in the space have been progressing as well.

Not to begin a holy war, but I have never been a fan of React. Aside from the super-mega-corporation thing, I have never found it intuitive, easy, or fun to use. Angular? *laughs* 🤣. I have been seeing Vue seemingly becoming more popular as of late.

So on Friday in the #developers Slack channel at work I asked a simple question:

A very interesting discussion about frameworks and web development in general ensued. I love chatting about theory, opinions, and perspective on all things programming, and it was really cool to hear folks whom I consider some of the top developers in the industry contribute to the discussion.

Along the way, two of my teammates brought up https://svelte.dev/. I had not seen it before, and the second I clicked the link I thought: “this is so cool!” I thought the syntax looked pretty straightforward, it looked intuitive, and I love the idea of less boilerplate *cough* react *cough* and no virtual DOM.

While we talked about lots of other stuff during the discussion, I decided to spend part of my weekend refactoring one of my web apps – https://strong.rudyfaile.com – using Svelte. Previously this application was written in PHP (and I blogged a bit about it here.)

I had been thinking about refactoring the program for some time, mainly because it doesn’t really need to make a request to the server after it loads since all of the data could be available on the front end, so sending a form -> POST request every time the program generated simply wasn’t ideal. So this application was a prime candidate for the work.

Here was sort of how the old architecture worked. A full reload was required every time the user needed new information from the application:

And here was the intention for the refactor:

I found it surprisingly easy and straightforward to learn Svelte. I would honestly say there wasn’t even that much of a learning curve. I didn’t really watch a tutorial or dig too deep into it. I just checked out some of the examples and built a brand new project with npm and started hacking away, occasionally checking the Svelte docs to achieve a desired result.

As much as I hate the bloatiness and general misuse and abuse of npm, it is pretty nice to start a project with a one-liner and have a live hot-reload development server up and running.

so easy!

Not too long later I had the entire app done and ready to replace the PHP app on the server. Building for production was trivial with npm run build – the kicker? The built files to be hosted on the web server were only .10Mb (100 kb!) larger than the previous files on the server!!

Now that’s a bloat I can get behind! While I don’t think I’ll be npm install savemeplz for every single project in the future, I definitely will be using Svelte again sometime soon. Stay tuned 🤠!