Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ELM
OR HOW I LEARNED TO FRONT-END
DEVELOPMENT
WHO AM I?
/@marcoshuttle m.perone@mvlabs.it
PHP developer in my daily life
grew up as a mathematician
weakness for functio...
DISCLAIMER
I'm not an expert
Just loving ELM and wanting to share it
WHO ARE YOU?
Front end developers?
Functional programmers?
Both?
Tried ELM?
Running ELM in production?
WHAT IS ELM?
Statically typed reactive functional programming in the
browser
RUNS IN THE BROWSER
Compiles to Html, Javascript and Css
elm make Main.elm
STATIC TYPING
Type of a variable is known at compile time
Errors catched at compile time
NO RUNTIME EXCEPTIONS!!
Enforced ...
FUNCTIONAL PROGRAMMING
Making inputs and outputs explicit
WE HAVE A LITTLE PROBLEM...
If functions are stateless and variables are immutable,
how can we interact with the real worl...
FUNCTIONAL REACTIVE
PROGRAMMING
Program paradigm oriented around data flows and the
propagation of change
Time as first or...
SIGNALS
Similar to EventEmitters or Observables in Javascript
They exist for the entire lifetime of the program
They alway...
EXAMPLES OF SIGNALS
main = 
 
  Signal.map show Mouse.position
(0,0)
EXAMPLES OF SIGNALS
main = 
 
  Signal.map display Keyboard.presses 
 
 
 
