elm or how i learned to love front-end development
TRANSCRIPT
![Page 1: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/1.jpg)
ELMOR HOW I LEARNED TO FRONT-END
DEVELOPMENT
![Page 2: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/2.jpg)
WHO AM I? / @marcoshuttle [email protected]
PHP developer in my daily life
grew up as a mathematician
weakness for functional programming
![Page 3: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/3.jpg)
DISCLAIMERI'm not an expert
Just loving ELM and wanting to share it
![Page 4: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/4.jpg)
WHO ARE YOU?Front end developers?
Functional programmers?
Both?
Tried ELM?
Running ELM in production?
![Page 5: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/5.jpg)
WHAT IS ELM?Statically typed reactive functional programming in the
browser
![Page 6: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/6.jpg)
RUNS IN THE BROWSERCompiles to Html, Javascript and Css
elm make Main.elm
![Page 7: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/7.jpg)
STATIC TYPINGType of a variable is known at compile time
Errors catched at compile time
NO RUNTIME EXCEPTIONS!!
Enforced semantic versioning
Hot-swapping
![Page 8: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/8.jpg)
FUNCTIONAL PROGRAMMINGMaking inputs and outputs explicit
![Page 9: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/9.jpg)
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 ...
![Page 10: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/10.jpg)
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
![Page 11: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/11.jpg)
SIGNALSSimilar to EventEmitters or Observables in Javascript
They exist for the entire lifetime of the program
They always have an initial value
![Page 12: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/12.jpg)
EXAMPLES OF SIGNALSmain = Signal.map show Mouse.position
(0,0)
![Page 13: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/13.jpg)
EXAMPLES OF SIGNALSmain = Signal.map display Keyboard.presses display keyCode = show ( Char.fromCode keyCode )
'\0'
![Page 14: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/14.jpg)
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
![Page 15: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/15.jpg)
SIGNAL GRAPH
![Page 16: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/16.jpg)
INPUTSignals from the world
We are not in control of changing the value, the valueis changing everything else
![Page 17: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/17.jpg)
TRANSFORMATIONSmap : ( a > b ) > Signal a > Signal b
Keyboard.presses : Signal KeyCode
keyboardChar: Signal Char
0
Signal.map Char.fromCode
'\0'
![Page 18: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/18.jpg)
STATEfoldp : ( a > b > b ) > b > Signal a > Signal b
Application state all in one place
Save and undo become easy
![Page 19: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/19.jpg)
STATE
Mouse.clicks : Signal ()
counter : Signal Int
()
foldp (\_ n -> n + 1) 0 Mouse.clicks
0
![Page 20: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/20.jpg)
MERGEmerge : Signal a > Signal a > Signal b
![Page 21: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/21.jpg)
MERGEclicks : Signal Action
presses : Signal Action
ticks : Signal Action
clickPressTick : Signal Action
Click
Press
Tick
mergeMany [ clicks, presses, ticks ]
Tick
![Page 22: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/22.jpg)
ELM ARCHITECTURESimple pattern for infinitely nestable components
Great for modularity, code reuse and testing
![Page 23: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/23.jpg)
MODULARITYHide implementation details
Expose just what you need
EXTENSIBILITYAbility to combine modules one with the other
![Page 24: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/24.jpg)
ELM ARCHITECTURE PILLARSModel
View
Update
![Page 25: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/25.jpg)
OUR APPLICATION
![Page 26: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/26.jpg)
![Page 27: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/27.jpg)
MODELData structure representing the state of the
component
Single source of truth
![Page 28: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/28.jpg)
MODELtype alias Talk = title : String , description : String , speaker : String
![Page 29: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/29.jpg)
VIEWview : Model > Html
No mutation of the DOM
![Page 30: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/30.jpg)
VIEWview : Talk > Html view talk = div [ class "talk" ] [ div [] [ text ( talk.title ++ " by " ++ talk.speaker )] , div [] [ text talk.description ] ]
![Page 31: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/31.jpg)
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
![Page 32: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/32.jpg)
UPDATEupdate : Action > Model > Model
Clear representation of how the model can betransformed
![Page 33: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/33.jpg)
type Action = ClickTitle | ClickDescription update : Action > Talk > Talk update action talk = case action of ClickDescription > talk | description = "We got a new description!"
![Page 34: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/34.jpg)
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 ...
![Page 35: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/35.jpg)
ALL TOGETHERfrom
to
![Page 36: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/36.jpg)
LET'S HAVE ANOTHER ROUND
![Page 37: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/37.jpg)
PORTS
Mechanism for sending messages in and out of ELM
![Page 38: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/38.jpg)
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" ]);
![Page 39: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/39.jpg)
OUTGOING PORTSPassing messages from ELM to JavaScript
port requestTalks : Signal EventName port requestTalks = signalOfEventName
myApp.ports.requestTalks.subscribe( retrieveTalks); function retrieveTalks (eventName) ...
![Page 40: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/40.jpg)
TASKSAbstraction to model side-effects handled by the
runtime
Way to describe asynchronous operations that may fail
![Page 41: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/41.jpg)
TASKS LIFECYCLE
Tasks describe operations that could be performed inthe future
To perform a task we hand it to a port
![Page 42: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/42.jpg)
TASKSretrieveTalks : String > Task Http.Error Action retrieveTalks uri = get decoder uri |> Task.map TalksRetrieved
![Page 43: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/43.jpg)
MAILBOXEStype alias Mailbox a = address : Address a , signal : Signal a mailbox : a > Mailbox a
![Page 44: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/44.jpg)
TASKS LIFECYCLE WITHMAILBOXES
![Page 45: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/45.jpg)
ELM ARCHITECTURE ANDTASKS
Asynchronous operations modelled with Effects Action
End result of execution is an Action that will be routedthrough the update function
![Page 46: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/46.jpg)
ELM ARCHITECTURE ANDTASKS
Model is replaced by ( Model, Effects Action )
update : Action > Model > ( Model, Effects Action )
![Page 47: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/47.jpg)
type Action = ConfRetrieved ( Maybe Conferences ) | RetrieveTalks update action joindin = case action of ConfRetrieved maybeConf > ( addConferences joindin maybeConf , task ( succeed RetrieveTalks ) )
![Page 48: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/48.jpg)
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.
![Page 50: Elm or how I learned to love front-end development](https://reader034.vdocuments.us/reader034/viewer/2022051318/58f9b371760da3da068bd633/html5/thumbnails/50.jpg)
RESOURCESelm-lang.org
github.com/evancz/elm-architecture-tutorial
www.elm-tutorial.org
www.elmcast.io
www.elmweekly.nl
www.elmbark.com