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
Amazon Qを使ってIaCを触ろう!
maruto
0
310
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
51
33k
macOS でできる リアルタイム動画像処理
biacco42
8
2.2k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
240
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
410
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
3k
Server Driven Compose With Firebase
skydoves
0
420
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
WEBエンジニア向けAI活用入門
sutetotanuki
0
320
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.9k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
180
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1.2k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Git: the NoSQL Database
bkeepers
PRO
426
64k
How to train your dragon (web standard)
notwaldorf
88
5.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
53
Building Your Own Lightsaber
phodgson
102
6.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Building an army of robots
kneath
302
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Agile that works and the tools we love
rasmusluckow
327
21k
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?