"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.

1. ELM
OR HOW I LEARNED TO FRONT-END
DEVELOPMENT

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. DISCLAIMER
I'm not an expert
Just loving ELM and wanting to share it

4. WHO ARE YOU?
Front end developers?
Functional programmers?
Both?
Tried ELM?
Running ELM in production?

5. WHAT IS ELM?
Statically typed reactive functional programming in the
browser

6. RUNS IN THE BROWSER
Compiles to Html, Javascript and Css
elm make Main.elm

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. FUNCTIONAL PROGRAMMING
Making inputs and outputs explicit

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. 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. SIGNALS
Similar to EventEmitters or Observables in Javascript
They exist for the entire lifetime of the program
They always have an initial value

12. EXAMPLES OF SIGNALS
main =
Signal.map show Mouse.position
(0,0)

13. EXAMPLES OF SIGNALS
main =
Signal.map display Keyboard.presses
display keyCode =
show ( Char.fromCode keyCode )
'0'

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. SIGNAL GRAPH

16. INPUT
Signals from the world
We are not in control of changing the value, the value
is changing everything else

17. TRANSFORMATIONS
map : ( a ­> b ) ­> Signal a ­> Signal b
Keyboard.presses : Signal KeyCode
keyboardChar: Signal Char
0
Signal.map Char.fromCode
'0'

18. STATE
foldp : ( a ­> b ­> b ) ­> b ­> Signal a
­> Signal b
Application state all in one place
Save and undo become easy

19. STATE
Mouse.clicks : Signal ()
counter : Signal Int
()
foldp (_ n -> n + 1) 0 Mouse.clicks
0

20. MERGE
merge : Signal a ­> Signal a ­> Signal b

21. MERGE
clicks : Signal Action
presses : Signal Action
ticks : Signal Action
clickPressTick : Signal Action
Click
Press
Tick
mergeMany [ clicks, presses, ticks ]
Tick

22. ELM ARCHITECTURE
Simple pattern for infinitely nestable components
Great for modularity, code reuse and testing

23. MODULARITY
Hide implementation details
Expose just what you need
EXTENSIBILITY
Ability to combine modules one with the other

24. ELM ARCHITECTURE PILLARS
Model
View
Update

25. OUR APPLICATION

27. MODEL
Data structure representing the state of the
component
Single source of truth

28. MODEL
type alias Talk =
{ title : String
, description : String
, speaker : String
}

29. VIEW
view : Model ­> Html
No mutation of the DOM

30. VIEW
view : Talk ­> Html
view talk =
div [ class "talk" ]
[ div [] [ text ( talk.title ++
" by " ++ talk.speaker )]
, div [] [ text talk.description ]
]

31. 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

32. UPDATE
update : Action ­> Model ­> Model
Clear representation of how the model can be
transformed

33. type Action
= ClickTitle
| ClickDescription
update : Action ­> Talk ­> Talk
update action talk =
case action of
ClickDescription ­>
{ talk | description =
"We got a new description!" }

34. 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 ...

35. ALL TOGETHER
from
to

36. LET'S HAVE ANOTHER ROUND

37. PORTS
Mechanism for sending messages in and out of ELM

38. 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"
]);

39. OUTGOING PORTS
Passing messages from ELM to JavaScript
port requestTalks : Signal EventName
port requestTalks = signalOfEventName
myApp.ports.requestTalks.subscribe(
retrieveTalks);
function retrieveTalks (eventName) {
...
}

40. TASKS
Abstraction to model side-effects handled by the
runtime
Way to describe asynchronous operations that may fail

41. TASKS LIFECYCLE
Tasks describe operations that could be performed in
the future
To perform a task we hand it to a port

42. TASKS
retrieveTalks : String
­> Task Http.Error Action
retrieveTalks uri =
get decoder uri
|> Task.map TalksRetrieved

43. MAILBOXES
type alias Mailbox a =
{ address : Address a
, signal : Signal a
}
mailbox : a ­> Mailbox a

44. TASKS LIFECYCLE WITH
MAILBOXES

45. 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

46. ELM ARCHITECTURE AND
TASKS
Model is replaced by ( Model, Effects Action )
update : Action ­> Model
­> ( Model, Effects Action )

47. type Action
= ConfRetrieved ( Maybe Conferences )
| RetrieveTalks
update action joindin =
case action of
ConfRetrieved maybeConf ­>
( addConferences joindin maybeConf
, task ( succeed RetrieveTalks )
)

48. 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.

49. CREDITS
https://github.com/yang-wei/elmflux

50. RESOURCES
elm-lang.org
github.com/evancz/elm-architecture-tutorial
www.elm-tutorial.org
www.elmcast.io
www.elmweekly.nl
www.elmbark.com

51. THANKS!
SPEAKERS FEEDBACK!
/@marcoshuttle m.perone@mvlabs.it