Setting up Riot

1. Lesson of RiotJS

In this first lesson you get to know how to enable Riot and write your first App.

Martin Muzatko Written by Martin Muzatko
on

In Riot, parts of an application or the application itself, are based on custom HTML tags. The display of data happens in HTML itself, similar to template engines you maybe already know, like mustache or handlebars. You don't have to write complex DOM manipulation tasks. The view layer of Riot is powerful enough to provide the functionality to create interactive UI.

If you know HTML and a little bit of Javascript, you already know how to write apps with RiotJs.

Let's get started

Grab a copy of the latest riot release, either by downloading it from their page. If you are not compiling your UI (you don't have to), get the riot+compiler.min.js.
If you prefer to use your favorite package manager, use one of the commands below:

BASH
yarn add riot
// or
npm install riot --save
// or
bower install riot

If you are not using any build setup like webpack. Add riot to your website:

HTML
<head>
    <script src="https://raw.githubusercontent.com/riot/riot/master/riot+compiler.min.js"></script>
</head>

Below you can find a tiny demo. Don't worry! You will get there in no time :)

RIOT
<developer-hobbies>
  <span>I love developing <b>{ jobs[job % jobs.length] }</b></span>
  <script>
    this.job = 0
    this.jobs = ['tools', 'single page applications', 'mobile-first apps', 'software']
    setInterval(
        function(){
            this.job++
            this.update()
        }.bind(this), 
        2500
    )
  </script>
</developer-hobbies>
<script type="riot/tag"> <developer-hobbies> <span>I love developing <b>\{ jobs[job % jobs.length] \}</b></span> this.job = 0 this.jobs = ['tools', 'single page applications', 'mobile-first apps', 'software'] setInterval( function()\{ this.job++ this.update() \}.bind(this), 2500 ) </developer-hobbies> </script> <developer-hobbies></developer-hobbies>

With only a few lines of html and javascript, we can build all different kinds of applications.

Coming from frameworks that are way harder to grasp, I figured there are only a few things I have to take care of, but still have full control.

  • Defining data - you just have to assign values to variables, you use the this for that to set the data.
  • Attaching data to layout - you don't have to call extra render functions or select DOM elements manually.
  • How logic, data and layout is separated is your decision.

The curly brackets are called expressions, and they are 100% javascript (without the need of "this"). Everything you can do in Javascript, you can do in curly brackets. You can call functions, variables, do inline Math equations.

Attention: In order for Riot to recognize what part of your application is HTML and what is Script, Riot searches for the last HTML tag in your application to determine if everything after that is JS or HTML. So having Text-only Applications works only if you create a script part. This can be empty if needed.

Mounting & Loading

Besides writing the HTML, you also have to mount the Riot-Tag in order to work. In the above example, I already prepared that for you. Here is how that may look like:

HTML
<application></application>
<script type="riot/tag" src="js/application.html"></script>
<script type="text/javascript">
    riot.mount('*')
</script>

Of course, if you use npm and webpack, you can use an even more delightful syntax.

JAVASCRIPT
import riot from 'riot'
import './application.html'
document.body.innerHtml = '<application></application>'
riot.mount('*')

Mount exists, to fully put you in control on how and when to load extra modules of your application. You decide what name you give your riot-powered tags. the tag doesn't have to be application. It doesn't have to be a js file either. For your code editor, it may be better to have the extension something that is recognized as html (since, this is all there really is) So app.html works as well.

Next Steps

If you haven't done it already, set up a new folder and embed riot. Load the website and write your first tag with your editor of choice. If you are overwhelmed with the options, you can start in an online editor. I have a template prepared for you.

Create your first riot-app online

If you haven't touched a line of javascript other than some jquery before, you will soon learn what basics you will need to create dynamic content. While riot does require little knowledge about data formats like arrays and objects and basic Math - depending on the component you need.

Most of the time you will only need a few variables to define the state of dropdowns (are they open/ or closed?), current carousel slide number or positon of items on a timeline. In the next lessons, I will guide you through other features of riot, that you can put to good use. You will learn how to create interactive parts of your website and what little javascript is required to write that.

You can find the next lesson below.

How do you build re-usable interactive webcomponents without wasting your precious time bending the DOM to your needs? Get my latest content about building front-end web-apps delivered directly to your inbox and get free code samples for all the components I create.

Next Lesson

Tag Lifecycle


2. Lesson of RiotJS

There are a few event listeners we can listen to. Here is what they do and how to react.

See all Lessons