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
Deep Dive into Kotlin Flow
jmatsu
1
360
Design Foundational Data Engineering Observability
sucitw
3
200
rage against annotate_predecessor
junk0612
0
170
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
Ruby Parser progress report 2025
yui_knk
1
450
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
Kiroで始めるAI-DLC
kaonash
2
610
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Bash Introduction
62gerente
615
210k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
The Invisible Side of Design
smashingmag
301
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
What's in a price? How to price your products and services
michaelherold
246
12k
For a Future-Friendly Web
brad_frost
180
9.9k
Fireside Chat
paigeccino
39
3.6k
Statistics for Hackers
jakevdp
799
220k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
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でも「難しく考えない」関 数型プログラミング
以上です ご清聴ありがとうございました。