elm or how i learned to love front-end development

ELMOR 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 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 ...", "Front­end 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 student­run 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 top­down support.Go get the slides

This page is realized using the data exposed by the Joind.in API's.

CREDITShttps://github.com/yang-wei/elmflux

RESOURCESelm-lang.org

github.com/evancz/elm-architecture-tutorial

www.elm-tutorial.org

www.elmcast.io

www.elmweekly.nl

www.elmbark.com

THANKS!

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