Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ClojureScriptで変わるクライアントサイドWeb

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

 ClojureScriptで変わるクライアントサイドWeb

渋谷.cljで喋らせてもらった時のスライドです。絵をがんばりました。

Avatar for Minori Yamashita

Minori Yamashita

June 30, 2013
Tweet

More Decks by Minori Yamashita

Other Decks in Programming

Transcript

  1. Whoami { :name "山下実則" :age 19 :twitter { :name "ympbyc"

    :icon } :blog "標高+1m" :url "http://ympbyc.github.io/" :email "[email protected]" }
  2. We Got Problems Over Here • データがDOMにしかない。 ◦ この例だと、Todoリストの中身のデータが欲しい時は毎 回jQueryとかで取ってこなくちゃいけない.

    ◦ DOMはデータ表現に向いていない ◦ DOMが壊れたらデータも壊れる • 構造がない ◦ ModelとViewが分離できていない。 ◦ 保守性に問題あり • 副作用しかない ◦ 読み辛い ◦ 順番への依存が激しい
  3. Still, We Have Problems • Modelがミュータブル ◦ 基本的にModelはミュータブルなハッシュテーブルにいく つかメソッドをくっ付けたもの ◦

    MVC自体がミュータブルなModelを前提としている ◦ 順番への依存が激しい • 状態が散らばる ◦ 各Modelの各インスタンスがバラバラに状態を持つ ◦ アプリケーションの状態の復元が困難 ◦ デバッガがないと現在の状態を把握できない.テストし辛 い • Viewの操作が命令的 • View間の連携が面倒くさい • jQueryでView作るの面倒くさい • 覚える事が多い
  4. What Gets Solved? • Modelがイミュータブル ◦ データは全てstateと呼ばれるatomの中に突っ込む ◦ atomの更新はユーザからは隠される •

    状態が一つの値にまとまる ◦ EDNはシリアライザブルなのでどこにでも保存できるし どこからでも復元できる • Viewの生成が宣言的 ◦ Hiccupの構文でページ全体のhtmlを表現するEDNを作 る. WebFUIによってstateが変わる度に生成されて、差 分が計算され、DOMにコミットされる. ◦ DOM EDNの中はReactive • jQueryいらない • 覚える事が少ない(render-all,launch-app)
  5. WebFUI • Land of Lispの作者, Conrad Barskiさんが作っ た • YoutubeにClojure/conjでの動画がある

    • githubでのアクティビティは低い • バグいくつかある (一個patch送った)
  6. ClojureScriptが変えるクライアントサイドWeb • ClojureのEDNは使いやすい ◦ (e.g. render-all) ◦ クラスを作る必要が減るのでJS環境に向いている • ClojureScriptのおかげでブラウザでイミュータ

    ブルなデータを扱いやすくなった ◦ jsだとObject.freezeくらいしかツールがない • クライアントサイドWebでも「難しく考えない」関 数型プログラミング