Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ClojureScriptで変わるクライアントサイドWeb
Search
Minori Yamashita
June 30, 2013
Programming
0
940
ClojureScriptで変わるクライアントサイドWeb
渋谷.cljで喋らせてもらった時のスライドです。絵をがんばりました。
Minori Yamashita
June 30, 2013
Tweet
Share
More Decks by Minori Yamashita
See All by Minori Yamashita
Cloxp @ Smalltalk Meetup
ympbyc
0
280
Real World Objects
ympbyc
2
3.3k
Purely Functional Smalltalk-72
ympbyc
1
10k
LittleSmallscript
ympbyc
2
1.4k
Other Decks in Programming
See All in Programming
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
190
TDD 実践ミニトーク
contour_gara
1
260
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
私の後悔をAWS DMSで解決した話
hiramax
4
170
旅行プランAIエージェント開発の裏側
ippo012
1
540
Ruby Parser progress report 2025
yui_knk
1
250
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
730
あのころの iPod を どうにか再生させたい
orumin
2
2.6k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
260
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Side Projects
sachag
455
43k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fireside Chat
paigeccino
39
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Six Lessons from altMBA
skipperchong
28
4k
Thoughts on Productivity
jonyablonski
69
4.8k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
BBQ
matthewcrist
89
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
WebFUI ClojureScriptで変わるクライアントサイドWeb
Whoami { :name "山下実則" :age 19 :twitter { :name "ympbyc"
:icon } :blog "標高+1m" :url "http://ympbyc.github.io/" :email "
[email protected]
" }
Prehistoric Javascript
Prehistoric JavaScript
We Got Problems Over Here • データがDOMにしかない。 ◦ この例だと、Todoリストの中身のデータが欲しい時は毎 回jQueryとかで取ってこなくちゃいけない.
◦ DOMはデータ表現に向いていない ◦ DOMが壊れたらデータも壊れる • 構造がない ◦ ModelとViewが分離できていない。 ◦ 保守性に問題あり • 副作用しかない ◦ 読み辛い ◦ 順番への依存が激しい
Client-side MVC Kicks In
Client-side MVC Kicks In
What Gets Solved? • データはJSのオブジェクトになった • ModelとViewが分離された
Still, We Have Problems • Modelがミュータブル ◦ 基本的にModelはミュータブルなハッシュテーブルにいく つかメソッドをくっ付けたもの ◦
MVC自体がミュータブルなModelを前提としている ◦ 順番への依存が激しい • 状態が散らばる ◦ 各Modelの各インスタンスがバラバラに状態を持つ ◦ アプリケーションの状態の復元が困難 ◦ デバッガがないと現在の状態を把握できない.テストし辛 い • Viewの操作が命令的 • View間の連携が面倒くさい • jQueryでView作るの面倒くさい • 覚える事が多い
ClojureScript to the Rescue
ClojureScript to the Rescue
What Gets Solved? • Modelがイミュータブル ◦ データは全てstateと呼ばれるatomの中に突っ込む ◦ atomの更新はユーザからは隠される •
状態が一つの値にまとまる ◦ EDNはシリアライザブルなのでどこにでも保存できるし どこからでも復元できる • Viewの生成が宣言的 ◦ Hiccupの構文でページ全体のhtmlを表現するEDNを作 る. WebFUIによってstateが変わる度に生成されて、差 分が計算され、DOMにコミットされる. ◦ DOM EDNの中はReactive • jQueryいらない • 覚える事が少ない(render-all,launch-app)
WebFUI • Land of Lispの作者, Conrad Barskiさんが作っ た • YoutubeにClojure/conjでの動画がある
• githubでのアクティビティは低い • バグいくつかある (一個patch送った)
使ってみた http://ympbyc.github.io/s-exploration/
ClojureScriptが変えるクライアントサイドWeb • ClojureのEDNは使いやすい ◦ (e.g. render-all) ◦ クラスを作る必要が減るのでJS環境に向いている • ClojureScriptのおかげでブラウザでイミュータ
ブルなデータを扱いやすくなった ◦ jsだとObject.freezeくらいしかツールがない • クライアントサイドWebでも「難しく考えない」関 数型プログラミング
以上です ご清聴ありがとうございました。