RIOT.JS - Guia rápido

RIOT.js é uma biblioteca de UI baseada em componentes da Web de tamanho muito pequeno / leve para desenvolver aplicativos da web. Ele combina os benefícios do React.JS e do Polymer com uma implementação muito concisa e construções simples de aprender e usar. Sua versão reduzida tem quase 10 KB.

A seguir estão os principais recursos do RIOT.js

Expression Bindings

  • Carga útil muito pequena durante atualizações e refluxos de DOM.

  • As alterações se propagam para baixo das tags pais para as tags / controles filhos.

  • Usa expressões pré-compiladas e as armazena em cache para alto desempenho.

  • Fornece uma boa construção sobre eventos de ciclo de vida.

Segue Padrões

  • Nenhum sistema de evento proprietário

  • Sem dependência de nenhuma biblioteca polyfill.

  • Nenhum atributo extra adicionado ao HTML existente.

  • Integra-se bem com jQuery.

Valores fundamentais

RIOT.js é desenvolvido considerando os seguintes valores.

  • Simples e minimalista.

  • Fácil de aprender e implementar.

  • Fornece visualizações reativas para construir interfaces de usuário.

  • Fornece Biblioteca de Eventos para construir APIs com módulos independentes.

  • Para cuidar do comportamento do aplicativo com o botão Voltar do navegador.

Existem duas maneiras de usar o RIOT js.

  • Local Installation - Você pode baixar a biblioteca RIOT em sua máquina local e incluí-la em seu código HTML.

  • CDN Based Version - Você pode incluir a biblioteca RIOT em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

  • Vou ao https://riot.js.org para baixar a versão mais recente disponível.

  • Agora coloque baixado riot.min.js arquivo em um diretório do seu site, por exemplo, / riotjs.

Exemplo

Agora você pode incluir a biblioteca riotjs em seu arquivo HTML da seguinte maneira -

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/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>

Isso produzirá o seguinte resultado -

Versão baseada em CDN

Você pode incluir a biblioteca RIOT js em seu código HTML diretamente da Content Delivery Network (CDN). O Google e a Microsoft fornecem entrega de conteúdo para a versão mais recente.

Note - Estamos usando a versão CDNJS da biblioteca em todo este tutorial.

Exemplo

Agora vamos reescrever o exemplo acima usando a biblioteca jQuery do CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/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>

Isso produzirá o seguinte resultado -

RIOT funciona criando tags html reutilizáveis ​​e personalizadas. Essas tags são semelhantes aos componentes da Web e são reutilizáveis ​​em páginas e aplicativos da Web.

Passos para usar RIOT

  • Importe riot.js na página html.

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

  • Inicie uma seção de script e defina o conteúdo da tag como html. O script também pode ser incluído, o que veremos mais tarde no tutorial.

var tagHtml = "<h1>Hello World!</h1>";

  • Defina uma tag usando o método riot.tag (). Passe para ele o nome da tag, messageTag e variável que contém o conteúdo da tag.

riot.tag("messageTag", tagHtml);

  • Monte a tag usando o método riot.mount (). Passe para ele o nome da tag, messageTag. O processo de montagem monta a messageTag em todas as suas ocorrências na página html. A tag MessageTag deve ser definida usando riot.js antes da montagem.

riot.mount("messageTag");
</script>

A seguir está o exemplo completo.

Exemplo

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/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>

Isso produzirá o seguinte resultado -

RIOT funciona criando tags html reutilizáveis ​​e personalizadas. Essas tags são semelhantes aos componentes da Web e são reutilizáveis ​​em páginas e aplicativos da Web. Quando você inclui a estrutura RIOT em sua página HTML, o js importado cria uma variável riot apontando para um objeto riot. Este objeto contém as funções que são necessárias para interagir com o RIOT.js, como criar e montar tags.

Podemos criar e usar tags de duas maneiras.

  • Inline HTML- Chamando a função riot.tag (). Esta função usa o nome e a definição da tag para criar uma tag. A definição da tag pode conter HTML, JavaScript e CSS etc.

  • Seperate Tag file- Armazenando a definição da tag no arquivo de tag. Este arquivo de tag contém a definição de tag para criar uma tag. Este arquivo precisa ser importado no lugar da chamada riot.tag ().

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

A seguir está o exemplo de tag embutida.

Exemplo

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/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>

Isso produzirá o seguinte resultado -

A seguir está o exemplo de tag de arquivo externo.

Exemplo

messageTag.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/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>

Isso produzirá o seguinte resultado -

RIOT js usa {} para definir expressões. RIOT js permite os seguintes tipos de expressões.

  • Simple Expression - Defina uma variável e use dentro de uma tag.

<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
   </script>
</customTag>

  • Evaluate Expression - Avalie uma variável ao usar em uma operação.

<customTag>
   <h2>{val * 5}</h2>
   <script>
      this.val = 4;
   </script>
</customTag>

  • Get value from Options object - Para obter o valor passado ao tag via atributos.

Exemplo

A seguir está o exemplo completo dos conceitos acima.

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/libs/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>

Isso produzirá o seguinte resultado -

As tags RIOT js podem ter seu próprio estilo e podemos definir estilos dentro das tags que afetarão apenas o conteúdo dentro da tag. Também podemos definir uma classe de estilo usando scripts, bem como dentro de uma tag. A seguir está a sintaxe de como obter o estilo de tags RIOT.

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/libs/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>

