Tech and Media Labs
This site uses cookies to improve the user experience.




Riot.js Tutorial

Jakob Jenkov
Last update: 2017-04-12

Riot.js is a JavaScript framework that is centered around the idea of custom, reusable HTML tags. Riot.js enables you to implement custom HTML tags and reuse them across pages and web apps. In that way Riot.js is based on the same ideas as Web Components.

Riot.js is compact. The Riot.js JavaScript files are reasonably small. Riot.js is also reasonably simple to use, and reasonably consistent and intuitive once you learn it.

Riot.js is similar to Polymer and React.JS but is more focused and thus more compact. By focused I mean it has less features, but has the most commonly used features.

Riot.js Core Concepts

The core concepts of Riot.js are:

  • HTML tags
  • Scoped CSS styles
  • HTML templating
  • Event handlers
  • Yield (passing HTML into tags)
  • Loops
  • Mixins
  • Observables
  • Routing

These concepts will be explained in their own texts in this tutorial.

You can find the Riot.js website here:
http://riotjs.com/

Riot.js Example

To give you an idea of how Riot.js code looks, here is a Riot.js example. The example defines an HTML tag and uses it inside the same HTML file. This is possible with small HTML tags. With bigger HTML tags you will normally put the HTML tag definition in its own file.

HTML file:

<!DOCTYPE html>
<html>
<head>
    <script src="riot+compiler.js"></script>
</head>
<body>

<mytag></mytag>

<script>
    var tagHtml = "<h1>Riot.js Tag!</h1>";

    riot.tag("mytag", tagHtml);
    riot.mount("mytag");
</script>

</body>
</html>

The Riot.js function call riot.tag(...) defines the tag named mytag. The function call riot.mount(...) mounts all the mytag tags in the HTML page. A Riot.js HTML tag must first be defined, then mounted.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC