Functional Fun – an Introduction to Elm

dfsdf Johannes Rubenz j_rubenz Functional Fun an Introduction to Elm

Agenda •  Introducing Elm •  Live Demo/Coding •  The Elm
Architecture •  Q & A

Elm A delightful language for reliable webapps Generate JavaScript with
great performance and no runtime exceptions http://elm-lang.org/ „ Evan Czaplicki

Why Elm? Performance

4 Main Programming Paradigms source: Kurt Nørmark Imperative / Procedural
First do this and next do that Logic Answer a question via search for a solution Object-oriented Send messages between objects to simulate the temporal evolution of a set of real world phenomena Functional Evaluate an expression and use the resulting value for something

Pure functions source: knowthen.com •  must have input parameters • 
must not use state •  must return value •  must not cause side effects

Quiz Time A pure function? function add(value1, value2) { return
value1 + value2; }

Quiz Time A pure function? function update(text) { document.getElementById("item1") .innerText
= text; }

Elm Eco System •  REPL elm-repl •  Package management elm-package
install package •  Development tool (server, compiler) elm-reactor

Live Demos •  REPL: functions

Quiz Time source: http://rundis.github.io/blog/2016/elm_maybe.html A pure Elm function? increment :
Int -> Int increment value = value = value + 1

Live Demos •  Hello, world! •  Greeter

The Elm Architecture Html.App.beginnerProgram ELM RUNTIME Model view HTML handling
events (click, input, ...) Msg update Model Model Model Model

Embedding Elm in HTML var Elm = {}; Elm.MyThing =
{ fullscreen: function() { /* take over the <body> */ }, embed: function(node) { /* take over the given node */ }, worker: function() { /* run the program with no UI */ } }; Elm sets up this API for you:

Embedding Elm in HTML fullscreen •  elm-make Greeter.elm --output greeter.js
<!DOCTYPE html> <html lang="de"> <body> <script src="greeter.js"></script> <script> var app = Elm.Greeter.fullscreen(); </script> </body> </html>

Embedding Elm in HTML embed •  elm-make Greeter.elm --output greeter.js
<div id="my-thing"></div> <script src="my-thing.js"></script> <script> var node = document.getElementById('my-thing'); var app = Elm.MyThing.embed(node); </script>

Resources My Github Gist „Starting with Elm“ •  https://gist.github.com/designrubenz/ f166cb4aff450881f2e0de0effb533d4
Workshops, Code, Consultancy •  j_rubenz •  http://design.rubenz.at Barcamp Workshop

The Elm Architecture Html.App.program ELM RUNTIME Model view HTML SubscripEons
(websockets, Eme, locaEon changes) Msg update Cmd Msg Sub Msg Ports Commands (HTTP requests, Randomness) Land of Impurity

Functional Fun – an Introduction to Elm

Functional Fun – an Introduction to Elm

designrubenz

Other Decks in Programming

Featured

Transcript

dfsdf Johannes Rubenz j_rubenz Functional Fun an Introduction to Elm

Agenda •  Introducing Elm •  Live Demo/Coding •  The Elm

Elm A delightful language for reliable webapps Generate JavaScript with

Why Elm? Performance

4 Main Programming Paradigms source: Kurt Nørmark Imperative / Procedural

Pure functions source: knowthen.com •  must have input parameters •

Quiz Time A pure function? function add(value1, value2) { return

Quiz Time A pure function? function update(text) { document.getElementById("item1") .innerText

Elm Eco System •  REPL elm-repl •  Package management elm-package

Live Demos •  REPL: functions

Quiz Time source: http://rundis.github.io/blog/2016/elm_maybe.html A pure Elm function? increment :

Live Demos •  Hello, world! •  Greeter

The Elm Architecture Html.App.beginnerProgram ELM RUNTIME Model view HTML handling

Embedding Elm in HTML var Elm = {}; Elm.MyThing =

Embedding Elm in HTML fullscreen •  elm-make Greeter.elm --output greeter.js

Embedding Elm in HTML embed •  elm-make Greeter.elm --output greeter.js

Resources My Github Gist „Starting with Elm“ •  https://gist.github.com/designrubenz/ f166cb4aff450881f2e0de0effb533d4

The Elm Architecture Html.App.program ELM RUNTIME Model view HTML SubscripEons