Riot.js-- a small but beautiful JS framework

What Riot.js that?

Riot has all the necessary ingredients to create modern client application:

"Responsive" layer is used to create the user interface view
Event library for communication between the individual modules
URL used to manage routers and browser back button (Router)

Riot try not to use the rules mandatory, but to provide basic tools, I hope you can creatively use them. This flexibility will be a big architectural decisions at the application level returned to developers.

Why do we need a new UI library?

Simply put, it is with Reacta similar focus on viewlayers, can be understood as less bloated React + Polymer. Not reinvent the wheel, but the essence extracted from the existing tools, the tool constructed as simple as possible.

Riot What are the characteristics?

Riot support for custom labels on all browsers.
Reading-friendly

Custom tags allow you to use HTML to write complex user interface. Your application president in this way:

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

Virtual DOM
- Guarantee a minimum amount of DOM updates and data flow
- Support for custom server-side rendering label, single-language application support
Consistent with the standard
- No proprietary system event
- Rendering a DOM node can safely operate with other tools (library)
- Root HTML requires no additional elements or attributes data-
- Exist amicably with jQuery
Very low cost of learning
- Compared to other UI library, the number of the API method Riot provided to at least 10 to 100 times. That means less need to learn content. Books and guides need to read the documentation less.
- Proprietary content less, and more in line with standard components.

You can feel for, this is Riot wrote Todo:

<todo>

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

  <ul>
    <li each={ items }>
      <label class={ completed: done }>
        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
      </label>
    </li>
  </ul>

  <form onsubmit={ add }>
    <input name="input" onkeyup={ edit }>
    <button disabled={ !text }>Add #{ items.length + 1 }</button>
  </form>

  <script>
    this.disabled = true

    this.items = opts.items

    edit(e) {
      this.text = e.target.value
    }

    add(e) {
      if (this.text) {
        this.items.push({ title: this.text })
        this.text = this.input.value = ''
      }
    }

    toggle(e) {
      var item = e.item
      item.done = !item.done
      return true
    }
  </script>

</todo>

Very small volume, only 10.36KB after compression.
- Less bug
- Resolved faster and faster downloads
- Easy to embed. Library should be smaller than the entire application
- Maintenance workload is smaller

The basic principle of execution

A riot custom labels in your daily development from source to appear on the page is divided into three steps: the compiler (usually comes with the use of the official compilation tools), registration (riot.tag ()) and load (riot.mount ()) ,As shown below:

riot lifecycle

Custom Tag creation process is this:

Create a label instance
Label definition of JavaScript is executed
Expressions in HTML was first calculated for the first time to trigger "update" event
Tag is loaded (mount) onto the page, trigger "mount" event

Once loaded, the expression will be updated in the following opportunity:

When an automatic update event handler is invoked (e.g., toggle ToDo method in the above example). You can also set e.preventUpdate = true in the event handler to prohibit such behavior.
When the current instance this.update tag () method is called
Any ancestors this.update current label () is called. Updated one-way communication from father to son.
When riot.update () method is called, it will update all the expressions on the page.
Each label instance is updated, it will trigger the "update" event.

Since the first calculation expression occurs before the load, so it will not have a similar <img src={ src }>calculation unexpected problems like failure.

Similarities and differences with the Vue?

Now the domestic js framework was undoubtedly the most fire Vuejsa, Riot with their similarities:

Providing the response of formula (Reactive) and component (Composables that) view component.
Using template programmed, html, css, scriptunit of component in taga file.
End support services rendered.

difference:

Riot There are more close to native programming experience, you do not need to remember any commands directly onclick, onsubmityou can.
Small volume, but also add riot-router 11kb.
Vue development so far, it has been slightly bloated, Riot source code easier to read, customization.

Riot usage scenarios?

From the beginning of 1kb version 1.0 to the current version 3.8, Riot has stabilized, can be used in a production environment.

But in the country, very little relevant information, so more suitable for relatively high customization projects.
If you are tired of using Vue, React, you can also try a more approachable Riot, in case you have mastered one of the first two, almost no learning costs.
Relatively speaking, miniature scene would be more suitable Riot, do not want too many external dependencies, and the need of the components, the ability to more modern framework for data-driven and so on.

Building tools

Riot building tools easy to use is not much, so I wrote a reference vue-webpack two scaffolding can be quickly put to use:

the Simple-Riot , simple and quick start.

StartKit-Riot , tool chain and more comprehensive.