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
slamdata/purescript-halogen の紹介
Search
e_ntyo
November 25, 2018
Programming
0
110
slamdata/purescript-halogen の紹介
HTML5 Conference 2018の公募LTで発表させていただきました。
e_ntyo
November 25, 2018
Tweet
Share
More Decks by e_ntyo
See All by e_ntyo
論文紹介 "My Mouse, My Rules - Privacy Issues of Behavioral User Profiling via Mouse Tracking"
e_ntyo
1
140
論文紹介 - Towards Memorable Information Retrieval (ICTIR ‘20)
e_ntyo
0
54
Introducing Type Providers
e_ntyo
0
17k
セーフティ・JavaScript・プログラミング
e_ntyo
0
220
Other Decks in Programming
See All in Programming
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
7
3.7k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
690
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
240
プログラミング教育のコスパの話
superkinoko
0
120
AI Agentを利用したAndroid開発について
yuchan2215
0
210
List とは何か? / PHPerKaigi 2025
meihei3
0
550
eBPF Updates (March 2025)
kentatada
0
130
生成AIの使いどころ
kanayannet
0
100
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing for humans not robots
tammielis
250
25k
Building an army of robots
kneath
304
45k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Adopting Sorbet at Scale
ufuk
75
9.3k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Making Projects Easy
brettharned
116
6.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
4 Signs Your Business is Dying
shpigford
183
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
Faster Mobile Websites
deanohume
306
31k
Transcript
slamdata/purescript-halogen の紹介 @e_ntyo (https://entyo.github.io)
@e_ntyo • 大学中退 → フリーター • もうすぐ誕生日 ◦ ほしいものリスト
このスライドの内容 1. そもそもPureScriptとは 2. slmadata/purescript-halogen というUIライブラリの紹介
PureScriptを 知っている方
PureScriptとは • いわゆるAltJSの1つ .purs .js compile by psc .js use
via FFI
PureScriptとは • Haskellライクな関数型プログラミング言語 ◦ 静的型による強力な型システム ▪ 型クラス, パターンマッチ, Record型, などの超便利機能
▪ 開発者支援 • コードの自動生成 • エディタでのコード補完・定義ジャンプ
PureScriptとは • Haskellライクな関数型プログラミング言語 ◦ 圏論の世界の概念を利用できる ▪ Functor, Monoid → リスト操作が便利に
▪ Applicative → フォームバリデーションが簡単に ▪ Monad → 副作用を持つ値, Nullableな値の取扱が安全に 重要: 圏論での意味合いがわかっていなくても使える(こわくない)
slamdata/purescript-halogen • VDOMを利用したPureScriptのUIライブラリ ◦ コンポーネントツリーで UIを組み立てる ▪ 個人的な印象: PureScriptの世界線でのReact.js •
React.jsのバインディングも存在
slamdata/purescript-halogen • 例 - entyo/WatchingU
slamdata/purescript-halogen • 例 - entyo/WatchingU
slamdata/purescript-halogen • 例 - コンポーネントの定義
slamdata/purescript-halogen • 例 - コンポーネントの構成要素
slamdata/purescript-halogen • 例 - コンポーネントの構成要素
slamdata/purescript-halogen • 例 - コンポーネントの動作
slamdata/purescript-halogen • 例 - コンポーネントの動作
slamdata/purescript-halogen • 例 - State -> View
slamdata/purescript-halogen • 例 - State -> View
None
SPAをつくるぞ! • Global Stateの管理はどうするの? ◦ ReaderTパターン を使うとよさそう ◦ 参考: vladciobanu/purescript-halogen-example
SPAをつくるぞ! • 〇〇はできますか? ◦ Routerは? ▪ ある ◦ Server Side
Renderingは? ▪ 未対応(対応している 別のUIライブラリはある) ◦ SVG Supportは? ▪ actively developmentが終了
まとめ • PureScript → HaskellライクなAltJS ◦ 最新の関数型プログラミング言語 ◦ 既存のJSのコードは再利用できる •
purescript-halogen → VDOMを利用したPureScriptのUIライブラリ ◦ 安全な(ランタイムエラーのない) SPAを開発できる
See Also • entyo/WatchingU • コモナドスケッチ ~ 1. DOMのコラージュ ~
◦ PureScriptでSPAを書いていく連載記事