Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
slamdata/purescript-halogen の紹介 @e_ntyo (https://entyo.github.io)
Slide 2
Slide 2 text
@e_ntyo ● 大学中退 → フリーター ● もうすぐ誕生日 ○ ほしいものリスト
Slide 3
Slide 3 text
このスライドの内容 1. そもそもPureScriptとは 2. slmadata/purescript-halogen というUIライブラリの紹介
Slide 4
Slide 4 text
PureScriptを 知っている方
Slide 5
Slide 5 text
PureScriptとは ● いわゆるAltJSの１つ .purs .js compile by psc .js use via FFI
Slide 6
Slide 6 text
PureScriptとは ● Haskellライクな関数型プログラミング言語 ○ 静的型による強力な型システム ■ 型クラス, パターンマッチ, Record型, などの超便利機能 ■ 開発者支援 ● コードの自動生成 ● エディタでのコード補完・定義ジャンプ
Slide 7
Slide 7 text
PureScriptとは ● Haskellライクな関数型プログラミング言語 ○ 圏論の世界の概念を利用できる ■ Functor, Monoid → リスト操作が便利に ■ Applicative → フォームバリデーションが簡単に ■ Monad → 副作用を持つ値, Nullableな値の取扱が安全に 重要: 圏論での意味合いがわかっていなくても使える（こわくない）
Slide 8
Slide 8 text
slamdata/purescript-halogen ● VDOMを利用したPureScriptのUIライブラリ ○ コンポーネントツリーで UIを組み立てる ■ 個人的な印象: PureScriptの世界線でのReact.js ● React.jsのバインディングも存在
Slide 9
Slide 9 text
slamdata/purescript-halogen ● 例 - entyo/WatchingU
Slide 10
Slide 10 text
slamdata/purescript-halogen ● 例 - entyo/WatchingU
Slide 11
Slide 11 text
slamdata/purescript-halogen ● 例 - コンポーネントの定義
Slide 12
Slide 12 text
slamdata/purescript-halogen ● 例 - コンポーネントの構成要素
Slide 13
Slide 13 text
slamdata/purescript-halogen ● 例 - コンポーネントの構成要素
Slide 14
Slide 14 text
slamdata/purescript-halogen ● 例 - コンポーネントの動作
Slide 15
Slide 15 text
slamdata/purescript-halogen ● 例 - コンポーネントの動作
Slide 16
Slide 16 text
slamdata/purescript-halogen ● 例 - State -> View
Slide 17
Slide 17 text
slamdata/purescript-halogen ● 例 - State -> View
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
SPAをつくるぞ！ ● Global Stateの管理はどうするの？ ○ ReaderTパターン を使うとよさそう ○ 参考: vladciobanu/purescript-halogen-example
Slide 20
Slide 20 text
SPAをつくるぞ！ ● 〇〇はできますか？ ○ Routerは？ ■ ある ○ Server Side Renderingは？ ■ 未対応（対応している 別のUIライブラリはある） ○ SVG Supportは？ ■ actively developmentが終了
Slide 21
Slide 21 text
まとめ ● PureScript → HaskellライクなAltJS ○ 最新の関数型プログラミング言語 ○ 既存のJSのコードは再利用できる ● purescript-halogen → VDOMを利用したPureScriptのUIライブラリ ○ 安全な（ランタイムエラーのない） SPAを開発できる
Slide 22
Slide 22 text
See Also ● entyo/WatchingU ● コモナドスケッチ ~ 1. DOMのコラージュ ~ ○ PureScriptでSPAを書いていく連載記事