So after the ups and downs of the javascript framework madness, I finally feel at home with RiotJS. It doesn't seem many people feel the way I do about it, but that doesn't mean much. It seems like everybody has has a preference of what framework to go with and why. Here is my why for RiotJS.

After the years of developing with jQuery and the original bad boy Prototype. I always felt like something was missing, something was wrong. The term jQuery spaghetti code became very familiar very fast. Don't get me wrong, jQuery and others served their purpose, and still do today.

Enter the Javascript framework era, with new libraries popping up left and right. My first experience into the new framework world was Ember.js. Ember seemed like everything I could have hoped for and more. I was so excited that I jumped on a plane and went to Ember Conf. After a lot of head scratching and failed attempts I didn't feel at home with Ember. I felt it had structure and was powerful for massive web applications. But it left me lingering for something simpler and more familiar. After building out a simple application a new update for Ember came out, wait what? Almost everything seemed to change, and this meant my app would need to be overhauled to work with newer versions of Ember.

The search continues...

After researching several more options (KnockoutJS, BackboneJS, Angular, and more), I felt the same. I did like the way Backbone was documented and structured. But the way it handled views made me feel like it just wasn't natural implementation into HTML / CSS. Spending years learning the basics, didn't make me eager to jump into another world.

Enter PolymerJS! Whoa, I think we have something here. It felt natural to build web components, with three basic essentials. HTML + CSS + Javascript. This felt like the holy grail. We re-developed some internal apps overnight, and sent them to production quickly. The idea of the web component is amazing, and fixes so many bugs, styling conflicts, and document complexities. We were just so pumped about the future of polymer, and couldn't wait to see what was next. We developed more parts of the application with Polymer, and started to notice its laggy performance in browsers not chrome. More complicated loops, and components meant slow slow rendering times. Then Polymer 1.0 was released. They restructured a lot of the basics of Polymer for this reason. But it became to feel complex very quickly. We wanted to stick with Polymer, but just couldn't get over the performance / compatibility issues that were happening. It seemed like Polymer was getting larger and larger, and less performant as we went continued.

Now the new kid on the block ReactJS blew up and was the new news. Hey, its also component based, and uses some awesome event dispatching like flux to maintain states. I could get into this. Running through several tutorials I thought it had a lot of promise, but I just couldn't get over how it nested HTML inside of Javascript. Example:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

I started having deja vu of the jQuery spaghetti days, because that is how some applications were built at that time, with HTML / templates nested all over the place in javascript. I knew there had to be something like Polymer but not so crazy.

Then there it was, Riot.js... When first looking at the docs for Riot, I was thinking this thing is too simple! But yeah, it is actually too simple, but that is the beautiful part about it. It brings back the extremely basic combination of the basics, HTML + CSS + Javascript. It uses the syntax and languages that everybody has been engraining into their brains for years, making it easy to pick up and develop. This example from Riot's site is exactly why I prefer Riot over React or other frameworks.

React Syntax Example:

import React from 'react'
import { render } from 'react-dom'

class Todo extends React.Component {
  state = { items: [], value: '' }
  handleSubmit = e =>
    e.preventDefault() || this.setState({ items: [...this.state.items, this.state.value], value: '' })
  handleChange = e => this.setState({ value: e.target.value })
  render() {
    return (
      <div>
        <h3>TODO</h3>
        <ul>
          {this.state.items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.value} onChange={this.handleChange} />
          <button>Add #{this.state.items.length + 1}</button>
        </form>
      </div>
    )
  }
}

render(<Todo />, mountNode)

Compared to same component with RiotJS

<todo>
  <h3>TODO</h3>

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

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

  this.items = []

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

Unfortunately RiotJS doesn't have a large community and following like React or some of the other guys. I sure would like to see more adoption and more support for RiotJs in the future. It sure does seem like the people behind RiotJS believe in their framework based on the constant updates and fixes they are always rolling out. I hope that anyone debating about javascript frameworks takes a serious look at RiotJS to see if it is for them.