elm or how i learned to love front-end development
TRANSCRIPT
ELMOR HOW I LEARNED TO FRONT-END
DEVELOPMENT
WHO AM I? / @marcoshuttle [email protected]
PHP developer in my daily life
grew up as a mathematician
weakness for functional programming
DISCLAIMERI'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 BROWSERCompiles to Html, Javascript and Css
elm make Main.elm
STATIC TYPINGType of a variable is known at compile time
Errors catched at compile time
NO RUNTIME EXCEPTIONS!!
Enforced semantic versioning
Hot-swapping
FUNCTIONAL PROGRAMMINGMaking inputs and outputs explicit
WE HAVE A LITTLE PROBLEM...If functions are stateless and variables are immutable,
how can we interact with the real world?
Possible solutions:
Relax requirementsPlay with function composition (monads)Or ...
FUNCTIONAL REACTIVEPROGRAMMING
Program paradigm oriented around data flows and thepropagation of change
Time as first order citizen
Dynamic evolving values
Specify the dynamic behavior completely at the time ofdeclaration
SIGNALSSimilar to EventEmitters or Observables in Javascript
They exist for the entire lifetime of the program
They always have an initial value
EXAMPLES OF SIGNALSmain = Signal.map show Mouse.position
(0,0)
EXAMPLES OF SIGNALSmain = Signal.map display Keyboard.presses display keyCode = show ( Char.fromCode keyCode )
'\0'
SIGNALS IN ELMOnly "real" signals
Not possible to create or destroy a signal, not to usesignals of signals
Signals are connected setting up a static processingnetwork
SIGNAL GRAPH
INPUTSignals from the world
We are not in control of changing the value, the valueis changing everything else
TRANSFORMATIONSmap : ( a > b ) > Signal a > Signal b
Keyboard.presses : Signal KeyCode
keyboardChar: Signal Char
0
Signal.map Char.fromCode
'\0'
STATEfoldp : ( a > b > b ) > b > Signal a > Signal b
Application state all in one place
Save and undo become easy
STATE
Mouse.clicks : Signal ()
counter : Signal Int
()
foldp (\_ n -> n + 1) 0 Mouse.clicks
0
MERGEmerge : Signal a > Signal a > Signal b
MERGEclicks : Signal Action
presses : Signal Action
ticks : Signal Action
clickPressTick : Signal Action
Click
Press
Tick
mergeMany [ clicks, presses, ticks ]
Tick
ELM ARCHITECTURESimple pattern for infinitely nestable components
Great for modularity, code reuse and testing
MODULARITYHide implementation details
Expose just what you need
EXTENSIBILITYAbility to combine modules one with the other
ELM ARCHITECTURE PILLARSModel
View
Update
OUR APPLICATION
MODELData structure representing the state of the
component
Single source of truth
MODELtype alias Talk = title : String , description : String , speaker : String
VIEWview : Model > Html
No mutation of the DOM
VIEWview : Talk > Html view talk = div [ class "talk" ] [ div [] [ text ( talk.title ++ " by " ++ talk.speaker )] , div [] [ text talk.description ] ]
byMarco Perone
Front-end development is rapidly evolving, with newframeworks coming and going at a crazy pace. Amongthe many options, Elm stands out as one of the mostoriginal and promising approaches: it combines the
principles of reactive programming with the elegance ofstrongly typed functional programming, yet providing aseamless integration with javascript code. In this talk ...
Elm or how I learned to love front-end development
UPDATEupdate : Action > Model > Model
Clear representation of how the model can betransformed
type Action = ClickTitle | ClickDescription update : Action > Talk > Talk update action talk = case action of ClickDescription > talk | description = "We got a new description!"
ACTIONS IN ACTIONElm or how I learned to love front-end development by
Marco PeroneFront-end development is rapidly evolving, with new
frameworks coming and going at a crazy pace. Amongthe many options, Elm stands out as one of the mostoriginal and promising approaches: it combines the
principles of reactive programming with the elegance ofstrongly typed functional programming, yet providing aseamless integration with javascript code. In this talk ...
ALL TOGETHERfrom
to
LET'S HAVE ANOTHER ROUND
PORTS
Mechanism for sending messages in and out of ELM
INCOMING PORTSPassing 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" ]);
OUTGOING PORTSPassing messages from ELM to JavaScript
port requestTalks : Signal EventName port requestTalks = signalOfEventName
myApp.ports.requestTalks.subscribe( retrieveTalks); function retrieveTalks (eventName) ...
TASKSAbstraction 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 inthe future
To perform a task we hand it to a port
TASKSretrieveTalks : String > Task Http.Error Action retrieveTalks uri = get decoder uri |> Task.map TalksRetrieved
MAILBOXEStype alias Mailbox a = address : Address a , signal : Signal a mailbox : a > Mailbox a
TASKS LIFECYCLE WITHMAILBOXES
ELM ARCHITECTURE ANDTASKS
Asynchronous operations modelled with Effects Action
End result of execution is an Action that will be routedthrough the update function
ELM ARCHITECTURE ANDTASKS
Model is replaced by ( Model, Effects Action )
update : Action > Model > ( Model, Effects Action )
type Action = ConfRetrieved ( Maybe Conferences ) | RetrieveTalks update action joindin = case action of ConfRetrieved maybeConf > ( addConferences joindin maybeConf , task ( succeed RetrieveTalks ) )
The slides archiveDid 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'HaganInfo 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 personalsacrifice. 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'regone. Join the organizers of the two largest studentrun hackathons in the state of Florida as they share stories, personal inspirations, and essential tipscentered around building creative communities. Freestyle rap battles may replace the QGo get the slides
BSidesSLC
How to Build an Effective Information Security Risk Management Program by Kiston FinneyThis session will focus on the elements of an effective information security risk management program, including how to select a framework for assessingrisk and tailor it to your organization's culture, the difference between inherent and residual risk and why reporting on both is critical, common mistakesinformation security personnel make while trying to get a new risk management program off of the ground, how to set expectations with leadership, andhow to partner with governance, compliance, and legal teams in your organization to garner true topdown support.Go get the slides
This page is realized using the data exposed by the Joind.in API's.
RESOURCESelm-lang.org
github.com/evancz/elm-architecture-tutorial
www.elm-tutorial.org
www.elmcast.io
www.elmweekly.nl
www.elmbark.com
