Trabajo prctico:

Lenguaje de programacin Elm

Alumna:JimenaPose
Legajo:49015
Materia:ProgramacinFuncional
Fecha:1deabrilde2013

ndice
Introduccin...............................................................................................................................3
EvanCzaplicki....................................................................................................................3
Desarrollo..................................................................................................................................4
Porquprogramacinfuncional?.....................................................................................4
Editorenlnea.....................................................................................................................4
Programacinfuncionalreactiva........................................................................................4
Compilador..........................................................................................................................4
Ejemplosbsicos................................................................................................................5
Texto.............................................................................................................................5
Imgenesyvideos........................................................................................................6
Posicionamiento............................................................................................................6
Disposicin(Layout).....................................................................................................7
Formas..........................................................................................................................7
Grficosyprogramacinfuncional...............................................................................8
Utilizandolaprogramacinfuncionalreactiva....................................................................8
Seales.........................................................................................................................9
EjemplosdeGUI...........................................................................................................9
Slideshow................................................................................................................9
Relojanalgico......................................................................................................10
Tecladoyanimaciones.........................................................................................10
Red........................................................................................................................11
Fibonacciencuadrados........................................................................................12
JuegosenElm..................................................................................................................13
Estructuradelosjuegos.............................................................................................13
Loquefalta.........................................................................................................................14
Conclusiones..........................................................................................................................15
Bibliografa...............................................................................................................................16

Introduccin
Elmesunlenguajedeprogramacinfuncionalutilizadoparacrearinterfacesgrficasweb.Elm
utilizaprogramacinfuncionalreactiva,compilaHTML,CSSyJS,yesestrictamentetipado.La
programacinfuncionalreactivaseutilizaparacrearaplicacionesdealtainteractividadycrear
entornosgrficosdeunamanerapuramentefuncional.
Elmsurgedelanecesidaddehacerlaprogramacinwebmssencillaydeunamanerams
ordenada.Sumisinesreducireltiempoyproblemasqueexistenentreunaideayla
implementacindelamisma.Elproyectoesdecdigoabierto,yestdisponibleengithub.

Evan Czaplicki
EvanCzaplickieselcreadordeElm.SegradurecientementedelacarreradeCienciasdela
computacinenHarvard.Suinterseshacerlaprogramacinmsaccesible,fcildeentender
ydeusar.Susobjetivosfueroninfluenciadosporunestudioformalenloslenguajesde
programacinyporexperienciasprcticascomoempleadoenGoogleyMicrosoft.Actualmente
esttrabajandocomoingenieroensistemasenGoogle.

Desarrollo
Por qu programacin funcional?
JohnCarmack(fundadordeidSoftware)dijo:Nomatterwhatlanguageyouworkin,
programminginafunctionalstyleprovidesbenefits.Youshoulddoitwheneveritisconvenient,
andyoushouldthinkhardaboutthedecisionwhenitisntconvenient.Enespaol:Noimporta
enqulenguajesetrabaje,programarconestilofuncionaltraebeneficios.Deberashacerlo
cadavezqueseaconveniente,ydeberiaspensarbienladecisinquetomescuandonosea
conveniente.Haymuchoquesepuedeaprenderdelaprogramacinfuncional,ylas
limitacionessonlasherramientasquetodavanoexisten.Elmtratadeacercaresas
herramientasqueayudenahacermsprcticalaprogramacindeinterfacesgrficas.
Utilizandoprogramacinfuncionalseconsiguedesarrollaruncdigoexpresivoy
matemticamenteelegantesinlanecesidaddebajaralniveldelamquinaparadescribirel
procesoquedebellevaracaboporelprograma.

