RIOT.JS Tutorial
Selected Reading
- RIOT.JS - Discussion
- RIOT.JS - Useful Resources
- RIOT.JS - Quick Guide
- RIOT.JS - Observables
- RIOT.JS - Mixin
- RIOT.JS - Loops
- RIOT.JS - Accessing DOM
- RIOT.JS - Event Handling
- RIOT.JS - Yield
- RIOT.JS - Conditional
- RIOT.JS - Styling
- RIOT.JS - Expressions
- RIOT.JS - Tags
- RIOT.JS - First Application
- RIOT.JS - Environment Setup
- RIOT.JS - Overview
- RIOT.JS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
RIOT.JS - Quick Guide
RIOT.JS - Quick Guide
RIOT.JS - Overview
RIOT.js is a very small size/pghtweight Web Component based UI pbrary to develop web-apppcations. It combines the benefits of React.JS and Polymer with very concise implementation and simple constructs to learn and use. It minified version is nearly of 10KB size.
Following are the key features of RIOT.js
Expression Bindings
Very small payload during DOM updates and reflows.
Changes propagates downwards from parent tags to children tags/controls.
Uses pre-compiled expressions and cache them for high performance.
Provides good constrol over pfecycle events.
Follows Standards
No proprietary event system
No dependency on any polyfill pbraries.
No extra attributes added to existing HTML.
Integrates well with jQuery.
Core values
RIOT.js is developed considering the following values.
Simple and minimapstic.
Easy to learn and implement.
Provide Reactive Views to build user interfaces.
Provide Event Library to build APIs with independent modules.
To take care of apppcation behaviour with browser back button.
RIOT.JS - Environment Setup
There are two ways to use RIOT js.
Local Installation − You can download RIOT pbrary on your local machine and include it in your HTML code.
CDN Based Version − You can include RIOT pbrary into your HTML code directly from Content Depvery Network (CDN).
Local Installation
Go to the to download the latest version available.
Now put downloaded riot.min.js file in a directory of your website, e.g. /riotjs.
Example
Now you can include riotjs pbrary in your HTML file as follows −
<!DOCTYPE html>
<html>
<head>
<script src = "/riotjs/riot.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
This will produce following result −
CDN Based Version
You can include RIOT js pbrary into your HTML code directly from Content Depvery Network (CDN). Google and Microsoft provides content depver for the latest version.
Note − We are using CDNJS version of the pbrary throughout this tutorial.
Example
Now let us rewrite above example using jQuery pbrary from CDNJS.
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - First Apppcation
RIOT works by building custom, reusable html tags. These tags are similar to Web components and are reusable across pages and web apps.
Steps to use RIOT
Import riot.js in the html page.
<head> <script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script> </head>
Start a script section and define tag content as html. Script can also be included which we ll see later in the tutorial.
var tagHtml = "<h1>Hello World!</h1>";
Define a tag using riot.tag() method. Pass it the name of the tag, messageTag and variable containing tag content.
riot.tag("messageTag", tagHtml);
Mount the tag using riot.mount() method. Pass it the name of the tag, messageTag. Mounting process mounts the messageTag in all its occurrences in the html page. MessageTag tag should be defined using riot.js prior to mounting.
riot.mount("messageTag");
</script>
Following is the complete example.
Example
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Tags
RIOT works by building custom, reusable html tags. These tags are similar to Web components and are reusable across pages and web apps. When you include the RIOT framework in your HTML page, the imported js creates a riot variable pointing to a riot object. This object contains the functions which is required to interact with the RIOT.js pke creating and mounting tags.
We can create and use tags in two ways.
Inpne HTML − By calpng riot.tag() function. This function takes the tag name and tag definition to create a tag. Tag definition can contain HTML, JavaScript and CSS etc.
Seperate Tag file − By storing the tag definition in tag file. This tag file contains tag definition to create a tag . This file needs to be imported inplace of riot.tag() call.
<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<
Following is the example of inpne tag.
Example
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
This will produce following result −
Following is the example of external file tag.
Example
messageTag.tag
<messageTag> <h1>Hello World!</h1> </messageTag>
index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script src = "messageTag.tag" type = "riot/tag"></script>
<script>
riot.mount("messageTag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Expressions
RIOT js uses {} to define expressions. RIOT js allows following types of expressions.
Simple Expression − Define a variable and use within a tag.
<customTag>
<h1>{title}</h1>
<script>
this.title = "Welcome to TutorialsPoint.COM";
</script>
</customTag>
Evaluate Expression − Evaluate a variable when use in an operation.
<customTag>
<h2>{val * 5}</h2>
<script>
this.val = 4;
</script>
</customTag>
Get value from Options object − To get the value passed to tag via attributes.
Example
Following is the complete example of above concepts.
customTag.tag
<customTag>
<h1>{title}</h1>
<h2>{val * 5}</h2>
<h2>{opts.color}</h2>
<script>
this.title = "Welcome to TutorialsPoint.COM";
this.val = 4;
</script>
</customTag>
index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<customTag color="red"></customTag>
<script src = "customTag.tag" type = "riot/tag"></script>
<script>
riot.mount("customTag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Stypng
RIOT js tags can have their own style and we can define styles within tags which will affect only the content within the tag. We can also set a style class using scripts as well within a tag. Following is the syntax how to achieve stypng of RIOT tags.
custom1Tag.tag
<custom1Tag>
<h1>{title}</h1>
<h2 class = "subTitleClass">{subTitle}</h2>
<style>
h1 {
color: red;
}
.subHeader {
color: green;
}
</style>
<script>
this.title = "Welcome to TutorialsPoint.COM";
this.subTitle = "Learning RIOT JS";
this.subTitleClass = "subHeader";
</script>
</custom1Tag>
index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<h1>Non RIOT Heading</h1>
<custom1Tag></custom1Tag>
<script src = "custom1Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom1Tag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Conditional
Conditionals are constructs which are used to show/hide elements of RIOT tags. Following are the three conditionals RIOT supports −
if − add/remove element based on value passed.
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
show − shows an element using style = "display: " if passed true.
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
hide − hides an element using style = "display: none " if passed true.
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
Example
Following is the complete example.
custom2Tag.tag
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<h2 if = {show}>Welcome!</h1>
<h2 show = {showMessage}>Using show!</h2>
<h2 hide = {show}>Using hide!</h2>
<script>
this.showMessage = true;
this.show = false;
</script>
</custom2Tag>
custom2.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom2Tag></custom2Tag>
<script src = "custom2Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom2Tag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Yield
Yield is a mechanism to put external html content into a RIOT tag. There are multiple ways to do an yield.
Simple Yield − If we want to replace a single placeholder in tag. Then use this mechanism.
<custom3Tag> Hello <yield/> </custom3Tag>
<custom3Tag><b>User</b></custom3Tag>
Multiple Yield − If we want to replace multiple placeholders in tag. Then use this mechanism.
<custom4Tag> <br/><br/> Hello <yield from = "first"/> <br/><br/> Hello <yield from = "second"/> </custom4Tag>
<custom4Tag> <yield to = "first">User 1</yield> <yield to = "second">User 2</yield> </custom4Tag>
Example
Following is the complete example.
custom3Tag.tag
<custom3Tag> Hello <yield/> </custom3Tag>
custom4Tag.tag
<custom4Tag> <br/><br/> Hello <yield from = "first"/> <br/><br/> Hello <yield from = "second"/> </custom4Tag>
custom3.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom3Tag><b>User</b></custom3Tag>
<custom4Tag>
<yield to = "first">User 1</yield>
<yield to = "second">User 2</yield>
</custom4Tag>
<script src = "custom3Tag.tag" type = "riot/tag"></script>
<script src = "custom4Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom3Tag");
riot.mount("custom4Tag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Event Handpng
We can attach event to HTML elements in the similar way how we access HTML elements using refs object. As a first step we add a ref attribute to a DOM element and access it using this.ref in the script block of the tag.
Attach ref − Add ref attribute to a DOM element.
<button ref = "cpckButton">Cpck Me!</button>
Use the refs object − Now use the refs object in mount event. This event is fired when RIOT mounts the custom tag and it populates the refs object.
this.on("mount", function() {
console.log("Mounting");
console.log(this.refs.username.value);
})
Example
Following is the complete example.
custom5Tag.tag
<custom5Tag>
<form>
<input ref = "username" type = "text" value = "Mahesh"/>
<input type = "submit" value = "Cpck Me!" />
</form>
<script>
this.on("mount", function() {
console.log("Mounting");
console.log(this.refs.username.value);
})
</script>
</custom5Tag>
custom5.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom5Tag></custom5Tag>
<script src = "custom5Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom5Tag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Accessing DOM
We can access HTML elements using refs object. As a first step we add a ref attribute to a DOM element and access it using this.ref in the script block of the tag.
Attach ref − Add ref attribute to a DOM element.
<button ref = "cpckButton">Cpck Me!</button>
Use the refs object − Now use the refs object in mount event. This event is fired when RIOT mounts the custom tag and it populates the refs object.
this.on("mount", function() {
this.refs.cpckButton.oncpck = function(e) {
console.log("cpckButton cpcked");
return false;
};
})
Example
Following is the complete example.
custom6Tag.tag
<custom6Tag>
<form ref = "customForm">
<input ref = "username" type = "text" value = "Mahesh"/>
<button ref = "cpckButton">Cpck Me!</button>
<input type = "submit" value = "Submit" />
</form>
<script>
this.on("mount", function() {
this.refs.cpckButton.oncpck = function(e) {
console.log("cpckButton cpcked");
return false;
};
this.refs.customForm.onsubmit = function(e) {
console.log("Form submitted");
return false;
};
})
</script>
</custom6Tag>
custom6.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom6Tag></custom6Tag>
<script src = "custom6Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom6Tag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Loops
We can iterate through RIOT array of primitives or of Objects and create/update the html elements on the go. Using "each" construct we can achieve it.
Create array − Create an array of object.
this.cities = [
{ city : "Shanghai" , country:"China" , done: true },
{ city : "Seoul" , country:"South Korea" },
{ city : "Moscow" , country:"Russia" }
];
Add each attribute − Now use the "each" attribute.
<ul>
<p each = { cities } ></p>
</ul>
Iterate array of objects − Iterate the array using object properties.
<input type = "checkbox" checked = { done }> { city } - { country }
Example
Following is the complete example.
custom7Tag.tag
<custom7Tag>
<style>
ul {
pst-style-type: none;
}
</style>
<ul>
<p each = { cities } >
<input type = "checkbox" checked = { done }> { city } - { country }
</p>
</ul>
<script>
this.cities = [
{ city : "Shanghai" , country:"China" , done: true },
{ city : "Seoul" , country:"South Korea" },
{ city : "Moscow" , country:"Russia" }
];
</script>
</custom7Tag>
custom7.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom7Tag></custom6Tag>
<script src = "custom7Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom7Tag");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Mixin
Through Mixin, we can share common functionapty among tags. Mixin can be a function, class or object. Consider a case of Authentication Service which each tag should be using.
Define Mixin − Define mixin using riot.mixin() method before calpng mount().
riot.mixin( authService , {
init: function() {
console.log( AuthService Created! )
},
login: function(user, password) {
if(user == "admin" && password == "admin"){
return User is authentic!
}else{
return Authentication failed!
}
}
});
Initiapze mixin − Initiapze mixin in each tag.
this.mixin( authService )
Use mixin − After initiapzing, mixin can be used within tag.
this.message = this.login("admin","admin");
Example
Following is the complete example.
custom8Tag.tag
<custom8Tag>
<h1>{ message }</h1>
<script>
this.mixin( authService )
this.message = this.login("admin","admin")
</script>
</custom8Tag>
custom9Tag.tag
<custom9Tag>
<h1>{ message }</h1>
<script>
this.mixin( authService )
this.message = this.login("admin1","admin")
</script>
</custom9Tag>
custom8.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom8Tag></custom8Tag>
<custom9Tag></custom9Tag>
<script src = "custom8Tag.tag" type = "riot/tag"></script>
<script src = "custom9Tag.tag" type = "riot/tag"></script>
<script>
riot.mixin( authService , {
init: function() {
console.log( AuthService Created! )
},
login: function(user, password) {
if(user == "admin" && password == "admin"){
return User is authentic!
}else{
return Authentication failed!
}
}
});
riot.mount("*");
</script>
</body>
</html>
This will produce following result −
RIOT.JS - Observables
Observables mechanism allows RIOT to send events from one tag to another. Following APIs are important to understand RIOT observables.
riot.observable(element) − Adds Observer support for the given object element or if the argument is empty a new observable instance is created and returned. After this the object is able to trigger and psten to events.
var EventBus = function(){
riot.observable(this);
}
element.trigger(events) − Execute all callback functions that psten to the given event.
sendMessage() {
riot.eventBus.trigger( message , Custom 10 Button Cpcked! );
}
element.on(events, callback) − Listen to the given event and execute the callback each time an event is triggered.
riot.eventBus.on( message , function(input) {
console.log(input);
});
Example
Following is the complete example.
custom10Tag.tag
<custom10Tag>
<button oncpck = {sendMessage}>Custom 10</button>
<script>
sendMessage() {
riot.eventBus.trigger( message , Custom 10 Button Cpcked! );
}
</script>
</custom10Tag>
custom11Tag.tag
<custom11Tag>
<script>
riot.eventBus.on( message , function(input) {
console.log(input);
});
</script>
</custom11Tag>
custom9.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom10Tag></custom10Tag>
<custom11Tag></custom11Tag>
<script src = "custom10Tag.tag" type = "riot/tag"></script>
<script src = "custom11Tag.tag" type = "riot/tag"></script>
<script>
var EventBus = function(){
riot.observable(this);
}
riot.eventBus = new EventBus();
riot.mount("*");
</script>
</body>
</html>
This will produce following result −
Advertisements