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
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
450
Astroの使用感とディレクトリ設計についての考察
saku0109
0
130
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
460
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
140
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
5.7k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
3
920
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
17
9.5k
楽して成果を出すためのセルフリソース管理
clipnote
0
210
Introducing FrankenPHP gRPC
dunglas
2
980
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
4
1.1k
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.1k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
610
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
A Tale of Four Properties
chriscoyier
160
23k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Designing for Performance
lara
610
69k
Producing Creativity
orderedlist
PRO
347
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making Projects Easy
brettharned
118
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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でも「難しく考えない」関 数型プログラミング
以上です ご清聴ありがとうございました。