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
410
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
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
280
構文解析器入門
ydah
7
2.1k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
210
MCPで実現できる、Webサービス利用体験について
syumai
7
2.5k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
630
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
330
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.6k
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
360
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
880
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
290
Vibe coding コードレビュー
kinopeee
0
430
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Designing Experiences People Love
moore
142
24k
How to train your dragon (web standard)
notwaldorf
96
6.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
A designer walks into a library…
pauljervisheath
207
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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?