Skip to content

Svelte JS from Riot JS

Brian Takita
Authors:Brian Takita
Posted on:July 4, 2017

Creating Web Components/Web Apps has never been more pleasurable. It's out with the old & in with the new. I converted my client's project to use Svelte JS from Riot JS. This post highlights some considerations why I chose Svelte & a sample web component using Svelte.

Creating Web Components/Web Apps has never been more pleasurable. It's out with the old & in with the new. I converted my client's project to use Svelte JS from Riot JS. This post highlights some considerations why I chose Svelte & a sample web component using Svelte.

sveltejs is a build-time isomorphic library that utilizes a transpilation process to build completely self-contained web components.

riot.js is a runtime isomorphic component library.

I recently converted this site to svelte from Metalsmith, which is a static site generator.

While it's easy to get stuck into the rat race of endless technological upgrades & porting to the latest hyped piece of tech…

Performance & Memory Usage

Despite beinga young library, svelte does quite well on krausest/js-framework-benchmark for Performance & Memory Usage. That's because, Svelte JS generates optimal javascript while not having the overhead of a runtime library. It's also going to have an advantage in page load time due to not requiring a runtime library to be loaded.

HTML-based Components

HTML is the lingua franca of the world wide web. HTML the lowest common denominator (developers, designers, non-technical) can work with. With Svelte, the HTML file is converted to be a Component. Components can use other Components.

I feel confident that I will continue to use Svelte for a long time. Since it's design is simple & well thought out (all of my use cases were supported with elegance), I don't expect to have upgrade pains that plague some of the larger frameworks out there.

APIs

Svelte's api idioms are well thought out. Development flow was coherent natural during the port from Riot.

For each of my professional clients, I usea monorepo using the ctx-core toolkit. ctx-core has supporting architecture of a dependency injected ctx (context), agents, & build tools.

You can read more about the features of svelte.