Isso produzirá o seguinte resultado -

Condicionais são construções usadas para mostrar / ocultar elementos de tags RIOT. A seguir estão os três suportes condicionais do RIOT -

  • if - adicionar / remover elemento com base no valor passado.

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

  • show - mostra um elemento usando style = "display:' ' "se for verdadeiro.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

  • hide - oculta um elemento usando style = "display:'none' "se for verdadeiro.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

Exemplo

A seguir está o exemplo completo.

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/libs/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>

Isso produzirá o seguinte resultado -

Rendimento é um mecanismo para colocar conteúdo html externo em uma tag RIOT. Existem várias maneiras de fazer um rendimento.

  • Simple Yield- Se quisermos substituir um único marcador de posição na tag. Então use este mecanismo.

<custom3Tag>
   Hello <yield/>
</custom3Tag>
<custom3Tag><b>User</b></custom3Tag>

  • Multiple Yield- Se quisermos substituir vários marcadores de posição na tag. Então use este mecanismo.

<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>

Exemplo

A seguir está o exemplo completo.

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/libs/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>

Isso produzirá o seguinte resultado -

Podemos anexar eventos a elementos HTML da mesma forma como acessamos elementos HTML usando o objeto refs. Como primeira etapa, adicionamos um atributo ref a um elemento DOM e o acessamos usando this.ref no bloco de script da tag.

  • Attach ref - Adicione o atributo ref a um elemento DOM.

<button ref = "clickButton">Click Me!</button>

  • Use the refs object- Agora use o objeto refs no evento de montagem. Este evento é disparado quando o RIOT monta a tag personalizada e preenche o objeto refs.

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

Exemplo

A seguir está o exemplo completo.

custom5Tag.tag

<custom5Tag>
   <form>
      <input ref = "username" type = "text" value = "Mahesh"/>
      <input type = "submit" value = "Click 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/libs/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>

Isso produzirá o seguinte resultado -

Podemos acessar elementos HTML usando o objeto refs. Como primeira etapa, adicionamos um atributo ref a um elemento DOM e o acessamos usando this.ref no bloco de script da tag.

  • Attach ref - Adicione o atributo ref a um elemento DOM.

<button ref = "clickButton">Click Me!</button>

  • Use the refs object- Agora use o objeto refs no evento de montagem. Este evento é disparado quando o RIOT monta a tag personalizada e preenche o objeto refs.

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

Exemplo

A seguir está o exemplo completo.

custom6Tag.tag

<custom6Tag>
   <form ref = "customForm">
      <input ref = "username" type = "text" value = "Mahesh"/>
      <button ref = "clickButton">Click Me!</button>
      <input type = "submit" value = "Submit" />
   </form>
   <script>
      this.on("mount", function() {
         this.refs.clickButton.onclick = function(e) {
            console.log("clickButton clicked");
            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/libs/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>

Isso produzirá o seguinte resultado -

Podemos iterar por meio do array RIOT de primitivas ou de objetos e criar / atualizar os elementos html em movimento. Usando "cada" construção, podemos alcançá-lo.

  • Create array - Crie uma matriz de objeto.

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

  • Add each attribute - Agora use o atributo "each".

<ul>
   <li each = { cities } ></li>
</ul>

  • Iterate array of objects - Iterar a matriz usando as propriedades do objeto.

<input type = "checkbox" checked = { done }> { city } - { country }

Exemplo

A seguir está o exemplo completo.

custom7Tag.tag

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </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/libs/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>

Isso produzirá o seguinte resultado -

Por meio do Mixin, podemos compartilhar funcionalidades comuns entre as tags. O Mixin pode ser uma função, classe ou objeto. Considere um caso de serviço de autenticação que cada tag deve usar.

  • Define Mixin - Defina o mixin usando o método riot.mixin () antes de chamar 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!'
      }   
   }
});

  • Initialize mixin - Inicialize o mixin em cada tag.

this.mixin('authService')

  • Use mixin - Após a inicialização, o mixin pode ser usado dentro da tag.

this.message = this.login("admin","admin");

Exemplo

A seguir está o exemplo completo.

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/libs/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>

Isso produzirá o seguinte resultado -

O mecanismo observáveis ​​permite que o RIOT envie eventos de uma tag para outra. As seguintes APIs são importantes para entender os observáveis ​​RIOT.

  • riot.observable(element)- Adiciona suporte de Observador para o elemento de objeto fornecido ou, se o argumento estiver vazio, uma nova instância observável é criada e retornada. Depois disso, o objeto é capaz de disparar e ouvir eventos.

var EventBus = function(){
   riot.observable(this);
}

  • element.trigger(events) - Execute todas as funções de retorno de chamada que ouvem o evento dado.

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
}

  • element.on(events, callback) - Ouça o evento fornecido e execute o callback cada vez que um evento for disparado.

riot.eventBus.on('message', function(input) {      
   console.log(input);
});

Exemplo

A seguir está o exemplo completo.

custom10Tag.tag

<custom10Tag>
   <button onclick = {sendMessage}>Custom 10</button>
   <script>
      sendMessage() {
         riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
      }
   </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/libs/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>

Isso produzirá o seguinte resultado -