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
400
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
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
【Go言語】golangci-lintの使い方
tomo1227
0
280
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
CSC307 Lecture 09
javiergs
PRO
1
500
CSC307 Lecture 12
javiergs
PRO
0
220
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Become a Pro
speakerdeck
PRO
15
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Six Lessons from altMBA
skipperchong
24
3.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
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?