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

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

Transcript

1. WebFUI ClojureScriptで変わるクライアントサイドWeb
2. Whoami { :name "山下実則" :age 19 :twitter { :name "ympbyc" :icon } :blog "標高+1m" :url "http://ympbyc.github.io/" :email "ympbyc@gmail.com" }
3. Prehistoric Javascript
4. Prehistoric JavaScript
5. We Got Problems Over Here • データがDOMにしかない。 ◦ この例だと、Todoリストの中身のデータが欲しい時は毎 回jQueryとかで取ってこなくちゃいけない. ◦ DOMはデータ表現に向いていない ◦ DOMが壊れたらデータも壊れる • 構造がない ◦ ModelとViewが分離できていない。 ◦ 保守性に問題あり • 副作用しかない ◦ 読み辛い ◦ 順番への依存が激しい
6. Client-side MVC Kicks In
7. Client-side MVC Kicks In
8. What Gets Solved? • データはJSのオブジェクトになった • ModelとViewが分離された
9. Still, We Have Problems • Modelがミュータブル ◦ 基本的にModelはミュータブルなハッシュテーブルにいく つかメソッドをくっ付けたもの ◦ MVC自体がミュータブルなModelを前提としている ◦ 順番への依存が激しい • 状態が散らばる ◦ 各Modelの各インスタンスがバラバラに状態を持つ ◦ アプリケーションの状態の復元が困難 ◦ デバッガがないと現在の状態を把握できない.テストし辛 い • Viewの操作が命令的 • View間の連携が面倒くさい • jQueryでView作るの面倒くさい • 覚える事が多い
10. ClojureScript to the Rescue
11. ClojureScript to the Rescue
12. What Gets Solved? • Modelがイミュータブル ◦ データは全てstateと呼ばれるatomの中に突っ込む ◦ atomの更新はユーザからは隠される • 状態が一つの値にまとまる ◦ EDNはシリアライザブルなのでどこにでも保存できるし どこからでも復元できる • Viewの生成が宣言的 ◦ Hiccupの構文でページ全体のhtmlを表現するEDNを作 る. WebFUIによってstateが変わる度に生成されて、差 分が計算され、DOMにコミットされる. ◦ DOM EDNの中はReactive • jQueryいらない • 覚える事が少ない(render-all,launch-app)
13. WebFUI • Land of Lispの作者, Conrad Barskiさんが作っ た • YoutubeにClojure/conjでの動画がある • githubでのアクティビティは低い • バグいくつかある (一個patch送った)
14. 使ってみた http://ympbyc.github.io/s-exploration/
15. ClojureScriptが変えるクライアントサイドWeb • ClojureのEDNは使いやすい ◦ (e.g. render-all) ◦ クラスを作る必要が減るのでJS環境に向いている • ClojureScriptのおかげでブラウザでイミュータ ブルなデータを扱いやすくなった ◦ jsだとObject.freezeくらいしかツールがない • クライアントサイドWebでも「難しく考えない」関 数型プログラミング
16. 以上です ご清聴ありがとうございました。