Riot.jsがいい感じ

投稿日:2015年09月17日
カテゴリ: Riot , Webサイト制作 , プログラミング


こんにちは、フミリアです。

超軽量Webコンポーネントライブラリ Riot.js を使って自分用のWebアプリを書き始めています。

Riot.js

Webページをモジュール化して構築できるのと、node上でのビルドなしでさくっとUIが確認できる2点がとても楽です。

テキストエディタでHTMLページをコツコツ書いていた1990年代を思い出します。 ファイル拡張子はもちろん .html です。

PHPは「HTMLにスクリプトを埋め込む」という発想で作られたもので include文 や require 文を使うとHTMLの中身をモジュール化できますが、CSSが担当している「見た目」をモジュールに内包することはできませんでした。

HTMLベースのWebコンポーネントは、Scoped CSSも埋め込めるし、スクリプトはWebブラウザがエンジンを積んでいるJavaScriptです。 CSSとJavaScriptがHTMLのタグの中に書けるので、UIモックにガシガシ動きをつけられます。 サーバーサイドの実装なしでページ遷移、ページ内画面遷移を書けてます。 開発効率が格段に良いですし、画面のレスポンスも速い速い。 クライアントサイドの実装を100%終えてからデータベースを考えることもできそうです。

Webフレームワークを探し始めて2年半、ようやく自分用のWebアプリを書く気になれました。

Laravelはとても使い勝手のよいPHPフレームワークですので、サーバーサイドの実装に引き続き利用していきます。 LaravelのBladeテンプレートエンジンは、HTMLのガワに初期データを埋め込むくらいしか使わなくなりました。 プログラミング志向(同じことを2回書きたくない思考)でWebページを書く時代の到来です。 バックエンドエンジニアもJavaScriptやりましょう!

・・・とはいえ、Riot関連のパッケージはまだまだ少なく、「便利な道具」が足りなかったので作ったら、3つできました。 npmで配信設定済み。 ドキュメント、テストは順次整備していきます。

riot-dispatcher
Laravelライク、Expressライクな記法でルーティングが書けます。
ページハッシュ (#/xx/yy/zz) のルーティングライブラリです。
https://github.com/jumilla/riot-dispatcher
riot-booster
Bootstrap4(alpha) をRiot向けにコンポーネント化してるもの。
https://github.com/jumilla/riot-booster
pasiri
HTTPリクエストをfetch()してくれるヤツ。モックを注入すればfakeオブジェクトを返せます。
https://github.com/jumilla/pasiri

投稿日:2015年09月17日
カテゴリ: Riot , Webサイト制作 , プログラミング