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 a sample web component using Svelte.
Svelte JS 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…
Svelte JS has Staying Power
Performance & Memory Usage
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.
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 use a monorepo using the ctx-core toolkit. ctx-core has supporting architecture of a dependency injected ctx (context), agents, & build tools.
Here's an example component (Dossier__Search). It is composed of a search box, search results, & the detail of the selected person.
This example highlights the following features:
- computed properties
- two-way binding
- sub components