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
79
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
130
論文紹介 - Towards Memorable Information Retrieval (ICTIR ‘20)
e_ntyo
0
38
Introducing Type Providers
e_ntyo
0
15k
セーフティ・JavaScript・プログラミング
e_ntyo
0
200
Other Decks in Programming
See All in Programming
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
210
Ruby Pattern Matching
bkuhlmann
0
920
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
470
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
Folding Cheat Sheet #2
philipschwarz
PRO
0
120
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Goのmultiple errorsについて (2024年4月版)
syumai
1
230
ONE WEDGE_company_guide
1wedge_one
0
430
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
RailsConf 2023
tenderlove
2
530
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
What's in a price? How to price your products and services
michaelherold
237
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Optimizing for Happiness
mojombo
370
69k
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を書いていく連載記事