shehet gregory · 2016-11-27 · • immutable data structures -> immutable.js • stajc type...
TRANSCRIPT
![Page 1: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/1.jpg)
• So$ware Engineer at
• Front-End Digest on
Shehet Gregory
![Page 2: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/2.jpg)
Enjoy your code with ELM
![Page 3: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/3.jpg)
Grammarly
![Page 4: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/4.jpg)
Popular
![Page 5: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/5.jpg)
Write For Everywhere
![Page 6: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/6.jpg)
Write For Everywhere
![Page 7: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/7.jpg)
Write For Everywhere
![Page 8: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/8.jpg)
Write For Everywhere
![Page 9: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/9.jpg)
Applause to JS community
![Page 10: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/10.jpg)
But…
![Page 11: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/11.jpg)
History 15 days
![Page 12: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/12.jpg)
Undefined
![Page 13: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/13.jpg)
function foo(a, b) { if (a > b) { return [a, b] } } foo(1, 2).join(',')
Some JS funcJon
![Page 14: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/14.jpg)
function foo(a, b) { if (a > b) { return [a, b] } } foo(1, 2).join(',')
Some JS funcJon
![Page 15: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/15.jpg)
Who it works?
![Page 16: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/16.jpg)
![Page 17: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/17.jpg)
Use Flow
![Page 18: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/18.jpg)
Add to Git Hooks
![Page 19: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/19.jpg)
Flow Hackfunction foo(a, b) { if (a > b) { return [a, b] } } foo(1, 2).join(',')
![Page 20: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/20.jpg)
Flow Hackfunction foo(a, b):any { if (a > b) { return [a, b] } } foo(1, 2).join(',')
![Page 21: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/21.jpg)
Reality
![Page 22: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/22.jpg)
Evan Czaplicki @evancz ELM
![Page 23: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/23.jpg)
Let’s rewrite to ELM
![Page 24: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/24.jpg)
foo : Int -> Int -> List Int foo a b = if a > b then a :: b :: [] main = text (String.join "," (foo 1 2))
Some funcJon on ELM
![Page 25: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/25.jpg)
foo : Int -> Int -> List Int foo a b = if a > b then a :: b :: [] main = text (String.join "," (foo 1 2))
Some funcJon on ELM
![Page 26: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/26.jpg)
foo : Int -> Int -> List Int foo a b = if a > b then a :: b :: [] main = text (String.join "," (foo 1 2))
Some funcJon on ELM
![Page 27: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/27.jpg)
foo : Int -> Int -> List Int foo a b = if a > b then a :: b :: [] main = text (String.join "," (foo 1 2))
Some funcJon on ELM
![Page 28: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/28.jpg)
Elm CompilaJon
![Page 29: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/29.jpg)
So why ELM?
![Page 30: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/30.jpg)
Not Haskell or PureScript
![Page 31: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/31.jpg)
• Pure funcJons -> NaJve
Benefits?
![Page 32: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/32.jpg)
Pure FuncJonfunction firstFoo(x) { return x + x } function secondFoo(x) { calc() return x + x ... }
![Page 33: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/33.jpg)
Pure FuncJonfunction firstFoo(x) { return x + x } function secondFoo(x) { calc() return x + x ... }
![Page 34: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/34.jpg)
Pure FuncJonfunction firstFoo(x) { return x + x } function secondFoo(x) { calc() return x + x ... }
![Page 35: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/35.jpg)
SO?
![Page 36: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/36.jpg)
• Pure funcJons -> NaJve • Immutable data structures -> Immutable.js
Benefits?
![Page 37: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/37.jpg)
Stateless
![Page 38: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/38.jpg)
• Pure funcJons -> NaJve • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript)
Benefits?
![Page 39: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/39.jpg)
StaJc type checkingf : Int -> Int f v = v + 3
![Page 40: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/40.jpg)
StaJc type checkingf : Int -> String f v = v + 3
![Page 41: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/41.jpg)
StaJc type checkingf : Int -> String f v = v + 3
![Page 42: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/42.jpg)
• Pure funcJons -> NaJve • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe
Benefits?
![Page 43: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/43.jpg)
Maybe monad
![Page 44: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/44.jpg)
• Pure funcJons -> NaJve • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity -> Rx.js
Benefits?
![Page 45: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/45.jpg)
ReacJve
![Page 46: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/46.jpg)
• Pure funcJons -> NaJve • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity -> Rx.js • The Elm Architecture -> Redux
Benefits?
![Page 47: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/47.jpg)
Dan Abramov @dan_abramov Redux
![Page 48: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/48.jpg)
ELM === Redux
![Page 49: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/49.jpg)
• Pure funcJons -> NaJve • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity -> Rx.js • The Elm Architecture -> Redux • DeclaraJve UI -> React.js
Benefits?
![Page 50: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/50.jpg)
Virtual DOM
view = div [ Props ] [ Children ]
![Page 51: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/51.jpg)
Example ELM vs Redux
![Page 52: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/52.jpg)
Counter
![Page 53: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/53.jpg)
Start App// Redux
let initialState = 0 const store = createStore( reducer, initialState ) const App () => ( <Provider store={ store }> <View /> </Provider> )
-- ELM
type alias Model = Int model : Model model = 0 main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 54: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/54.jpg)
Start App// Redux
let initialState = 0 const store = createStore( reducer, initialState ) const App () => ( <Provider store={ store }> <View /> </Provider> )
-- ELM
type alias Model = Int model : Model model = 0 main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 55: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/55.jpg)
Start App// Redux
let initialState = 0 const store = createStore( reducer, initialState ) const App = () => ( <Provider store={ store }> <View /> </Provider> )
-- ELM
type alias Model = Int model : Model model = 0 main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 56: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/56.jpg)
Start App// Redux
let initialState = 0 const store = createStore( reducer, initialState ) const App () => ( <Provider store={ store }> <View /> </Provider> )
-- ELM
type alias Model = Int model : Model model = 0 main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 57: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/57.jpg)
Start App// Redux
let initialState = 0 const store = createStore( reducer, initialState ) const App () => ( <Provider store={ store }> <View /> </Provider> )
-- ELM
type alias Model = Int model : Model model = 0 main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 58: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/58.jpg)
View
-- ELM
view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
// Redux
const View = ({ dispatch, state }) => ( <div> <button onClick={() => dispatch({type: 'DECREMENT'})} value='-' /> <div>{ state }</div> <button onClick={() => dispatch({type: 'INCREMENT'})} value='+' /> </div> )
![Page 59: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/59.jpg)
View
-- ELM
view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
// Redux
const View = ({ dispatch, state }) => ( <div> <button onClick={() => dispatch({type: 'DECREMENT'})} value='-' /> <div>{ state }</div> <button onClick={() => dispatch({type: 'INCREMENT'})} value='+' /> </div> )
![Page 60: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/60.jpg)
View
-- ELM
view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
// Redux
const View = ({ dispatch, state }) => ( <div> <button onClick={() => dispatch({type: 'DECREMENT'})} value='-' /> <div>{ state }</div> <button onClick={() => dispatch({type: 'INCREMENT'})} value='+' /> </div> )
![Page 61: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/61.jpg)
View
-- ELM
view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
// Redux
const View = ({ dispatch, state }) => ( <div> <button onClick={() => dispatch({type: 'DECREMENT'})} value='-' /> <div>{ state }</div> <button onClick={() => dispatch({type: 'INCREMENT'})} value='+' /> </div> )
![Page 62: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/62.jpg)
View
-- ELM
view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
// Redux
const View = ({ dispatch, state }) => ( <div> <button onClick={() => dispatch({type: 'DECREMENT'})} value='-' /> <div>{ state }</div> <button onClick={() => dispatch({type: 'INCREMENT'})} value='+' /> </div> )
![Page 63: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/63.jpg)
Update-- ELM
type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
// Redux
const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
![Page 64: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/64.jpg)
Update-- ELM
type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
// Redux
const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
![Page 65: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/65.jpg)
Update-- ELM
type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
// Redux
const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
![Page 66: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/66.jpg)
Update-- ELM
type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
// Redux
const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
![Page 67: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/67.jpg)
Update-- ELM
type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
// Redux
const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
![Page 68: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/68.jpg)
Update-- ELM
type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
// Redux
const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
![Page 69: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/69.jpg)
Debugging?
![Page 70: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/70.jpg)
![Page 71: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/71.jpg)
So why ELM?
![Page 72: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/72.jpg)
NoRedInk
![Page 73: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/73.jpg)
50,000 lines of ELM code 1.5 year in producJon
![Page 74: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/74.jpg)
0 RunJme Errors
![Page 75: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/75.jpg)
How I can use it?
![Page 76: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/76.jpg)
Ports & SubscripJons
![Page 77: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/77.jpg)
<body> <input type="submit" value="+" onClick="sendEvent('Increment')"> <div id="counter"></div> <input type="submit" value="-" onClick="sendEvent('Decrement')"> <script> ... </script> </body>
HTML
![Page 78: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/78.jpg)
Result
![Page 79: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/79.jpg)
Init App
main = Html.program { init = init , view = view , update = update , subscriptions = subscriptions }
main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 80: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/80.jpg)
Init App
main = Html.program { init = init , view = view , update = update , subscriptions = subscriptions }
main = Html.beginnerProgram { model = model , view = view , update = update }
![Page 81: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/81.jpg)
Model
type alias Model = Int init : (Model, Cmd Msg) init = ( 0, Cmd.none )
type alias Model = Int model : Model model = 0
![Page 82: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/82.jpg)
Model
type alias Model = Int init : (Model, Cmd Msg) init = ( 0, Cmd.none )
type alias Model = Int model : Model model = 0
![Page 83: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/83.jpg)
AcJons
type Msg = Increment | Decrement
type Msg = Update String
![Page 84: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/84.jpg)
Ports-- PORTS port modelChanges : String -> Cmd msg port modelValue : (String -> msg) -> Sub msg -- SUBSCRIPTIONS subscriptions : Model -> Sub Msg subscriptions model = modelValue Update
![Page 85: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/85.jpg)
SubscripJons-- PORTS port modelChanges : String -> Cmd msg port modelValue : (String -> msg) -> Sub msg -- SUBSCRIPTIONS subscriptions : Model -> Sub Msg subscriptions model = modelValue Update
![Page 86: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/86.jpg)
Updateupdate : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of Update action -> case action of "Increment" -> (model + 1, modelChanges (toString (model + 1))) "Decrement" -> (model - 1, modelChanges (toString (model - 1))) _ -> (model, Cmd.none)
![Page 87: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/87.jpg)
Updateupdate : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of Update action -> case action of "Increment" -> (model + 1, modelChanges (toString (model + 1))) "Decrement" -> (model - 1, modelChanges (toString (model - 1))) _ -> (model, Cmd.none)
![Page 88: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/88.jpg)
Updateupdate : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of Update action -> case action of "Increment" -> (model + 1, modelChanges (toString (model + 1))) "Decrement" -> (model - 1, modelChanges (toString (model - 1))) _ -> (model, Cmd.none)
![Page 89: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/89.jpg)
HTML<body> <input type="submit" value="+" onClick="sendEvent('Increment')"> <div id="counter"></div> <input type="submit" value="-" onClick="sendEvent('Decrement')"> <script> var node = document.getElementById('counter'); var app = Elm.Counter.embed(node); app.ports.modelChanges.subscribe(function(model) { console.log(model); }) function sendEvent(action) { app.ports.modelValue.send(action); } </script> </body>
![Page 90: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/90.jpg)
HTML<body> <input type="submit" value="+" onClick="sendEvent('Increment')"> <div id="counter"></div> <input type="submit" value="-" onClick="sendEvent('Decrement')"> <script> var node = document.getElementById('counter'); var app = Elm.Counter.embed(node); app.ports.modelChanges.subscribe(function(model) { console.log(model); }) function sendEvent(action) { app.ports.modelValue.send(action); } </script> </body>
![Page 91: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/91.jpg)
Init Component<body> <input type="submit" value="+" onClick="sendEvent('Increment')"> <div id="counter"></div> <input type="submit" value="-" onClick="sendEvent('Decrement')"> <script> var node = document.getElementById('counter'); var app = Elm.Counter.embed(node); app.ports.modelChanges.subscribe(function(model) { console.log(model); }) function sendEvent(action) { app.ports.modelValue.send(action); } </script> </body>
![Page 92: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/92.jpg)
Subscribe/Send<body> <input type="submit" value="+" onClick="sendEvent('Increment')"> <div id="counter"></div> <input type="submit" value="-" onClick="sendEvent('Decrement')"> <script> var node = document.getElementById('counter'); var app = Elm.Counter.embed(node); app.ports.modelChanges.subscribe(function(model) { console.log(model); }) function sendEvent(action) { app.ports.modelValue.send(action); } </script> </body>
![Page 93: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/93.jpg)
What about React?
![Page 94: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/94.jpg)
React Elm Component
![Page 95: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/95.jpg)
import Elm from 'react-elm-components' import { Counter } from './Counter'
Import
![Page 96: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/96.jpg)
class CounterWrapper extends Component ({ constructor(props) { super(props) this.ports = null } setupPorts = ports => { this.ports = ports this.ports.modelChanges.subscribe(model => console.log(model)) } sendEvent(action) { this.ports.modelValue.send(action) } render() { return ( <div> <input type='submit' value='+' onClick={() => this.sendEvent('Increment')} /> <Elm src={ Counter } ports={ this.setupPorts } /> <input type='submit' value='-' onClick={() => this.sendEvent('Decrement')} /> </div> ) } })
![Page 97: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/97.jpg)
class CounterWrapper extends Component ({ constructor(props) { super(props) this.ports = null } setupPorts = ports => { this.ports = ports this.ports.modelChanges.subscribe(model => console.log(model)) } sendEvent(action) { this.ports.modelValue.send(action) } render() { return ( <div> <input type='submit' value='+' onClick={() => this.sendEvent('Increment')} /> <Elm src={ Counter } ports={ this.setupPorts } /> <input type='submit' value='-' onClick={() => this.sendEvent('Decrement')} /> </div> ) } })
![Page 98: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/98.jpg)
class CounterWrapper extends Component ({ constructor(props) { super(props) this.ports = null } setupPorts = ports => { this.ports = ports this.ports.modelChanges.subscribe(model => console.log(model)) } sendEvent(action) { this.ports.modelValue.send(action) } render() { return ( <div> <input type='submit' value='+' onClick={() => this.sendEvent('Increment')} /> <Elm src={ Counter } ports={ this.setupPorts } /> <input type='submit' value='-' onClick={() => this.sendEvent('Decrement')} /> </div> ) } })
![Page 99: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/99.jpg)
class CounterWrapper extends Component ({ constructor(props) { super(props) this.ports = null } setupPorts = ports => { this.ports = ports this.ports.modelChanges.subscribe(model => console.log(model)) } sendEvent(action) { this.ports.modelValue.send(action) } render() { return ( <div> <input type='submit' value='+' onClick={() => this.sendEvent('Increment')} /> <Elm src={ Counter } ports={ this.setupPorts } /> <input type='submit' value='-' onClick={() => this.sendEvent('Decrement')} /> </div> ) } })
![Page 100: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/100.jpg)
class CounterWrapper extends Component ({ constructor(props) { super(props) this.ports = null } setupPorts = ports => { this.ports = ports this.ports.modelChanges.subscribe(model => console.log(model)) } sendEvent(action) { this.ports.modelValue.send(action) } render() { return ( <div> <input type='submit' value='+' onClick={() => this.sendEvent('Increment')} /> <Elm src={ Counter } ports={ this.setupPorts } /> <input type='submit' value='-' onClick={() => this.sendEvent('Decrement')} /> </div> ) } })
![Page 101: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/101.jpg)
So why ELM?
![Page 102: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/102.jpg)
Redux Elm Middlewarehttps://github.com/stoeffel/redux-elm-middleware
![Page 103: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/103.jpg)
Problem
![Page 105: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/105.jpg)
What Next?hep://elm-lang.org/ heps://www.reddit.com/r/elm hep://elmlang.herokuapp.com/ - Slack heps://medium.com/@diamondgfx - ELM tutorial heps://github.com/isRuslan/awesome-elm
![Page 106: Shehet Gregory · 2016-11-27 · • Immutable data structures -> Immutable.js • StaJc type checking -> Flow (Not JavaScript) • No concept of Null -> folktale/data.maybe • ReacJvity](https://reader035.vdocument.in/reader035/viewer/2022063002/5f28daef3c03d06f69515c61/html5/thumbnails/106.jpg)
Thank you! QuesJons are welcome