@Mikhail.Angelov

Riot.js

Обзор еще одного UI фраймворка

— У нас, когда долго бежишь, непременно попадаешь в другое место.

— Ну, а здесь, знаешь ли, приходится бежать со всех ног, чтобы только остаться на том же месте, а чтобы попасть в другое место, нужно бежать вдвое быстрее.

Алиса и Королева обсуждают Java-Script стек

<todo>

  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>


  <style>
    h3 {
      font-size: 14px;
    }
  </style>


  <script>
    this.items = []

    add(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>


riot.tag2('todo', 

'<h3>{opts.title}</h3> 
<ul> <li each="{item, i in items}">{item}</li> </ul> 
<form onsubmit="{add}"> <input ref="input"> 
<button>Add #{items.length + 1}</button> </form>', 

'todo h3,[data-is="todo"] h3{ font-size: 14px; }', 
'', 

function(opts) {
    this.items = []

    this.add = function(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }.bind(this)
});

Монтирование тега


//somewhere in index.html

<todo></todo>

<script>riot.mount('todo')</script>

События жизненного цикла компонента


<todo>

  this.on('before-mount', function() {
    // before the tag is mounted
  })

  this.on('mount', function() {
    // right after the tag is mounted on the page
  })

  this.on('update', function() {
    // allows recalculation of context data before the update
  })

  this.on('updated', function() {
    // right after the tag template is updated after an update call
  })

  this.on('before-unmount', function() {
    // before the tag is removed
  })

  this.on('unmount', function() {
    // when the tag is removed from the page
  })

  // curious about all events ?
  this.on('*', function(eventName) {
    console.info(eventName)
  })

</todo>

Обновление компонента


this.update()

Свойства компонента


<script>
riot.mount('my-tag', { title: 'My TODO app', items: [ ... ] })
</script>

//------------

<my-tag>

  <!-- Options in HTML -->
  <h3>{ opts.title }</h3>

  // Options in JavaScript
  var title = opts.title

</my-tag>

Html директивы

if
show/hide
each

Сборка

In-browser compilation
Pre-compilation

Пример класса для роутера


class Router{
  constructor(mainSelector){
    this.routes = [];
    window.addEventListener("hashchange", () => {
      this.routes.forEach(route=>{
        if(location.hash.indexOf(route.hash)>=0){
          riot.mount(mainSelector, route.tag)
        }
      })
    })
  }

  go(hash){
    location.hash = hash
  }

  register(route){
    this.routes.push(route)
  }
}

Пример SPA приложения на Riot.js.

Спасибо за внимание!

https://mikhail-angelov.github.io/presentation-riot/