Riot vs Svelte

In one of my previous articles talking about how I thought svelte was revolutionary in what it does, someone brought up the library RiotJS, so I decided to give it a try.

Riot vs Svelte

In one of my previous articles talking about how I thought svelte was revolutionary in what it does, someone brought up the library RiotJS, so I decided to give it a try. In this article I will be going on the key differences I noticed, in terms of syntax, component structure, and some functionality differences that stood out to me when using it.

Maturity

One thing I noticed straight from the beginning is Riot felt a lot more mature and full featured, while they are similar in terms of a lot of things, such as trying to drive the "zero dependency" package scheme, and mainly only having developer dependencies, Riot definitely seemed to have a lot more functionality and power compared to Svelte.

An example of this is documentation, Riot's documentation was honestly really helpful and a joy to read, everything I needed to know was there and with examples. While svelte's documentation is nice, Riot's was a lot better to me in a lot of cases, and that's one thing I loved about trying it.

Component Structure

In terms of how you structure and layout components, Svelte and Riot are very similar, but there is one key difference I noticed in terms of how you lay out components in each library/framework, when it comes to making components in Svelte components don't necessarily have a "root" element compared to how they are in Riot, as an example, a basic component in Svelte looks like this

<script></script>
<style></style>
<example-component></example-component>

Now you might say here example-component is the root of the component, which in a sense it is, but notice how the parts of the structure aren't nested under a single DOM element or psuedo-element, now let's take a look at how Riot handles a component

<example-component>
  <script></script>
  <style></style>
  <!-- your html for the component here as well -->
</example-component>

This is one thing I didn't really like about Riot personally, due to everything being nested under a (pseudo-)element of sorts, everything is smashed together in a way, while as with Svelte components, the structure of the component is split up due to them not being forced into a nest.

Now this could be something that isn't enforced completely in Riot, but when I tried to do a element Svelte style where the sections of the component are split up the Riot component builder seemed to not like it.

Functionality

Once again the functionality of the two libraries are very similar, but Riot uses a bit of a different model for things like reactivity and data structure. While Svelte components automatically update when a variable in the <script> portion of the component, or a prop is updated it, Riot is a bit different in this case. Riot instead uses a state system, similar to other libraries such as react.

Let's take a look at a example comparison to how each library handles reactivity and state. Starting off with Svelte, the state management here is in a sense automatic, as Svelte handles the "state" of the component simply by the variables within it.

<script>
  let clicks = 0;
  function addClicks() { clicks += 1; }
</script>

<button onClick={addClicks}>Clicked {clicks} times</button>

Meanwhile in Riot, you have to manually create and update the state in a component for the component to update and re-render.

<clicker>
  <script>
    export default {
      state: { clicks: 0 },
      addClick() { 
        this.update({ clicks: this.state.clicks + 1 }); 
      }
    };
  </script>
  <button onclick={addClick}>Clicked {state.clicks} times</button>
</clicker>

While this can be nice, it does add a bit of complexity to using the library, and to noobies who don't really understand state really well this can make the library a tiny bit more difficult to use in my experience.

Another thing I noticed is how Riot handles importing components. While in svelte you simply just import the component and use it in your html, in Riot you have to in a sense "register" it with the component you want to use it in, for example

<app>
  <script>
    import Clicker from "./components/clicker.riot";
    export default {
      components: { Clicker },
    };
  </script>
  <Clicker />
</app>

While in svelte using components is as simply as importing and using it

<script>
  import Clicker from "./components/clicker.svelte";
</script>

<Clicker />

Setting things up

In terms of setting up a bare-bones project with each library it was pretty simple with both, just running command(s) to initialize them, however I personally didn't really like the default template for Riot, so I ended up making my own.

Final Words

I like both libraries! While Svelte is still very infantile compared to how many years Riot has been in development, it's a lot simpler in terms of using it. I can see myself using both libraries for projects, mainly using Riot for bigger projects that require a more robust component structure and Svelte for smaller, maybe personal projects. In the end both libraries do what they do well, and I can definitely see Riot and Svelte competing in the future possibly, but for now Riot is definitely more mature, and definitely more fully functional in terms of features.