display keyCode = 
 
  show ( Char.fromCode key...
SIGNALS IN ELM
Only "real" signals
Not possible to create or destroy a signal, not to use
signals of signals
Signals are c...
SIGNAL GRAPH
INPUT
Signals from the world
We are not in control of changing the value, the value
is changing everything else
TRANSFORMATIONS
map : ( a ­> b ) ­> Signal a ­> Signal b
Keyboard.presses : Signal KeyCode
keyboardChar: Signal Char
0
Sig...
STATE
foldp : ( a ­> b ­> b ) ­> b ­> Signal a 
 
  ­> Signal b
Application state all in one place
Save and undo become ea...
STATE
Mouse.clicks : Signal ()
counter : Signal Int
()
foldp (_ n -> n + 1) 0 Mouse.clicks
0
MERGE
merge : Signal a ­> Signal a ­> Signal b
MERGE
clicks : Signal Action
presses : Signal Action
ticks : Signal Action
clickPressTick : Signal Action
Click
Press
Tick...
ELM ARCHITECTURE
Simple pattern for infinitely nestable components
Great for modularity, code reuse and testing
MODULARITY
Hide implementation details
Expose just what you need
EXTENSIBILITY
Ability to combine modules one with the oth...
ELM ARCHITECTURE PILLARS
Model
View
Update
OUR APPLICATION
MODEL
Data structure representing the state of the
component
Single source of truth
MODEL
type alias Talk = 
 
  { title : String 
 
  , description : String 
 
  , speaker : String 
 
  }
VIEW
view : Model ­> Html
No mutation of the DOM
VIEW
view : Talk ­> Html 
 
view talk = 
 
  div [ class "talk" ] 
 
    [ div [] [ text ( talk.title ++ 
 
      " by " +...
by
Marco Perone
Front-end development is rapidly evolving, with new
frameworks coming and going at a crazy pace. Among
the...
UPDATE
update : Action ­> Model ­> Model
Clear representation of how the model can be
transformed
type Action 
 
  = ClickTitle 
 
  | ClickDescription 
 
 
update : Action ­> Talk ­> Talk 
 
update action talk = 
 
  ca...
ACTIONS IN ACTION
Elm or how I learned to love front-end development by
Marco Perone
Front-end development is rapidly evol...
ALL TOGETHER
from
to
LET'S HAVE ANOTHER ROUND
PORTS
Mechanism for sending messages in and out of ELM
INCOMING PORTS
Passing messages from Javascript to ELM
port addTalk : Signal ( 
 
  Title, Description, Author )
myApp.por...
OUTGOING PORTS
Passing messages from ELM to JavaScript
port requestTalks : Signal EventName 
 
port requestTalks = signalO...
TASKS
Abstraction to model side-effects handled by the
runtime
Way to describe asynchronous operations that may fail
TASKS LIFECYCLE
Tasks describe operations that could be performed in
the future
To perform a task we hand it to a port
TASKS
retrieveTalks : String  
 
  ­> Task Http.Error Action 
 
retrieveTalks uri = 
 
  get decoder uri 
 
  |> Task.map ...
MAILBOXES
type alias Mailbox a = 
 
  { address : Address a 
 
  , signal : Signal a 
 
  } 
 
 
mailbox : a ­> Mailbox a
TASKS LIFECYCLE WITH
MAILBOXES
ELM ARCHITECTURE AND
TASKS
Asynchronous operations modelled with Effects Action
End result of execution is an Action that ...
ELM ARCHITECTURE AND
TASKS
Model is replaced by ( Model, Effects Action )
update : Action ­> Model 
 
  ­> ( Model, Effect...
type Action 
 
  = ConfRetrieved ( Maybe Conferences ) 
 
  | RetrieveTalks 
 
 
 
update action joindin = 
 
  case actio...
The slides archive
Did you miss a conference? Here you will find all the latest slides uploaded on Joind.in by the most am...
CREDITS
https://github.com/yang-wei/elmflux
RESOURCES
elm-lang.org
github.com/evancz/elm-architecture-tutorial
www.elm-tutorial.org
www.elmcast.io
www.elmweekly.nl
ww...
THANKS!
SPEAKERS FEEDBACK!
/@marcoshuttle m.perone@mvlabs.it
Elm or how I learned to love front-end development
Upcoming SlideShare
Loading in …5
×

Elm or how I learned to love front-end development

499 views

Published on

"Elm or how I learned to love front-end development" by Marco Perone.
Front-end development is rapidly evolving, with new frameworks coming and going at a crazy pace. Among the many options, Elm stands out as one of the most original and promising approaches: it combines the principles of reactive programming with the elegance of strongly typed functional programming, yet providing a seamless integration with javascript code. In this talk Marco will introduce Elm, exploring a real project built with it. He will dig into the best language features, also exposing how Elm can foster the development of modular, reusable and testable front-end architectures.

Published in: Internet
  • Be the first to comment

Elm or how I learned to love front-end development

  1. 1. ELM OR HOW I LEARNED TO FRONT-END DEVELOPMENT
  2. 2. WHO AM I? /@marcoshuttle m.perone@mvlabs.it PHP developer in my daily life grew up as a mathematician weakness for functional programming
  3. 3. DISCLAIMER I'm not an expert Just loving ELM and wanting to share it
  4. 4. WHO ARE YOU? Front end developers? Functional programmers? Both? Tried ELM? Running ELM in production?
  5. 5. WHAT IS ELM? Statically typed reactive functional programming in the browser
  6. 6. RUNS IN THE BROWSER Compiles to Html, Javascript and Css elm make Main.elm
  7. 7. STATIC TYPING Type of a variable is known at compile time Errors catched at compile time NO RUNTIME EXCEPTIONS!! Enforced semantic versioning Hot-swapping
  8. 8. FUNCTIONAL PROGRAMMING Making inputs and outputs explicit
  9. 9. WE HAVE A LITTLE PROBLEM... If functions are stateless and variables are immutable, how can we interact with the real world? Possible solutions: Relax requirements Play with function composition (monads) Or ...
  10. 10. FUNCTIONAL REACTIVE PROGRAMMING Program paradigm oriented around data flows and the propagation of change Time as first order citizen Dynamic evolving values Specify the dynamic behavior completely at the time of declaration
  11. 11. SIGNALS Similar to EventEmitters or Observables in Javascript They exist for the entire lifetime of the program They always have an initial value
  12. 12. EXAMPLES OF SIGNALS main =      Signal.map show Mouse.position (0,0)
  13. 13. EXAMPLES OF SIGNALS main =      Signal.map display Keyboard.presses        display keyCode =      show ( Char.fromCode keyCode ) '0'
  14. 14. SIGNALS IN ELM Only "real" signals Not possible to create or destroy a signal, not to use signals of signals Signals are connected setting up a static processing network
  15. 15. SIGNAL GRAPH
  16. 16. INPUT Signals from the world We are not in control of changing the value, the value is changing everything else
  17. 17. TRANSFORMATIONS map : ( a ­> b ) ­> Signal a ­> Signal b Keyboard.presses : Signal KeyCode keyboardChar: Signal Char 0 Signal.map Char.fromCode '0'
  18. 18. STATE foldp : ( a ­> b ­> b ) ­> b ­> Signal a      ­> Signal b Application state all in one place Save and undo become easy
  19. 19. STATE Mouse.clicks : Signal () counter : Signal Int () foldp (_ n -> n + 1) 0 Mouse.clicks 0
  20. 20. MERGE merge : Signal a ­> Signal a ­> Signal b
  21. 21. MERGE clicks : Signal Action presses : Signal Action ticks : Signal Action clickPressTick : Signal Action Click Press Tick mergeMany [ clicks, presses, ticks ] Tick
  22. 22. ELM ARCHITECTURE Simple pattern for infinitely nestable components Great for modularity, code reuse and testing
  23. 23. MODULARITY Hide implementation details Expose just what you need EXTENSIBILITY Ability to combine modules one with the other
  24. 24. ELM ARCHITECTURE PILLARS Model View Update
  25. 25. OUR APPLICATION
  26. 26. MODEL Data structure representing the state of the component Single source of truth
  27. 27. MODEL type alias Talk =      { title : String      , description : String      , speaker : String      }
  28. 28. VIEW view : Model ­> Html No mutation of the DOM
  29. 29. VIEW view : Talk ­> Html    view talk =      div [ class "talk" ]        [ div [] [ text ( talk.title ++          " by " ++ talk.speaker )]        , div [] [ text talk.description ]        ]
  30. 30. by Marco Perone Front-end development is rapidly evolving, with new frameworks coming and going at a crazy pace. Among the many options, Elm stands out as one of the most original and promising approaches: it combines the principles of reactive programming with the elegance of strongly typed functional programming, yet providing a seamless integration with javascript code. In this talk ... Elm or how I learned to love front-end development
  31. 31. UPDATE update : Action ­> Model ­> Model Clear representation of how the model can be transformed
  32. 32. type Action      = ClickTitle      | ClickDescription      update : Action ­> Talk ­> Talk    update action talk =      case action of        ClickDescription ­>          { talk | description =            "We got a new description!" }
  33. 33. ACTIONS IN ACTION Elm or how I learned to love front-end development by Marco Perone Front-end development is rapidly evolving, with new frameworks coming and going at a crazy pace. Among the many options, Elm stands out as one of the most original and promising approaches: it combines the principles of reactive programming with the elegance of strongly typed functional programming, yet providing a seamless integration with javascript code. In this talk ...
  34. 34. ALL TOGETHER from to
  35. 35. LET'S HAVE ANOTHER ROUND
  36. 36. PORTS Mechanism for sending messages in and out of ELM
  37. 37. INCOMING PORTS Passing messages from Javascript to ELM port addTalk : Signal (      Title, Description, Author ) myApp.ports.addTalk.send([      "ELM or how I learned to love ...",      "Front­end development is rapidly ...",      "Marco Perone"    ]);
  38. 38. OUTGOING PORTS Passing messages from ELM to JavaScript port requestTalks : Signal EventName    port requestTalks = signalOfEventName myApp.ports.requestTalks.subscribe(      retrieveTalks);      function retrieveTalks (eventName) {      ...    }
  39. 39. TASKS Abstraction to model side-effects handled by the runtime Way to describe asynchronous operations that may fail
  40. 40. TASKS LIFECYCLE Tasks describe operations that could be performed in the future To perform a task we hand it to a port
  41. 41. TASKS retrieveTalks : String       ­> Task Http.Error Action    retrieveTalks uri =      get decoder uri      |> Task.map TalksRetrieved
  42. 42. MAILBOXES type alias Mailbox a =      { address : Address a      , signal : Signal a      }      mailbox : a ­> Mailbox a
  43. 43. TASKS LIFECYCLE WITH MAILBOXES
  44. 44. ELM ARCHITECTURE AND TASKS Asynchronous operations modelled with Effects Action End result of execution is an Action that will be routed through the update function
  45. 45. ELM ARCHITECTURE AND TASKS Model is replaced by ( Model, Effects Action ) update : Action ­> Model      ­> ( Model, Effects Action )
  46. 46. type Action      = ConfRetrieved ( Maybe Conferences )      | RetrieveTalks        update action joindin =      case action of        ConfRetrieved maybeConf ­>          ( addConferences joindin maybeConf          , task ( succeed RetrieveTalks )          )
  47. 47. The slides archive Did you miss a conference? Here you will find all the latest slides uploaded on Joind.in by the most amazing speakers in the wild! Gainesville Barcamp 2016 Building Creative Communities by Bernie Marger, Takashi Wickes, Matt O'Hagan Info Tech Room It's not easy to build a maker culture from scratch. It takes dedication to those you are serving, passion for innovation, and intense personal sacrifice. You have to lead by example, create spaces in which your community can thrive, and ensure that the community you build lasts long after you're gone. Join the organizers of the two largest student­run hackathons in the state of Florida as they share stories, personal inspirations, and essential tips centered around building creative communities. Freestyle rap battles may replace the Q Go get the slides BSidesSLC How to Build an Effective Information Security Risk Management Program by Kiston Finney This session will focus on the elements of an effective information security risk management program, including how to select a framework for assessing risk and tailor it to your organization's culture, the difference between inherent and residual risk and why reporting on both is critical, common mistakes information security personnel make while trying to get a new risk management program off of the ground, how to set expectations with leadership, and how to partner with governance, compliance, and legal teams in your organization to garner true top­down support. Go get the slides This page is realized using the data exposed by the Joind.in API's.
  48. 48. CREDITS https://github.com/yang-wei/elmflux
  49. 49. RESOURCES elm-lang.org github.com/evancz/elm-architecture-tutorial www.elm-tutorial.org www.elmcast.io www.elmweekly.nl www.elmbark.com
  50. 50. THANKS! SPEAKERS FEEDBACK! /@marcoshuttle m.perone@mvlabs.it

×