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