Riot: Simple Web Components

Riot

I've been using Polymer at work and have began to get into the component mindset. Polymer is a good option, but it definitely focuses on the latest and greatest. There are other alternatives like React and I'm sure a few others. I wanted to find somethings small and simple. When I'm writing HTML, I want to write HTML, not JavaScript. I didn't want to change my whole belief system like I did when I learned Angular.

Why I Chose Riot

I came across Riot. It seemed to make me feel the warmest and fuzziest inside based on the way I do things. Some of you reading this may not agree with my reasoning, but here are some of the reasons I chose Riot.

  1. It is a super small code base.
  2. It's super simple to create a new component.
  3. Easy to use for templating or replacing repetitive HTML or code.
  4. Works with more browsers without polyfills.
  5. You can compile your components really easily and organize them.
  6. It just seems way easier.

Riot still compiles the components to a JavaScript file, and I can even write the code like it would compile if I didn't want to use the compiler, but I prefer to write HTML in an HTML file.

Flexibility

You can add components to any project. You could even build custom components and use them within a WordPress blog. There is a ton of flexibility that can come from them. You can also reuse your components. Build a reusable UI library of your own.

Simple Example

As very simple example of how you could use Riot might be for icons or logos. Using SVG images as backgrounds works but you can't manipulate their appearance as easily. Embedding the SVG code directly in your page allows you to manipulate it's appearance. When you embed it in the page, you can change the fill directly or manipulate it with CSS. Here are some snippets of ways you might use Riot to create a reusable icon or SVG.

Riot Code (basic-logo.tag)

<basic-logo>  
  <svg viewBox="0 0 296 296" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
      <path d="M163.173794,98.1624598 C164.36818,103.247901 165,108.550166 165,114 C165,152.107648 134.107648,183 96,183 C57.8923523,183 27,152.107648 27,114 C27,75.8923523 57.8923523,45 96,45 C117.152394,45 136.081739,54.5180008 148.738831,69.5047965 C151.413184,58.8719838 161.037292,51 172.5,51 C186.030976,51 197,61.9690236 197,75.5 C197,89.0309764 186.030976,100 172.5,100 C169.197965,100 166.048503,99.3467597 163.173794,98.1624598 Z M148,296 C229.738143,296 296,229.738143 296,148 C296,66.261857 229.738143,0 148,0 C66.261857,0 0,66.261857 0,148 C0,229.738143 66.261857,296 148,296 Z" fill="{{ color }}"></path>
    </g>
  </svg>
  <script>
    this.color = opts.color || #000000;
  </script>
</basic-logo  

HTML Use

You have to compile that code into your riot build file, but then once you included the proper files, all you have to do is the following in your HTML.

...
<header>  
  <basic-logo class="small" color="red"></basic-logo>
</header>  
...

You can define the color in the HTML with the color attribute or in the CSS. I defined a fallback color in the riot tag file in case no color fill is defined.

CSS Use

In CSS you can style it based on the custom component tag. This is what SCSS or LESS might look like before it's compiled.

basic-logo {  
  svg {...} 
  g {...}
  path {...}
  &.small {
    svg {...} 
    g {...}
    path {...}
  }
  &.medium {...}
  &.large {...}
}

Warning: Don't Overuse Components

Be careful using components. Not everything needs to be a component. I'm still trying to tame my use of components. When to use and when not to use. The more the components the more complex the code can become. Sharing data between components and making sure the app updates the changes and binds the data can become a bit tricky.

Riot is Awesome!

That's it. I just wanted to get a post out there showing the basics of why I chose it with a simple example.