Rich Harris seems a smart cookie, and sells his slender, graceful (and other synonyms for svelte) JS framework very well

This person is using Svelte but pairing it with SCSS. Like ordering a fancy dish from a trendy fusion restaurant, and then slapping a big ol’ square of American cheese on it. Photo by Ferenc Almasi on Unsplash.

The essence of progress in technology is finding the flaws and critical errors of tech which once addressed those same things in previous tech.

And as much as he admires the work and progress of those that came before him, Rich Harris hopes in his video to shed some light on what he felt was lacking in JavaScript frameworks like React and Vue.

Here are three things that stood out.

Reactivity — The Science of Tracking Change

“How do we tell the computer ‘something changed?’”

Well, that’s pretty much the heart of reactivity, isn’t it? Tracking data as it assigned, is mutated, is transformed, is most of what you’re doing when you develop a web app. The assignment operator, the great =, is the heart of those changes, and Svelte makes very apt use of it.

And it seems like this shouldn’t just be below the surface. The visual brain likes to see things change when they are changed, not lag behind waiting for rendering to catch up. One of the central tenants of good user experience is to let a user know their status, instantly and always. Throwing a Wheel of Wait for every step, no matter how thoroughly their spinning mesmerizes us, soon begins to feel like added weight on the whole experience. Like you’re walking up stairs, and keep having to pause at every step.

Instant and selective updates. And that leads to my next thought.

Performance Flexing

I’m not exactly an aficionado of mid-2000s punk rock, but years of listening to the open theme of Burnout 3: Takedown* has drilled at least one line into my head:

“We are the lazy generation, no more standing out in line”

Frankly, it’s pretty true. The number one way to mount frustration and induce immediate session ejection by a user is by having a sluggish apps and sites. Heck, even “un-snappy” apps get side-eye within seconds, especially when use of said experience is required, or an obstacle to getting something else that they want.

Oh, the existential and also all-too-real dread. Photo by Clint Patterson on Unsplash.

As websites grow in stature and complexity, what seems fine in theory, good in development, and at least okay in testing on a certain band of devices can quickly turn nightmarish as it radiates out to users with old, poorly-maintained computers and phones. iOS is almost entirely founded on combating this concept, which is why Apple goes to great lengths to demand apps have at least the appearance of speed and minimize your ability to mess things up, to the point of excessive hand-holding and and giving you very clear signs it’s time to replace your phone.

But there is wisdom in this performance fixation: ships do not sink nearly so much when they run tight and light. And by ships, we in this case mean companies, products, apps, and other ways of making money.

So you can understand why Rich spends the entire middle portion of his presentation of Svelte on performance — a middle full of social media neener-neener boo boos where he can’t help but appear to like a JS framework boogieman to show off his baby’s slim-running chops.

Integration, Relationships

As wise as modularization is for integration of smaller programs into larger ones, something has always smelt a bit funny to me about breaking applications into more and more and more individual files, especially for something running for a front end app.

Yes, certain dues must be paid to convention, especially when working collaboratively, so that your co-authors and the inheritors of your work know where to look to find the functions they need. But at least to me, it starts to get confusing when you start to pile on file after file, folder after subfolder.

Is this really better than something more integrated, but well-labeled? Is heightened departmentalization within a node or front end increasingly just a way of forcing a developer to put names on things?

What I start to see when a module becomes a thick tower of folders. Photo by Angelo Giordano on Pixabay.

One of Svelte’s great strengths to me is it’s ability to handle the brain (JS), the body (CSS), and the bones (HTML) of your app all in the same place. Yes, you can break it up, importing in tertiary files just like any good modern JS script, but there’s something to be said for having a main file where you see where logic, style, and syntax meet.

Because fostering connections between those relationships that are readily apparent and easily parsed should be the goal of a developer’s file structure, not simply smearing their code across file after file like someone trying to spread butter so it covers every millimeter of bread.

Some good notes just do the job so much better for me.