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
Is Xcode slowly dying out in 2025?
uetyo
1
180
XP, Testing and ninja testing
m_seki
2
140
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
Using AI Tools Around Software Development
inouehi
0
1.2k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
310
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
200
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
780
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
140
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Balancing Empowerment & Direction
lara
1
340
The Invisible Side of Design
smashingmag
299
51k
Why Our Code Smells
bkeepers
PRO
337
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Scaling GitHub
holman
459
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Adaptive Systems
keathley
43
2.6k
KATA
mclloyd
29
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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?