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
React-Haskell
Search
Joel Burget
November 19, 2014
Programming
3
420
React-Haskell
Khan Academy dev standup presentation.
https://github.com/joelburget/react-haskell
Joel Burget
November 19, 2014
Tweet
Share
More Decks by Joel Burget
See All by Joel Burget
Backbone to React
joelburget
24
67k
Other Decks in Programming
See All in Programming
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Facilitating Awesome Meetings
lara
55
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Bash Introduction
62gerente
615
210k
BBQ
matthewcrist
89
9.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
None
REACT-HASKELL
HI, MY NAME IS JOEL
HI, MY NAME IS JOEL ... AND I USE HASKELL
HASKELL ▸ statically typed ▸ lazy ▸ purely functional
HASKELL ▸ statically typed ▸ lazy ▸ purely functional ▸
really cool
HASTE ▸ dialect of Haskell ▸ runs in browser
HASTE
BLAZE-HTML sample :: Html sample = p ! class_ "styled"
$ em "Basic Algebra" becomes <p class="styled"> <em>Basic Algebra</em> </p>
REACT-HASKELL sample :: React sample = p <! className "styled"
$ em "Basic Algebra" becomes <p class="styled"> <em>Basic Algebra</em> </p>
PUT IT ON THE PAGE main :: IO () main
= do Just elem <- elemById "id" render elem sample
MORE COMPLICATED sample :: React sample = div <! className
"beautify" $ do "Khan Academy" input "Rewritten in Haskell"
CONTROLLED COMPONENT view :: Elem -> JSString -> IO ()
view elem str = render elem $ div $ do "Khan Academy" input <! onChange (view elem . targetValue) text str
None
LET'S MAKE THAT EASIER
STATEFUL COMPONENT REDUX view :: StatefulReact JSString view = div
$ do "Khan Academy" input <! onChange' (updateState . targetValue) text str
LIFECYCLE METHODS componentDidMount, componentWillUnmount, ... ?
QUESTIONS?