/ riot

Creating a Snazzy Counter with Riot.js

Web development is ever evolving and as is the amount of libraries available to make the process easier. Component-based development is certainly a hot topic in recent years and one of the pioneers in this space is Riot.js.

Riot offers a simple and elegant API that allows us to appropriately define our template, styles and script all with near no boiler plate. Combine that with a super small size (10.44kb gzip) means that we're able to create lean applications that focus on functionality.

Riot

Project Setup

To get Riot.js inside of our project, it's as simple as creating an index.html and including the script from the CDN.

<!DOCTYPE html>
<html>
 <head>
   <title>Snazzy Counter</title>
 </head>
 <body>
   <!-- Include the Riot.js compiler -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.6.1/riot+compiler.min.js"></script>
 </body>
</html>

Now that we've added Riot into our project, we can create a custom component. A component consists of a related template, styles and script with a given name. We can then mount and use our component in the DOM by adding it as a HTML tag.

For example, if we created a component named snazzy-counter, we'd be able to use this inside of our .html files as <snazzy-counter></snazzy-counter>. That's exactly what we'll be doing next!

Custom Component

We can now make a custom component named snazzy-counter.tag inside of our root. Any file extension can be used in this instance, but .tag is suggested for consistency.

To create our component, it's as simple as declaring the following:


<snazzy-counter>

  <style>
  </style>

  <p>The current number is: { currentNumber }</p>

  <script>
  </script>

</snazzy-counter>

As stated, it's super light weight. Let's first off investigate the style tag. To make our application truly snazzy, I believe that it has to have some form of colourful animation:

<style>
    :scope {
        animation: snazz 3s linear infinite;
        color: red;
        font-size: 100px;
    }

    @keyframes snazz {
        50% { color: blue; }
    }
</style>

This cycles our paragraph text between blue and red with a CSS animation. Next, we need to add the script to increment our counter:


<script>
    //Variables
    this.count = 0;
    
    //Increment count by +1.
    tick () {
        this.update({ count: ++ this.count});
    }
    
    //Call increment function once per second
    const counter = setInterval(this.tick, 1000);
    
    //When removing the component, clear the interval.
    this.on('unmount', () => clearInterval(counter));
</script>

Our component is now complete, we now need to actually add this to our project inside of our index.html:

Mounting Component

To mount our component so that it can be used inside of our project, we need to add our script below the Riot CDN. We can then call riot.mount and pass in our component's name:

<!DOCTYPE html>
<html>
 <head>
   <title>Snazzy Counter</title>
 </head>
 <body>
   <!-- Display the snazzy counter. -->
   <snazzy-counter></snazzy-counter>

   <!-- Include the Riot.js compiler -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.6.1/riot+compiler.min.js"></script>

   <!-- Include our component --> 
   <script src="snazzy-counter.tag" type="riot/tag"></script>
   
   <!-- Enable the component for use in project -->
   <script>
     riot.mount('snazzy-counter');
   </script>
 </body>
</html>

Tada! We've then created our first component with Riot.js.

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More