twitter buttonfacebook buttongoogle plus buttonhatena bookmark buttonpocket button
ちょっと小さいのはたしかですが。
2016年2月19日

PureScriptのUIライブラリまとめ

purescript


おすすめ

  • 選ぶのが面倒なら、ひとまずHalogenを選べばいいと思います。ElmやReact/Reduxに似ているPuxもわりと人気があるようです
  • こちらも参考になるかも
  • ここに載っていないものがあったらぜひ教えてください
  • なお、ここで紹介されているものの大半は仮想DOM系のものです。古典的なDOM操作によるUIライブラリはpurescript-domとpurescript-jqueryだけですが、わざわざそんな不便なものを使う理由はないです。

メンテナンスが継続されているor新しいライブラリ

halogen

  • 中身の仮想DOM実装は、PureScript製のpurescript-halogen-vdom
  • Fluxやelm-htmlみたいにアクションを投げて状態を更新するタイプ
  • 状態更新や子のコンポーネントへのクエリまでを含めた計算構造をFreeモナドで定義するガチ勢
  • 要素と属性の組み合わせが正しいかどうかまで静的に型付けする機構がある
  • slamdataという会社のひとたちが中心に開発している。Halogenを使った製品を実際に提供しているようなので、実績としては間違いなくこの中で一番上
  • 基底のモナドは交換可能だけど基本的にはAff
  • コンポーネントを組み合わせるとかなり複雑な型になるのがちょっとつらい
  • 最もサンプルやドキュメントが揃っていてコントリビュータもユーザも多い
  • ルーターやCSSを型安全に書くライブラリやなども平行して開発されている(他のUIライブラリからでも使えるが)
  • SVGのサポートがまだないことがおそらく唯一にして最大の欠点
  • 抽象度が高く、嵐のように投げつけられる意味不明な型エラーで初心者は頭がおかしくなって死ぬ(慣れれば楽勝)

thermite

  • 中身はReact.js
  • purescript-reactの補助的なライブラリという位置づけのようで、thermite本体は1モジュール400行くらいしかない
  • アクションを投げて状態を更新するタイプ
  • アクションは単なる代数的データ型
  • コンポーネント同士をlensで組み合わせる機構も持つ
  • PureScriptのオリジナルの開発者であるPhilさんが開発している
  • Try Thermite!で実際にブラウザ上で動かしながら練習できる
  • SVGがサポートされている
  • ~~HalogenやOptic-UIに比べると多少抽象度は低め。比較的初心者にやさしそう~~ 気のせいでした。Optic-UIからのlensでコンポーネントを合成するアイデアも持ち込まれて、強力に抽象化されています
  • 私はまだあんまりthermiteを試していないので、また何か気付いたら追記します

pux

  • 中身はReact(でも他の仮想DOMライブラリも使えるっぽい)
  • ビューを定義するのにモナドを使う。do記法が使える(他のフレームワークでは配列とか専用Monoid)
  • サーバサイドレンダリングなんかもできるらしい
  • ルーターも付属
  • SVGもサポートされている
  • Elmっぽい。すごくElmっぽいので、Elmが好きな人に。
  • ~~仮想DOMのサイクルの外部から入力するときにシグナルを使うのが最大の特徴か~~いまサンプルコードをみたらそれもなくなっていて、見るからにElmフォロワー
  • この中では一番抽象度が低い。初心者にやさしそう
  • Elmっぽくてクセの少ない設計に見えますが、作用の扱いが回りくどくなるのでこれ使うならHalogenでいい気がします

outwatch

  • できたて
  • 中身はSnabbdom
  • Scala版とPureScript版がある
  • リアクティブプログラミングを推しだしたライブラリのようです
  • まだよくわからないです

汎用でないライブラリ/低レベルなライブラリ

purescript-react

  • React.jsの低レベルなバインディング
  • Thermiteと組み合わせて使うのが吉

flare

  • コードの振る舞いと外見を同時に定義していくという一風変わったライブラリ
  • 汎用のUIライブラリではない
  • Try Flare! でブラウザ上で実験できる

halogen-vdom

  • Halogenで使うために試験的に作られた低レベルな仮想DOM実装らしいです

あんまりメンテナンスされてないライブラリ

vdom

  • 既存のJavaScript製ライブラリのバインディングではない、PureScript製の仮想DOM実装
  • 作っているのはpulpなんかも作っているBodilさん
  • DOMのインターフェイスが抽象化されているので、サーバサイドレンダリングなんかもできるようです
  • バインディングではオーバーヘッドが大きいから、PureScriptネイティブな仮想DOM実装あったらいいね、と誰かが言っていたのを見かけたきがしましたが、ついに実装する人が出てきたかと。~~期待してます~~ purescript-halogen-vdomが出てきたのでお役御免っぽい

optic-ui

  • 中身はMatt-Esch/virtual-dom
  • アクションを管理する機構は持たない
  • コンポーネント同士をlensで直接組み合わせることができるのが最大の特徴で名前の由来
  • 双方向データバインディングがある
  • SVGがサポートされている
  • レンダリングする対象まで抽象化されていて交換可能
  • イベントハンドラでの基底のモナドは単なるEffで、いろいろ自由が効く
  • シンプル寄りだけど抽象度は高く初心者殺し
  • 筆者はコレのコンセプトがとても好きなのですが、非同期処理まわりの技術的な問題が一部解決せず、実用には断念しています(参考)

incremental

  • incremental-dom バインディング

html

middle level virtual-dom binding for purescript.だそうです。なんかパフォーマンスがいいらしいです。

frp-rabbit

  • ご注文はうさぎですか?

spork

  • Halogenも作ってるnatefaubionさんが作ったライブラリ
  • 中身はpurescript-halogen-vdom
  • Elmっぽい感じ
  • パフォーマンス重視っぽい
  • 試作品でいろいろ作りかけみたいです

直接使うのはおすすめできない

dom

  • 生DOM生バインディング
  • 各種UIライブラリの基礎部分として使われる低レベルなライブラリ
  • と思いきや、実際には低レベルな部分でもほとんど使われてない
  • 型が厳密で純粋なPureScriptは生DOM操作とはとにかく相性が悪いので、『Halogenは難しいからひとまず生DOMで……』というのは本当にお勧めできません
  • いろいろ面倒くさいのでメインに据えるのはまったくおすすめできない
  • これ以外のUIフレームワークで対応しきれなくなったときだけ補助的に使うのが吉
  • ほんとうにクソみたいに面倒くさいわりに、型チェックの関係でどうにも不可能な操作があったりと、どうしようもない
  • 繰り返しますがマジでおすすめできない

jquery

  • よほどjQueryに思い入れのある人以外おすすめできない。
  • なぜこんなものがあるのか、存在意義が謎。
  • 何これ?
  • 誰が使うの?
  • 作った本人も使ってないっておっしゃっています。