Editor en lnea
Elmcuentaconuneditorenlneaquefacilitalosprimerospasosenellenguaje.Sepuede
probareleditorenlneasinlanecesidaddeinstalarodescargarnada,ysisedecidecomenzar
unproyectoenElm,sepuededescargareleditoreinstalarlo.Porotrolado,eleditorenlnea
cuentaconunaseccindondemuestraelresultadodecorrerelcdigo,esdecir,cuandose
abreeleditor,alaizquierdahayunacolumnadondesepuedeescribirelcdigo,yaladerecha
otracolumnadondeseveelcdigofuncionando.
LapginawebdeElmestescritaprincipalmenteenElm,yutilizaunservidorenHaskell.A
excepcindeleditorenlnea,elrestodelsitioestescritoenElm.SeeligiHaskellcomo
frameworkparaelservidoryaqueesteeraellenguajeutilizadoparaescribirelcompilador,lo
quepermitequeelservidoryelcompiladorinteractenmuyprolijamente.

Programacin funcional reactiva

Laprogramacinfuncionalreactiva(FRP)esunasolucinacmohacerunainterfazgrfica
puramentefuncionalydemaneradeclarativa(Selepuededeciralacomputadoraquesloque
sequieremostrarsinlanecesidaddedecirlecmo).Proveeestructurasdecontroldeflujopara
eltiempo,loquefacilitaeltrabajoconeventossincrnicosyasincrnicos.
Esimportanteremarcarelhechodequeseadeclarativa,yaquelamayoradelosframeworks
dehoyendasonnodeclarativos,esdecir,dejanenmanosdelprogramadorelmanejodelos
detallesnoesencialesdelasentradasdeusuario,haciendoeltrabajomscomplicadoy
extenso.Porlotanto,conprogramacinfuncionalreactiva,muchosdelosdetallesquedanen
manosdelcompilador,permitiendoalprogramadorpreocuparsesoloporproblemas
importantes.

Compilador
ElcompiladordeElmestcompletamenteescritoenHaskell,yaqueHaskellproveemuchas
librerasquefacilitanesto,comolibrerasparaparsear.Laversinactualdelcompiladorhace
4

algunaslevesoptimizacionesantesdegenerarelcdigoJavaScript.Elsistemaentiempode
ejecucinparaelcdigogeneradoesunacombinacindeHTML,CSSyJavaScriptquemaneja
eventosyactualizacionesdepantalla.

Ejemplos bsicos
Cuandoseaprendeunlenguajedeprogramacinesimportantecontarconejemplossobresus
diferentescaractersticas.EnlapginadeElmsepuedenencontrardiversosejemplosque
demuestranelaltopoderdeestelenguaje.Acontinuacinsepresentanalgunosejemplospara
mostrarlascaractersticasbsicasdeElm.

Texto
ConElmesmuyfcilmostrartextoenpantalla.Bastaconllamaraunafuncinllamada
plainTextypasarlecomoparmetrolacadenadetextoquesedeseamostrar.
Porejemplo,elsiguienteprogramamuestraenpantallalacadenadetextoHello,World!:
main=plainTextHello,World!

