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
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.7k
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
240
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
上手な探索的テストとその上達方法について
matsu802
4
650
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
6.8k
[スクリプト] Swiftの型推論を学ぼう
omochi
0
110
LPIXEL×CADDi_kaerururu
kaerururu
3
300
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
510
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
It's Worth the Effort
3n
180
27k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Designing for humans not robots
tammielis
247
25k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Producing Creativity
orderedlist
PRO
335
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
We Have a Design System, Now What?
morganepeng
42
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
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?