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
930
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
270
Real World Objects
ympbyc
2
3.2k
Purely Functional Smalltalk-72
ympbyc
1
10k
LittleSmallscript
ympbyc
2
1.4k
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.3k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
Benchmark
sysong
0
250
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.4k
Effect の双対、Coeffect
yukikurage
5
1.5k
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
370
Is Xcode slowly dying out in 2025?
uetyo
1
190
WindowInsetsだってテストしたい
ryunen344
1
190
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
エラーって何種類あるの?
kajitack
5
300
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
71
4.9k
Being A Developer After 40
akosma
90
590k
Navigating Team Friction
lara
187
15k
Site-Speed That Sticks
csswizardry
10
660
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Rails Girls Zürich Keynote
gr2m
94
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Bash Introduction
62gerente
614
210k
Optimizing for Happiness
mojombo
379
70k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
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でも「難しく考えない」関 数型プログラミング
以上です ご清聴ありがとうございました。