Featured image

Photo by Aryan Singh on Unsplash

React was my go-to choice for many years

On October 14, 2015, I hosted the inaugural React Vancouver meetup. It was at a point were I had used React for the better part of the year and wanted to bring like-minded developers together.

React back then was, dare I say it, revolutionary in the web frontend world. Compared to the alternatives such as jQuery, Backbone.js or Angular 1.x, developing with React felt intuitive, refreshing and productive. Personally, the idea of isolated building blocks (aka components) really appealed to me as it naturally led to a structured, well organized and more maintainable code base.

Over the coming years, I kept a close eye on Angular 2.x , Vue et al but none felt like a wortwhile choice to jump ship.

Then I learned about Svelte

I first learned about Svelte in mid 2018, almost a year before version 3.0 was released (see below). “Computer, build me an app.” by Rich Harris is what got me hooked on Svelte.

If you’re not familiar with Svelte (https://svelte.dev/), please go to the website and spend 5 minutes reading the intro.

Read it? Really? Excellent ?

Once I watched the video, the main question in my mind was whether or not it’s worth learning Svelte and starting to use it for new or even existing projects. In all fairness, Svelte impressed me but it still wasn’t enough to embrace it fully.

Svelte 3.x

April 22, 2019 – Svelte 3: Rethinking reactivity was the blog post I had been waiting for.

Please take some time to read the blog post and watch the video – it’s about spreadsheets but I promise it’s fun ?

Why was this such a big deal? For one, the Svelte team had been talking about version 3 quite a bit and I wanted to see it in action. On the other hand, Svelte and its promise excited me even more than React did when first I heard of it.

I mentored web developers at that time and had spent quite a bit of time bringing them up to speed on React. Things like JSX, CSS-in-JS, Redux, create-react-app, SSR and other concepts needed to be learned, understood and to a certain degree mastered in order to develop React apps.

None of that was necessary with Svelte.

Hello {name}!


Simple enough? I agree. In fact, it is so simple I recommend it to my mentees who are new to web development.

Real quick, what’s going on in that code?

The script tag is where the component’s logic lives.

The style tag defines this component’s CSS – none of this leaks outside the component, so we can safely use h1 and it only applies to this component. It’s real CSS, not a Javascript object that pretends to be CSS or a string literal that pretends to be CSS.

At the bottom is the component’s HTML. Use variables with {myVariable}. Compared to React’s JSX, Svelte allows you to use the correct HTML tags such as for, class instead of forHtml and className. See “Differencs In Attributes” in the React documentation for a list of all attributes that are not standard HTML.

Let’s rebuild React examples

To give you an idea of what Svelte looks like compared to React, let’s rebuild what’s listed on https://reactjs.org/.

A Simple Component

See the code snippet above.

A Stateful Component

Interactive demo

Seconds: {seconds}

React: 33 lines

Svelte: 6 lines

An Application

Interactive demo



    {#each items as item}
  • {item.text}
  • {/each}

React: 66 lines

Svelte: 43 lines

A component Using External Plugins

Interactive demo