slamdata/purescript-halogen の紹介

HTML5 Conference 2018の公募LTで発表させていただきました。

Transcript

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