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
96
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
49
Introducing Type Providers
e_ntyo
0
16k
セーフティ・JavaScript・プログラミング
e_ntyo
0
220
Other Decks in Programming
See All in Programming
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
670
Jakarta EE meets AI
ivargrimstad
0
150
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
距離関数を極める! / SESSIONS 2024
gam0022
0
280
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
210
Jakarta EE meets AI
ivargrimstad
0
540
Arm移行タイムアタック
qnighy
0
320
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
Featured
See All Featured
Navigating Team Friction
lara
183
14k
Faster Mobile Websites
deanohume
305
30k
RailsConf 2023
tenderlove
29
900
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Designing for Performance
lara
604
68k
A Tale of Four Properties
chriscoyier
156
23k
Happy Clients
brianwarren
98
6.7k
Statistics for Hackers
jakevdp
796
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Building an army of robots
kneath
302
43k
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を書いていく連載記事