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