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
XSLTで作るBrainfuck処理系
makki_d
0
210
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
Benchmark
sysong
0
270
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
ふつうの技術スタックでアート作品を作ってみる
akira888
0
180
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.2k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Practical Orchestrator
shlominoach
188
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Speed Design
sergeychernyshev
32
1k
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?