Riot js Interview questions

The core concepts of Riot.js includes:

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

• Simple to learn– Riot is a very small framework with a size of the only 9kb and there is not much to learn about it. In addition, it’s mostly vanilla JavaScript and HTML in which there is no new syntax like React JSX, which the users need to learn before using.
• High performance: Riot consists of a very fast runtime compiler, which is also available as part of user’s build step of JS. In addition to this, Riot also makes use of a simplified virtual DOM, which helps to update HTML and other very fast changes.
• An attraction for modules:  Riot.js is a component-based development, which is built around UI modules, known as tags, which provides modularity apart. Inspired by some of their own practices, it’s very simple to exchange Riot tags in between projects.

The main cons of Riot.JS are as follows:

• State management is difficult: There are no ways to manage the state in a component or between the components. There are no steps between a state update and rend ender, and when there is need of updating a tag, all its children will be also be updated. This increases the need for plumbing each time the user adds complexity to a Riot. Alternatively, the user could implement another library like Redux to keep state, which has its implications as well as challenges.
• Magic syntax: The Riot.JS development team made some odd choices when it comes to keeping to standards. There is some E56-like syntax, which is used in code examples that are not found elsewhere. Also, Riot.JS interprets user’s tag contents as JavaScript instead of HTML initially. For example, HTML attributes have no quotes.

The toggle function definition will throw an error in any program and there’s no <script> like tag around the JavaScript. Thus one can easily work around, but there is the possibility of a stumbling block for non-professional developers, which are bad for reusability of your code.

• Not strict enough: An app, which is built with Riot is just a big object, residing in the global scope, that the user can easily traverse and change if necessary. Even the internals are accessible too. When the app goes through problems it becomes tempting to build hacks and workarounds using the features. There may be unexpected side effects because of this are all too common in Riot.JS.

Riot.js has a special feature called the loop mechanism, which helps the users to generate HTML from large arrays of data. Users can loop with help of either an array of primitive data like strings, numbers or an array of objects.

Looping can be used in two ways:

• Looping is done Simple Values: For using a Riot.JS loop the user has to insert every attribute in the HTML element, which is to abstract the HTML which is generated by the loop. This is used inside the Riot.JS tag definition within the template HTML.
• Looping Through Objects: Riot.JS can loop through arrays of objects as well. Users can use Riot expressions to get access to the properties of each required object in the array. 

Riot.JS conditionals are its expressions which can completely show, hide or at all omit HTML elements from the HTML as Riot.JS tag are generates.

Riot.JS consists of the following conditionals:

• if
• show
• hide

The ‘if conditional’ in Riot.Js includes an HTML element when the condition specified becomes true. Otherwise, it will be excluded, which means it is completely left out of the HTML or the DOM. It won’t be there at all.

The show conditional of Riot.JS shows the HTML element if the condition, which has been specified is true. Otherwise, the HTML element will remain hidden. If hidden, the HTML element still remains a part of the HTML or the DOM. but it will just not be visible.

The hide conditional of Riot.JS is the opposite of the show conditional. The Hide conditional will hide the HTML element if the condition that is specified is true. Otherwise, the HTML element will be visible. If hidden, the HTML element still will be part of the HTML or the DOM but it will just not be visible.

Riot.js tags can be defined as reusable HTML tags, which the users can use in their Riot.js web applications. If in Riot.Js, a tag is implemented once the users can reuse it in multiple web pages or web applications as long as they are using Riot.js.

The users can define the HTML tags in two ways in Riot.js.

• Users can define a tag inline
• Users can define the tag in its own file and include that file in the HTML pages that make use of it