Use React, not Svelte

There's a lot of hot takes out there about how “superior” Svelte is to react. Maybe it is, but if you’re interested in fast coding, use React.

It’s not popular enough

source

80% vs 20%…pretty big.

Who cares about other people, we can pick who’s on our project and what languages they use, right?

We do, because we want to use their libraries and packages without having to roll it ourselves. This is why Python won out over ruby, LISP, haskell, and Perl. Better libraries.

Example: We want to use heroicons. They’re prebuilt and slick. Now we want components for them. In svelte, we’d have to roll them myself. Manage all my files, create new ones for each icon, maybe start maintaining an npm package, and slowing down my valuable projects because of the maintenance burden.

With react, there’s enough mindshare that there’s an already maintained, fast to use, react package.

npm install @heroicons/react
import { BeakerIcon } from '@heroicons/react/24/solid'

Done.

It’s not that much better than React

html/js/css << jquery

jquery was a huge improvement over html/js/css. jquery was great for DOM walking, compared to the js at the time.
Here's an example: Let's say we have an unordered list with nested lists and we want to highlight all second li elements in each nested list:

<ul>
    <li>Item 1
        <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
            <li>Sub-item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
            <li>Sub-item 3</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

With jQuery:

To highlight the second li in every nested list, the jQuery approach is concise:

$('ul > li > ul > li:nth-child(2)').css('background-color', 'yellow');

With vanilla JavaScript (HTML 4 / JS 3 / CSS 2):

Achieving this with older versions of JavaScript and the available DOM APIs is much more complex:

var lists = document.getElementsByTagName('ul');

for (var i = 0; i < lists.length; i++) {
    // Check if the ul is nested
    if (lists[i].parentNode.tagName === 'LI') {
        var listItems = lists[i].getElementsByTagName('li');
        if (listItems[1]) { // Check if a second item exists
            listItems[1].style.backgroundColor = 'yellow';
        }
    }
}

jquery << React

React was a huge improvement over jquery because you could write declarative style components rather than imperative jquery, so you never needed to walk the dom.

React vs Svelte

But svelte? Uh, over react it has:

No virtual dom

This is runtime performance and most react apps are not limited by runtime performance. Plus there’s million for react if you want to get rid of the virtual dom.

Terser code

Verbosity and typing is rarely a speed limiter while coding nor does it increase maintenace burden. The problem with Java isn’t its verbosity but that it really encourages OOP (public static void main args). OOP encourages bad design patterns which leads to a high level convoluted mess and Architecture Astronauts.

Syntactic sugar

It saves me some syntactic sugar like

foo = bar

vs

setFoo(bar)

Whoopdie.