This document provides an overview of the Elm programming language. It discusses that Elm is a functional programming language that compiles to JavaScript, uses immutable data and pure functions. It also describes some key aspects of Elm including its strong typing, use of pattern matching, and adherence to the Elm Architecture of model-view-update. Tools for developing in Elm like elm-make and elm-repl are also mentioned.

1. ELM
|> Front end
|> Development
Digisensei
Helder Pinto
GH: @helderjnpinto / LI: linkedin.com/in/helderjnpinto || GH: @Digisensei

4. null
undefined - is not a function
impuro e mutável
write lots of tests for a tiny web app

5. elm

6. Elm
Elm is better ….
No null.
No runtime errors in practice.
No undefined is not a function.
The Compiler and Debugger is great!
http://debug.elm-lang.org/

7. elm
http://elm-lang.org/blog/blazing-fast-html-round-two

8. Elm
● Functional Language
● Haskell based
● Strongly typed
● Front end oriented
● Compiles to Js
● Very fast, Elm uses "Virtual-dom" combining Pure Functions and
Immutable data.

9. Elm
Main properties of the language:
● Strongly typed
● Pure Functions
● Immutable data

10. Elm
Strongly typed ???
JavaScript : Elm:
'1' + 1 // o resultado será '11'
'1' + true // o resultado será 1true

11. Elm
Principles
FP (Functional Programming)
Style of programming where you use PURE FUNCTIONS

12. Elm
Stateless / Pure functions
Return Value
based on Input parameters
and don’t cause side effects

13. Elm
Rules for Pure functions
1 – Has parameters!
function myFunction (x) {
}

