Riot.js 超軽量UIライブラリ

ドーモ、onoGakkyです。 

JavascriptのUIライブラリ[Riot.js]が

楽しげだったので、紹介します。

Riot.js

特徴

- 圧倒的に小さい

  - v3.7.4で24KBくらい

- 記述が楽

  - HTML+CSS+JavaScriptをコンポーネントでまとめられる

記述例 

PugでRiotを書いてGulpでコンパイルする

- hello.tag (Riot.jsのタグ)

hello
  p hello { value }
  
  script.
    this.value = "world"

"{ value }"に"world"が置き換えられる

- index.pug (Riotで作ったタグを使う)

doctype html
html
  head
    title HelloRiot
    script(src="https://cdn.jsdelivr.net/npm/riot@3.7.4/riot.min.js")
  
  body
    hello
    
  script(src="tags/hello.js")
  script.
    riot.mount('*');

TagとPugって語感似ててかわいいですね。

- インストール

$ npm i gulp gulp-pug gulp-riot --save-dev

- gulpfile.js (Riot.jsのタグをコンパイル)

/**
 * pugファイルをdocsフォルダに変換して配置
 * tagファイルを変換してdocs/tags/[tagname].jsに配置
 */

const gulp = require('gulp');
const riot = require('gulp-riot');
const pug = require('gulp-pug');

var srcDir = 'src';
var libDir = 'build';

gulp.task('build:pug', () => {
  gulp.src('src/views/**/*.pug')
  .pipe(pug())
  .pipe(gulp.dest('docs/'));
});

gulp.task('build:riot', () => {
  gulp.src('src/tags/**/*.tag')  // タグファイルの場所
    .pipe(riot({
      type: 'es6',     // ES6で記述できる
      compact: true,   // 生成後ファイルのなくても良い空白とかを排除
      template: 'pug', // HTMLでなくPUGで記述できる
    }))
    .pipe(gulp.dest('docs/tags/')); // 生成後ファイルの場所
});

gulp.task('build', ['build:pug', 'build:riot'], () => {
  gulp.watch(['src/views/**/*.pug'], ['build:pug'])
  gulp.watch(['src/tags/**/*.tag'], ['build:riot'])
});

と、こんな感じでHelloWorldです。

静的気味なサイトや簡単なWebアプリならVue.js等を使うよりも

Riot.jsを使うほうが手っ取り早いかもしれませんね。

Electronアプリの場合にも使いやすそうです。

Riot.jsには他にもルータ機能やイベントハンドルの機能なんかもあるようです。

詳しくは公式ドキュメントをどうぞ。

私自身まだまだRiot.js勉強中なので、またなにかあれば記事を書きたいと思います。