How Svelte is Changing the Future of the Web

Evaluating Svelte as my front-end framework of choice.

Aug 7, 2022

Ross Robino

I have an idea, how should I build it?

Web development is a beautiful way to create products. They are accessible through screen readers and braille displays. Scalable globally in a few clicks with tooling like Vercel and Netlify. Flexible enough to run on a Galaxy Fold or a Nintendo Wii. The ability to create content that can be accessed by almost anyone, almost anywhere, by countless devices is powerful to say the least. Web tooling is important, it helps ensure that software developers can create the best products and ship them to the most people possible.

In front-end development we are faced with a barrage of solutions to choose from to solve problems. As I entered back into the world of front-end development, I found that Svelte’s developer experience enabled me to work effectively and efficiently to develop higher quality products.

Outdated

I wanted to create a web app after a 7 year hiatus from serious programming. I started again with the skills I learned in school. My Intro to Webpage Programming 101 class taught me the basics of HTML and CSS. This was my development tooling and process:

• Tooling - Notepad++, WinSCP
• Develop - draft my content, structure with HTML tags, and style with CSS. Type, refresh, repeat.
• Deploy - drag my project into the correct folder using WinSCP to upload to my school’s server.

It was fairly quick, and I had an good understanding of every character I typed.

I started with creating a website using the principles I remembered from this course. Almost every aspect of my tooling needed an upgrade. The basic functionality required for my app was to be able to send a request to an API, manipulate some data, and display it in a chart. I started my research for the best way to accomplish this.

What kind of bait do you use?

Tooling is incredibly important in any project whether you are building in a real or virtual environment. Humans love to utilize the best tools possible in order to make sure they are spending the least amount of time doing things that they don’t want to do.

Just like developers enjoy spending their time writing innovative code, Fishermen like to spend their time catching fish. Immense thought goes into each tool fishermen utilize to make sure they spend their time effectively. A fishing stack might consist of a boat, pole, line, hook, and bait. Everyone needs to determine the right stack for the job they are trying to accomplish.

I quickly realized that there is an infinite number of methods and stacks to accomplish these common requirements. I found I could not easily do this all from scratch. I read some articles about using front-end frameworks compared using vanilla HTML, CSS, and JavaScript. As you can imagine, I found a wide variety of opinions on the matter.

I wanted to get building and ship fast. I could not learn or even attempt to try out every option, and I had nothing to show after a few weeks of work in my spare time. After a hours of research and countless tutorials I needed to make a decision. I heard Scott Tolinski talking about Svelte on the Syntax.fm podcast. I looked it up and found that Svelte and SvelteKit were the tooling I was looking for.

Sin Tax

Syntax is a steep hill to climb as a beginner, Svelte was the smallest hill I could find. As someone who had a basic understanding of HTML, CSS, and JavaScript, Svelte’s syntax was comfortably familiar. I was spending much less time paying JavaScript boilerplate taxes and spending more time catching fish. There were less imports, functions, and returns. Script, markup, and styles working together in a simpler way.

How do I create a prop?

export let count = 0;

How do I render a list of items?

{#each dogs as dog}
	...
{/each}

How do I initialize the state of a component?

React:

const [count, setCount] = useState(0);

Svelte:

let count = 0;

To learn more about Svelte’s simple syntax, check out this post from Rich Harris discussing Svelte syntax compared with React and Vue.

I understood the code I was writing, and I immediately felt more comfortable with Svelte than any other front-end framework I had tried.

I came to the conclusion these efficiencies could greatly decrease my time to ship. First, I could get through the Svelte tutorial in just a couple days. Second, I knew I was coding with fewer errors. This could dramatically increase my efficiency in the long run. Svelte allowed me to save time on each line by eliminating key strokes and requiring less code to brain translation through its simpler syntax.

<One svelte=to bind:them/>

Some of the best tools are the ones that solve the widest variety of problems. Svelte and SvelteKit provide me with a flexible method to create a wide variety of products. From single components to entire applications Svelte can be utilized to build high quality products. Although Svelte’s community is far smaller other frameworks like React, Svelte is gaining traction. One of the most recent web apps released that has been exciting the Svelte community is the new Apple Music Player. This demonstrates how Svelte can be utilized for something as simple as this blog post to an enterprise application.

Levels of complexity

All of programming can be abstracted to different levels of complexity, from binary, to Python, to a “no-code” tool like Webflow. Abstraction has allowed programmers to have a better developer experience and get things done faster. Abstraction’s rival is flexibility. As languages and frameworks become more abstract and enable developers to work faster, they often limit them in what they can accomplish. Svelte takes a step forward in abstracting HTML, CSS, and JavaScript. It provides efficiency in the syntax and quality in final product delivered. Svelte manages to push the abstraction boundary while maintaining flexibility. Where you can use JavaScript, you can use Svelte.

Svelte not only enables developers to write less code with a carefully crafted developer experience, but also it enables them to ship less code resulting in a better final product. Svelte and SvelteKit allow me to build more performant and accessible websites right out of the box.

Innovative

In How Google Works Eric Schmidt and Jonathan Rosenberg discuss what makes a truly innovative product. They characterize innovation as being “new, surprising, and radically useful.”

Svelte takes a new approach to developer experience through being a compiler instead of a framework. This enables Svelte to have its own language and work outside the constraints of JavaScript when necessary. Regardless if you are a beginner or advanced developer, the clarity and familiarity of Svelte is undeniable.

Svelte is surprising in the flexibility it has amidst the extra layer of abstraction. Svelte can work where JavaScript works, it is unopinionated, flexible, and fast. I personally enjoy using SvelteKit, Astro, VS Code, Vercel, and Tailwind to create websites. I have found Svelte to be well supported by all of these with tutorials, extensions, adapters and plugins.

Svelte is radically useful for me to quickly create websites using the existing skills that I have. I am able to easily apply my skills and share code with others due to the simplicity of the language. Other people’s code is easier to understand with less boilerplate, resulting in smaller barriers to entry for open source contributions.

Thanks for reading!

Find an error in this post? Any updates are appreciated. Edit this post