14. Elm
Rules for Pure functions
2 – Must not use State!
var count = 0;
function myFunction (x) {
var localCount = count + 1;
...

15. Elm
Rules for Pure functions
3 – Must return a value based on parameters!
function myFunction (x) {
return x + 1;
}

16. Elm
Rules for Pure functions
4 – Must not cause side effects!
function myFunction (x) {
Document.getElementById(“item”).innerText =
“Kill ALL ”;
send_random_rockets (x);// Just
return x+1;
}

17. Elm
Functional Programming Style
=/=
Functional Programming Language

18. Elm
Functional Programming Style
In JS Require
Self Discipline
JavaScript Doesn’t Care about FP

19. Elm
Functional Programming Language
Provides Functional Guarantees
it Forces you to:
write pure functions
use immutable data

20. Elm
Immutable data

21. Elm
Immutable data
Elm use immutable data:
- Better for processing (ex. Diff with Virtual Dom )
- Code is easier to understand in general.
- Thread-safe (ex. multiple threads cannot corrupt the state )
- Compiler can check the type of data even without notation.
- No generic map, apply, fold, or filter type functions.
Instead it uses names with the prefix of its module as List.map, Dict.filter.

22. Elm
Type of data
There are as in most languages:
Int , String, Float, Char, ...
Most used:
Lists, Dictionaries, Tuples, Records, Union Types
Other structures :
Arrays, Set

23. Elm
Functions
greet : String -> String
greet name =
“Howdy” ++ “ ” ++ name ++ “ !”
greet “Samurai”
-- output Howdy Samurai !
Identifier
Parameter(s)
Return type

24. Elm
Declarative
Declare what the desired result is
greet : String -> String

25. Elm
Some examples of code
(Tuples)
ninja =
(“katana”, 23 )
Tuple.first ninja
-- output “katana”
Tuple.second ninja
-- output 23
Tuple

26. Elm
(Records & Union Types)
type alias Ninja = {
name : String,
age : Int,
experience : NinjaLevel
}
ninja =
Ninja “katana” 23 Junior
ninja.name
-- output “Katana”
Record type NinjaLevel =
Junior
| Senior
| Guru
| Ninja
Union Type
type Answer =
Yes | No | Other String

27. Elm
Currying
“Creating Building Blocks”
ex:
add a b = a + b
add 2 3 = 5
add1 = add 2
result = add1 3
-- output 5
( 3) -- output 5(add 2)

28. Elm
Pipe operator |> SUPER COMBO <| Currying
add a b =
a + b
isEven a =
a % 2 == 0
increment1 = add 1
[1,2,3,4,5]
|> List.map increment1
|> List.filter isEven
|> toString
-- output [2,4,6]
toString
<| List.filter isEven
<| List.map increment1
<| [1,2,3,4,5]

29. Elm
How update immutable data?
Create state
and
don’t mutate it

30. Elm
Immutable
ninja =
Ninja “Katana” 23 Junior
older_ninja =
{ ninja | age = 40, experience = Guru }
ninja.age -- 23
older_ninja.age -- 40

31. Elm
Null ~= Maybe a
type Maybe a
= Just a
Nothing
[ 1, 2, 3, 4 ]
|> List.head
|> toString

32. Elm
Pattern Matching with “case of”
type alias Ninja = {
name : String,
age : Int,
experience : NinjaLevel
weapon : Maybe Weapon
}
type Weapon =
Yari
| Sword
| Cross-bow
ninja1 =
Ninja “Katana” 3 Junior Nothing
ninja2 =
Ninja “Azuka” 90 Guru Yari

33. Elm
Pattern Matching with “case of”
case ninja.weapon of
Just weapon ->
case weapon of
Yari ->
“...”
Sword ->
“...”
_ ->
“Default: ” ++ (toString weapon)
Nothing ->
“No weapon ...”
type Weapon =
Yari
| Sword
| Cross-bow

34. Elm
Tools
Oficiais:
- elm-repl (read–eval–print loop)
- elm-package (Module manager and versions “based on file ( elm-package.json )”)
- elm-make ( Elm compiler)
Comunidade:
- elm-install ( Install modules directly from github and official )
- elm-format ( Code formatter )
- ellie-app (online editor, https://ellie-app.com/new )
- Html to Elm (atom plugin, online : https://mbylstra.github.io/html-to-elm/)
- elm-live ( A flexible dev server for Elm. Live reload included. https://git.io/elm-live )

35. Elm
The Elm Architecture

36. Elm
Elm Architecture
model - view - update
unidirectional
organized communication

37. Elm
Elm Architecture
● Model — the state of your application
● Update — a way to update your state
● View — a way to view your state as HTML
● Commands — A Cmd lets you do stuff: generate a random number, send an HTTP request, etc.
●
● Subscriptions — A Sub lets you register that you are interested in something: tell me about location
changes, listen for web socket messages, Mouse, Keyboard ,etc.

38. Elm
The Elm Architecture + Effects

39. Elm
The Elm Architecture
View
Update
UI
Model
Msg
HTML
Ninja user

40. Elm
Elm Architecture (The Basic Pattern)
import Html exposing (..)
-- MODEL
type alias Model = { ninja }
http://package.elm-lang.org/packages/elm-lang/html/latest
This uses Virtual Dom
Maybe a Record, Integer, String, … etc

41. Elm
Elm Architecture (The Basic Pattern)
-- UPDATE
type Msg = Reset | ...
update : Msg -> Model -> Model
update msg model =
case msg of
Reset -> ...
...
Pattern matching for all Msg
Send to elm runtime as the changes it has to do

42. Elm
Elm Architecture (The Basic Pattern)
-- VIEW
view : Model -> Html Msg
view model =
div [ id “divNinja”, class “ninja-name”, onClick Reset ]
[
text (model.ninja).name
]
...
List of Html.Attributes
List of child elements

43. Elm
Elm Architecture (The Basic Pattern)
main =
Html.Program
{ model = initialModel
, view = view
, update = update
}
Record with basic Elm web app

44. Elm
JavaScript Interop
Elm can talk to JS, using PORTS.
Works like a client and server “websockets”.
Elm listen to changes in JavaScript subscription port and
vice versa.

45. Elm
Embed in HTML
elm-make src/Main.elm --output= main.js
<div id="main"></div>
<script src="main.js"></script>
<script>
var node = document.getElementById('main');
var app = Elm.Main.embed(node);
// Note: if your Elm module is named "MyThing.Root" you
// would call "Elm.MyThing.Root.embed(node)" instead.
</script>

46. Elm
Demo
Web chat with phoenix framework.