How Svelte Cybernetically Enhances Web Development

For our 7th Close-up Magic meetup, we welcomed Sean Mullen and Mattias Inokuchi to talk about:

• How Svelte Kit differentiates itself from other frameworks like React and Angular.
• The developer experience Svelte offers developers.
• The gaps Svelte needs to fill before it can rank as the #1 UI framework.

Here are a few of our favorite takeaways.

Key Takeaways

Svelte uses a smarter programming model than React 🧠

Like React, Svelte is a UI framework that makes it easier to write components. But instead of using a virtual DOM to track state changes and to re-render pages, Svelte pretty much avoids it. This is because React’s virtual DOM introduces unnecessary work for developers that, if done incorrectly, results in a slow performing app.

“The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to ‘death by a thousand cuts’ with no clear bottleneck to aim at once it’s time to optimise.” (src)

React’s diffing algorithm cannot identify which element in the DOM is a state that is actually prone to changes, and its JSX syntax makes it easier for developers to write components that slows the app down.

Instead of using a virtual DOM and delegating the diffing work to the browser, Svelte puts on the smart compiler hat, figures out which states could change in your app at build time, and turns your code into tiny Vanilla JavaScript code. Pretty neat, huh?

New coders will fall in love with Svelte 👏

Sean, Mattias, and I agreed on a bunch of things during our talk. My favorite was the fact that Svelte is super beginner friendly for new programmers. This is because Svelte is made up of the OG tools of web development — HTML, JavaScript, and CSS. If you write any valid HTML/CSS/JS code, it will also be valid in a Svelte app.

“As a beginner, it’s easy to recognize HTML and CSS compared to React.” — Mattias Inokuchi

Since coders are saved from studying DOM manipulation, how to write in JSX, React Hooks, and more, there’s less barrier to entry and more time to get something working faster.

Svelte is the fastest growing frontend JS framework ⚡️

One of the questions I asked Sean and Mattias is, “Will Svelte be able to capture the market share it needs to grow?” Although there weren’t any definitive answers, we discussed the positive indicators of Svelte’s continued growth.

Sean expressed that Svelte is a framework that he’s recommending to his friends. And it appears this type of word-of-mouth marketing in tech communities like Tech Twitter, Reddit and Discord is working because Svelte was found to be the fastest growing framework in August, 2021 based on NPM weekly downloads (src).

“I’ve never been in a position where I can’t find a library to do what I want. Anything that you can do in another framework, it’s either already part of svelte or there’s a library to do it. Or it’s just much easier to accomplish in Svelte in the first place.” — Sean Mullen

Sure, our key takeaways explain why developers love Svelte. But there’s more reason to love it. The blogs Rich Harris writes are always insightful and delightful, and the community behind Svelte is also super helpful.

💡 Ready to give Svelte a try? Follow the Guide Sean Mullen created here.

Q&A Session

At the end of the talk, we received a great question from one of our listeners.

Q: What do you think about integrating Svelte with Docker, Kubernetes, and working with environment variables?

Curious to know the answer? Make sure to watch the recording of the fireside chat below.

Interested in Close-up Magic?

If you ever want to be a special guest for Close-up Magic and talk about a tech you’re passionate about, schedule a chat with Maricris here.