You are viewing...

Svelte/Sapper is F*cking Amazing

Updated on June 24, 2019 at the 03th hour
Posted under:

DISCLAIMER: All views are considered my own and you should not draw any conclusions on associates.

Alright alright, so I dumped React as my frontend framework for this website and that's primarily because Googlebot was being all weird in rendering my pages for search results (this was after I fixed my "mobile usability problems" with simple html!). Same reason why I dumped Aurelia, but I had Server Side Rendering working for React. Mind you, I was an Aurelia fan boi 😂. Well, I needed a new framework to use that had SSR working out of the box, but not with React or Angular style heavy bundle.

I considered just writing my own framework that just pushed html/css/js, but then I remembered Svelte v3 from a couple months ago and checked it out. Boy oh boy, I was blown away by the tutorial. I'm looking at it saying this is what Aurelia was trying to do! I was excited, but more cautious this time around with switching to it. I documented what I needed for this site and other internal UIs I created to verify what I'd be losing if I did switch. Once I verified that I liked it and actually gained, I took the plunge to convert the site. Honestly, I was fighting the decision telling myself this would be a waste of time.

First I got the template website and made some modifications and tested phantomjs on it. I dunno why, but if phantomjs can see your site then Googlebot can see as well. This verification alone made it less of a waste of time.

Converting from React's JSX was fairly straight forward since I used HTML with some Js. The component files are svelte or html files and they work the same with html/js/css sections, which is a plus for me. I'm glad that you can add and remove classes with the class:{classnamehere} attribute since typically you have to maintain a class list, which is arduous. This is the first framework that I've used that has allowed script tags that can use the src attribute. Wow, thank you Rich Harris for that. Don't have to use JS to add the script element. Made it so easy and comical that I used anything else.

Only bad part was outside the framework. Dumping webpack meant having to learn a new one. I decided to go with rollup since webpack produced a bigger bundle from the template project. I was having trouble with trying to manually include a global css, babel and common js around which goes first. I won't go into detail on this, I'll post up a template project to avoid the issues I was having with including global css, decorators and using async/await in the client side.

Gotta say the framework seriously gets out of the way, which is actually one of the tenets of Aurelia. You could open up the network tab on your browser, reload the page and see how small and chunked the bundles are. Super low latency is what makes me enjoy this. Simply amazing.

On using Google Pagespeed, I tested about an abysmal 68 on desktop with React and 30-40 with mobile. F*cking Terrible. When tested with Svelte, it popped up to an amazing 94!!! That was vindication that this wasn't a waste of time. GoogleBot has been WAY more consistent with rendering the pages. I am happy about putting in this effort.

Finishing touches, I've been updating some things afterwards such as about me (clearly did not spend much time PROOFREADING it the first time). I updated my internal build/deploy scripts to match my world view of releasing and it is a definite improvement.

Last thing I need to do is convert the admin part of this blog to Svelte.

You just read "Svelte/Sapper is F*cking Amazing". Please share if you liked it!
You can read more recent posts here.