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
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
私の後悔をAWS DMSで解決した話
hiramax
4
180
複雑なドメインに挑む.pdf
yukisakai1225
5
920
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.3k
RDoc meets YARD
okuramasafumi
4
160
兎に角、コードレビュー
mitohato14
0
170
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
AIでLINEスタンプを作ってみた
eycjur
1
220
rage against annotate_predecessor
junk0612
0
160
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
KATA
mclloyd
32
14k
Code Review Best Practice
trishagee
70
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Producing Creativity
orderedlist
PRO
347
40k
A designer walks into a library…
pauljervisheath
207
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Into the Great Unknown - MozCon
thekraken
40
2k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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?