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
custom_lintで始めるチームルール管理
akaboshinit
0
200
WordPress Playground for Developers
iambherulal
0
130
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1.1k
Going Structural with Named Tuples
bishabosha
0
190
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
150
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
140
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
790
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
1.2k
PsySHから紐解くREPLの仕組み
muno92
PRO
1
540
ミリしらMCP勉強会
watany
4
690
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.3k
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Into the Great Unknown - MozCon
thekraken
36
1.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Site-Speed That Sticks
csswizardry
4
460
The Cult of Friendly URLs
andyhume
78
6.3k
Bash Introduction
62gerente
611
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Faster Mobile Websites
deanohume
306
31k
What's in a price? How to price your products and services
michaelherold
245
12k
A Tale of Four Properties
chriscoyier
158
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
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?