Porltimo,ElmposeesoporteparaMarkdown,loquehacequeselepuedadarformaaltexto
quesedeseamostrarfcilmenteutilizandocomandosyaconocidos,porejemplo:
main=[markdown|
#MarkdownSupport
Elmhasnativemarkdownsupport,makingiteasytocreatecomplex
textelements.Youcaneasilymake:
Headers
[Links](/)
Images
**Bold**,*italic*,and`monospaced`text
Lists(numbered,nested,multiparagraphbullets)
Itallfeelsquitenaturaltotype.FormoreinformationonMarkdown,
see[thissite](http://daringfireball.net/projects/markdown/).
|]

Imgenes y videos
Paramostrarimgenessedebeusarlafuncinimage,quedeberecibircomoparmetroel
tamaodelaimgenylaimgenquesedeseamostrar.Sinoseestsegurodeltamaodela
imgensepuedeusarlafuncinfittedImage,quevaahacerlomejorquepuedaparaquela
imgenentreeneltamaoqueselepasaporparmetro,perosindeformarse.Porltimo,para
mostrarunvideo,seutilizalafuncinvideo,lacualrecibelosmismosparmetrosque
image.Elsiguienteesunejemplodecmomostrarunvideoenpantalla:
main=video320240"/bear.ogg"

Posicionamiento
Paraposicionarelementosenlapantallasepuedeutilizaruncontainer,alqueselepasael
tamao,laubicacindeloquecontieneyelelementoensi.Asuvez,elcontainerbrindala
posibilidaddedejarespaciosentreelementos.Elcontainersolucionalosgrandesproblemas
quetieneHTMLyCSSparacentrarelementosenunapartedelapantallaodejarespaciosentre
6

ellos.Unejemplodeunaimgende300x300posicionadaenelmediodeuncontainercolor
grisde500x500sera:
main=colorgrey$container500500middle(fittedImage300300"book.jpg")

Disposicin (Layout)
Loselementossepuedendisponerdeformasmscomplejasutilizandolafuncinflow.La
mismarecibeunadireccin(down,up,left,right,inward,outward)yunarreglodeelementos.
Utilizandoinwardooutwardsepuedenlogrardiferentescapas,loquesetilparaubicartexto
porencimadeunaimgen.Unejemplodeusodelafuncinflowsera:
main=flowdown[plainText"Byusingthe\"flow\"function,"
,plainText"wecanstackelements"
,plainText"ontopofotherelements."]

Formas
Elmproveeunainterfaceparadibujarformasirregulares,talescomoelpentgonooelcrculo.
Dichasformassepuedendibujarcondiferentesbordesycolores,rotarlas,trasladarlasydarles
diferentestamaos.Porotrolado,proveeuncollage,queesunacoleccindeformas.Estose
puedemostrarconelsiguienteejemplo:
square=rect200200(150,150)
circle=oval140140(150,150)
7

pentagon=ngon560(150,150)
main=collage300300
[outlinedblacksquare
,filledgreenpentagon
,customOutline[8,4]bluecircle
,rotate0.875.toForm(100,100)$plainText"Anyelementcangohere!"]

Grficos y programacin funcional

Losejemplospreviamentemostradosdemuestranquesepuedenhacergrficosdeunaforma
puramentefuncional,enaltonivel,conunasemnticamuyclara,yluegosepuedejuntartodoy
sepuedeobservarquesiguemanteniendosuformayorden.

Utilizando la programacin funcional reactiva

Encuantoalasreaccionesenlainterfazgrfica,histricamentesiemprefueronmuy
imperativas.Loquesequiereespasardelpollingoloseventosylistenersaunnivelde
abstraccinmsalto.Porejemplo,Javamanejalasreaccionesconeventosylisteners,el
problemaesqueestossedebenmanejarenelordenenquelosintroduceelusuario,encaso
contrarioelusuariovaaobteneruncomportamientonodeseado.
Paramoverseaunniveldeabstraccinmsalto,elprimerproblemaqueseencuentraesque
setienenvaloresinmutables,porejemplosisetieneunaposicinounacoordenadacomolas
siguientesnoselespuedecambiarelvalor:
(3,4)::(Int,Int)
coordinate::(Int,Int)
Porlotanto,pararepresentarunaentradadelmouse,cuandonadadeloquesetienesepuede
cambiar,seintroducelaideadevaloresquevaranconeltiempo.enestecaso,laposicindel
mouseserepresentaconunasealdeunpardeenteros,porejemplo:
Mouse.position::Signal(Int,Int)
8

DondeSignalesunconjuntodeeventos,yMouse.positioncambiaautomticamentea
medidaquelaposicindelmousecambia.Porlotanto,cualquiercosaquedependadela
posicindelmousetambinvaacambiarautomticamente.

Seales
Unaanimacinsepuedeinterpretarcomounasealdeeventos,esdecir,eventosquecambian
coneltiempo.Parapoderusarlassealessedisponedelafuncinlift:
lift::(a>b)>Signala>Signalb
Lifttomaunafuncin,laaplicaaalgoenunasealydevuelveunasealdelresultado(Sies
necesariopasarledosargumentosalift,sedebeutilizarlift2,lomismocontresoms
argumentos).Porejemplo,sisequiereimprimirenpantallalaposicindelmouse,sepuede
escribirelsiguientecdigo:
main=liftasTextMouse.position
Obteniendocomoresultadolaposicindelmouseactualizandoautomticamente,amedidaque
estesemueva.Todoslosinputsserepresentancomoseales,queluegosepuedenrenderizar
conlafuncinquesedesee.

Ejemplos de GUI
LossiguientessonalgunosejemplosquedemuestranelgranpoderquetieneElmysu
simpleza.Sepuedeobservarquesenecesitanpocaslneasdecdigoparahacercosasmuy
complejas.
Slideshow
Sepuedenmostrarimgenesdeunamaneramuysimpleutilizandoelmouseparapasarlas.Se
tienelasealMouse.clicks,queenvauneventocadavezquesepresionaelmouse,porotro
lado,setienelafuncincount,quevaacontarlacantidaddevecesqueseenvadichoevento.
Conelsiguientecdigoseobtieneunapresentacindeimgenes,lascualessepuedenpasar
haciendopresionandoelmouse.
ithilst=caselstof{x:xs>ifi==0thenxelseith(i1)xs}
images=["book.jpg","shells.jpg","stack.jpg","car.jpg","pipe.jpg"]
slideShow(w,h)index=
leti=index`mod`lengthimagesin
colorblack.containerwhmiddle.image472315$ithiimages
clickCount=countMouse.clicks
main=lift2slideShowWindow.dimensions(clickCount)

Reloj analgico
handclrlentime=
lett=pi*inSecondstime/30pi/2in
solidclr$line[(200,200),(200+len*cost,200+len*sint)]
clockt=collage400400
[filled(rgb96176224)$ngon12110(200,200)
,handred100t
,handblack100(t/60)
,handblack60(t/720)]
main=liftclock(everysecond)

Teclado y animaciones
desired=50
timestep=fpsdesired
delta=letbothZero(x,y)=x==0&&y==0
scales{x,y}=(x*s/10,0y*s/10)
scaledDir=lift2scaletimestepKeyboard.arrows
indropIfbothZero(0,0)$sampleOntimestepscaledDir
10

position=letadd(a,b)(c,d)=(a+c,b+d)
infoldpadd(0,0)delta

DisplaymovingsquareandFPSonscreen.
screenposactual=
flowdown[collage400400[outlinedgrey(rect400400(200,200))
,outlinedblack(rect4040pos)]
,plainText"Movethesquarearoundwiththearrowkeys."
,plainText$"Actualframespersecond:"++showactual
,plainText$"Desiredframespersecond:"++showdesired
]
averageFPS=lift(truncate.(/)second)(average40timestep)
main=lift2screenpositionaverageFPS

Red
quadrantspcn=
letscale=map((*)spc)
xs=map(\x>(x,0)).scale$[0..n]
ys=map(\y>(0,y)).scale$reverse[0..n]
inzipWithsegmentxsys

11

main=collage300300.map(solidblack)$quadrant1030

Fibonacci en cuadrados
Createsquares
fibHelpabn=ifn<=0thenaelsefibHelpb(a+b)(n1)
fib=fibHelp01
fibSquaren=
letfN=fibn
len=fN*15
clr=rgb((85*n)`mod`256)((36*n)`mod`256)((51*n)`mod`256)
incolorclr.containerlenlenmiddle$asTextfN

Combinesquares
ithilst=caselstof{x:xs>ifi==0thenxelseith(i1)xs}
dirs=[beside,above,flipbeside,below]
combinentiles=
letdir=ith(n`mod`lengthdirs)dirsin
dirtiles(fibSquaren)

Putitalltogether

12

main=foldlcombine(fibSquare1)[2..7]

Juegos en Elm
Histricamente,losjuegossehacenbajounparadigmaimperativo,loquehacequesepierdan
losbeneficiosdelaprogramacinfuncionalpura.Comosemencionpreviamente,la
programacinfuncionalreactivahaceposibleunainteraccinricaconelusuariosinmayores
complicacionesenlaprogramacin.
Sepuedeobservarquelaprogramacindejuegosutilizandoelparadigmaimperativoes
demasiadoflexible,sepuedecambiarcualquiercosaencualquiermomentoysepuedetenerel
cdigodemasiadodesorganizado.Porelcontrario,Elmrequiereunaestructurainternabien
organizada.Nosepuededesarrollarunainterfzgrficadeusuariocomplejaamenosqueselo
hagadeunamaneraquesepareclaramentelosdiferentescomponentes.

Estructura de los juegos

Enelmtodoslosjuegosdebentenerlamismaestructura.Lamismaconsisteenlassiguientes
trespartes:
Modelodeljuego(Model):Dequestcompuestoeljuego,quesloquelodefine
(Unapaleta,unapelota,botonesdeentrada,etc)
Actualizacindeljuego(Update):Dadosciertosinputsyelmodelodefinido,cmose
obtieneelsiguienteestadodeljuego.Porlotanto,enunaseriedepasos,sedebe
establecertodalalgicadeljuego,basndoseenlasentradasdeljuegodefinidasenel
modelo.Separandoestodelmodelodeljuego,sepuedecambiarsucomportamientosin
lanecesidaddecambiarcmoseve.
Vistadeljuego(View):Cmosevisualizaeljuego,lasformas,posiciones,coloresy
13

tamaosdecadaelementoquesequierarepresentar.Estecdigoestcompletamente
separadodelalgicadeljuego,porlotantopuedesermodificadosinafectarcualquier
otrapartedelprograma.
SelopuedepensarcomounaalternativafuncionalalmodeloModelViewController.

Lo que falta
Elm,actualmentenosoporta:
Anotacionesdetipo(Sinembargoseagregarenunafuturaversin).
Establecerlaprecedenciaoasociatividaddeoperadoresinfijos(Tambinseagregar).
Seccindeoperadorescomo(1+).
Definicionesdeguardaocasosdeguarda(Parahacerestosedebenusarvariosif).
Clausulaswhere.
Notacionesdo,proc,osimilares.
Unoperadordenegacinunario(Negative3eslomismoque03).
Declaracionesdefuncionesenvariaslneas.

14

Conclusiones
Elmpromuevelacreacindeinterfacesgrficasconelparadigmafuncional.Porotrolado,
separaprolijamentelosdatosdelapresentacin,yelcdigodelavistadelreactivo.Estas
separacionesfacilitanlacreacindecdigomodularymantenible.
Elmesunenfoquedeclarativoalasinterfacesgrficasdeusuario.Laprogramacinfuncional
reactivalepermitealprogramadorespecificarlasinteraccionesconelusuarioenmuyaltonivel.
Adems,laslibrerasgrficasdeElm,juntoconlaprogramacinfuncionalreactiva,hacenque
crearinterfacesgrficasmultimediacomplejasseamuysimple.
Elobjetivodeelmeslaweb,apuntaraHTML,CSSyJavaScripttienemuchosbeneficios:
Elmpuedecorrerencualquiernavegadorquesoporteloslineamientosmodernosdela
web.Estohacequetengasoporteparaunaampliavariedaddedispositivosconun
backendsencillo.
Lasincompatibilidadesentrelosnavegadoresyanosonunproblemaparalos
desarrolladores,sinoparalosprogramadoresdecompiladores.
LasAPIsdebajoniveldelawebpuedenserencapsuladasenabstraccionesms
simples,comolohacelafuncincollage.

15

Bibliografa

PginawebdeElm:http://elmlang.org/
TesisdeEvanCzaplicki:
http://www.testblogpleaseignore.com/wpcontent/uploads/2012/03/thesis.pdf
Papersdeprogramacinfuncionalreactiva:
http://haskell.cs.yale.edu/wpcontent/uploads/2011/02/icfp97.pdf
http://haskell.cs.yale.edu/wpcontent/uploads/2011/02/workshop02.pdf
http://www.haskell.org/haskellwiki/Functional_Reactive_Programming
EntrevistaaEvanCzaplicki:
http://radar.oreilly.com/2012/12/emerginglanguagesspotlightelm.htm
BlogsobreElm:http://www.testblogpleaseignore.com/2012/06/21/whyelm/
PresentacindeElm:http://www.ustream.tv/recorded/29330499

16