Haskell Memo – Misoライブラリ

HaskellのGUIをどうするか。Haskell公式サイトやライブラリ集を時々逍遥しているのだが,本日は miso なるライブラリを発見(気づくのがおそすぎだが,Haskell関係は完全独学でやっているので界隈の動きを追っかけられていない)。

先に余談だが,Webの世界も知らないうちに随分進化しているようで,手打ちでマークアップしていた80年代からみて,何世代も仕組みが変わっていた。最近はアイソモルフィック(サーバ側でもクライアント側でも同じコードが動く)な仕組みが流行中とのこと。

また,htmlも今やhtml5ではcanvasやら位置情報やら永続記録やら,アプリケーション作成に必要な部品はそれなりにそろうようになった。なるほど,クラウドシステムの進化も進むわけである。

さて,本題の miso である。

以下,github上に掲載されたmisoの説明文から抜粋(2020年9月7日閲覧)。

  • Miso は,Haskell のアイソモルフィックなフロントエンドフレームワークであり,簡単にユーザとのやり取りを扱う単一ページWebアプリを作成できる。
  • 仮想DOM,動的な再構成,属性の正規化,SVG,Websocketなど様々な機能を備える。
  • ElmやRedux, Bobrilなどから着想を得た。
  • Miso の世界は基本的には純粋であるが,Effect という型を使えば副作用を扱うことができる。
  • GHCJS(HaskellのコードをJavaScriptに翻訳するコンパイラ)のFFI(他言語との接続ライブラリ)を利用しており,外部依存性が最小限となっている。
  • Miso はいわば隠されたDSLのようなもの。

とのこと。

導入

おすすめの導入方法はパッケージマネージャ nix を使うこと。stack でもGHCJSをビルドできなくはないが,stack 2.0 からはGHCJSのサポートがはずされている。cabal を使っている場合,何らかの方法で GHCJS を入手することが前提となる。

nix

miso でウエブアプリを作成するのに nix はうってつけ。nix に詳しくない人には  @Gabriel439 の “Nix and Haskell in production” ガイドがおすすめ。

(以下,ディレクトリ構成などの話が続くが,一旦割愛。)

構造

クライアント・サーバ型のアプリケーションの構築では,ひとつの cabal ファイル内に2つの executable セクションを入れておくことをおすすめする。stack でクライアント・サーバ型のアプリを構築するのに参考になるのはこちら(英文)。nix でクライアント・サーバ型のアプリを構築する際に参考になるのはこちら(英文)の  nix scripts

サンプルコード

(割愛)

JSaddle による動的再読み込み

miso アプリを ghcidとjsaddleを使ってビルドすることで,動作中のプログラムを動的に書き換えることだ可能となる。

Docker

miso のアプリを Docker のコンテナ内で開発することが可能(つまり,Windows 上で開発可能)。

補綴

miso の核となるのは diff.js である。これがすべての DOM の操作をすべて取り仕切る。

アイソモルフィック

アイソモルフィックな javascript は,SEO(検索エンジン最適化)や読み込み時間の短縮などに役立つ。原理としては,サーバがクライアント側のブラウザに,基礎部分となるhtmlコードを送出し,クライアント側で javascript のコードが読み込まれると,あらかじめレンダリングされた DOM が仮想 DOM 内に読み込まれ,アプリケーションの動作が始まる。すべてのページ移動はクライアント側で行われる。

miso の機能は,クライアント側でのポインタのコピーを行うために利用される。詳しくはチュートリアル参照のこと。