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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
470
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
290
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
490
ruby.wasmとWebSocketで遊ぼう!
lnit
0
150
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
520
tsconfigのオプションで変わる型世界
keisukeikeda
1
120
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
120
知識0からカンファレンスやってみたらこうなった!
syossan27
5
320
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
350
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
200
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
120
ビカム・ア・コパイロット
ymd65536
1
190
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making Projects Easy
brettharned
116
6.2k
Code Reviewing Like a Champion
maltzj
523
40k
What's in a price? How to price your products and services
michaelherold
245
12k
Building an army of robots
kneath
306
45k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Cult of Friendly URLs
andyhume
78
6.4k
Docker and Python
trallard
44
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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?