Getting Started With Riot.js Part1 -Tutorial Savvy

Riot.js is a light weight JavaScript framework.It inherits the concept from Facebook React.js.
In React.js we work with Virtual DOM.You can find more details about React.js in my previous post.
In Riot.js we work with HTML DOM elements.
In this demo,”We will get started with Riot.js framework with a simple example”.
Riot.js can be installed using npm install riot –save command.The following screenshot shows the terminal with riot.js installation.

After successful installation of riot.js the updated fie structure looks like following screenshot.

We need to use riot+compiler.min.js file in the index.html file.If we are using Internet Explorer we need to use es5-shim.min.js and html5shiv.min.js file.
The riot+compiler.min.js file combinely contains the Riot.js library and in browser compiler.This in browser compiler picks the <script> element with type attribute value riot/tag.

We will create a custom Riot.js tag named <my-name> in this demonstration.It has a text expression binded to a name and display it inside H1 element.The following code shows the definition of <my-name> tag.

<script type="riot/tag">
    <my-name>
       <h1>My Name is: {text}</h1>
        this.text="Sandeep"
    </my-name>
</script>

The combined code is present in the index.html file.The following code shows the content of index.html file.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Riot.js Demo part1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.2/riot.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script>html5.addElements('todo')</script>
    <![endif]-->
</head>
<body>
    <my-name></my-name>

    <script type="riot/tag">
    <my-name>
        <h1>My Name is: {text}</h1>
        this.text="Sandeep"
    </my-name>
</script>

    <script>
        riot.mount('my-name');
</script>
</body>
</html>