Svelte Saves the Internet
JavaScript Finds a Hero
Since I first started writing JavaScript, there’s always been a background feeling of slowly evolving towards something better.
A few milestones along the way included jQuery’s introduction of CSS selectors, Firebug’s introduction of sophisticated dev tooling, component libraries like Dojo and Angular 1.
Most significantly, the more recent introduction of reactive libraries like React, Vue and Angular 4+ launched a whole new level by eliminating developer-managed binding of the view to the state.
But.
It still felt more clunky than necessary. Harnessing the power of reactivity was still cumbersome and painstaking. It still felt like the essentials were obscured by unnecessary kruft.
Svelte changes that.
—
I won’t dwell over-long on this. (I’m busy building apps with Svelte :). But take a look at this:
{#each topics as { id, name }, i} <li on:click=”{() => onTopicClick(id)}”>{name}</li>{/each}
There you have iterating over an array of objects, accessing the properties to do useful things with them.
I don’t know about you, but that is all compact, clear and obvious. Just works the way I expect it to.
—
Things Just Working is really a great feeling. The feeling that things Just Don’t Quite Work is a real drag. Its a bummer. It takes some of the joy out of programming.
There are nice features to Svelte (like fast loading small bundles) but the thing I won’t go without is the ability to write stream-of-consciousness UI code.
I can write up Svelte components without referencing anything. That is the wonderous feeling of coding in the zone.
Also, I enjoy coding without the feeling of: “ug, now I have to go perform that routine task that is more onerous than it should be.”
So I’ll say in conclusion: Give Svelte a chance.
—
BTW: I normally dislike meta-frameworks like Next and Gatsby, but Sapper has been pretty sweet so far.