A brief introduction to Elm programming language and The Elm Architecture. Write more declarative and maintainable front-end code. Link to sample code is at the end of the slide.

1. Make Yourself a Happy Front-end
Web Developer with Elm
ASEP BAGJA PRIANDANA | FROYO FRAMEWORK

2. What do Programmers Want?
Usable
(time to novice to product)
Maintainable
(ease of adding new feature)
ML Family
(SML, OCaml, Haskell)
JavaScript
JavaX
X
Gradual type?

3. Why Elm?
A functional programming language that compiles to JavaScript
Front-end web development without runtime error exception
Friendly error messages
Every function is curried function by default

4. Why Functional Programming Matter?
Immutability
Pure function or stateless function
Safe code means reliable code
It's easy to refactor

5. The Tooling
elm-repl, for playing with simple expression
elm-reactor, for building an elm project without cli
elm-make, compiler for the elm code
elm-package, for handling the dependencies

6. The Elm Architecture
View View View
Update Update UpdateModel Model Model
functions
functions
types
Actions types

7. The Syntax: Elm vs
JavaScript
COMPARING BETWEEN TWO LANGUAGES

8. Comments
ELM
-- single comment
{- multiline comment
{- can be nested -}
-}
JAVASCRIPT
// single comment
/* multiline comment
line 2
*/

9. Literals
ELM
True : Bool
False : Bool
21 : number -- Can be Int or Float
3.14 : Float
‘a’ : Char
“abc” : String
“””
This is multiline string
Oh yeah multiline
“””
JAVASCRIPT
true // bool
false // bool
21 // number
3.14 // number
‘a’ // string
“abc” // string
`This is multiline string
By using ES6 template string`

10. Variables
ELM
let
length = 12
wide = 5
in
length * wide
JAVASCRIPT
let length = 12, // ES6
wide = 5;
length * wide;

11. Conditional
ELM
if age > 42 then
“You are considered old”
else
“You are still young”
JAVASCRIPT
age > 42 ?
“You are considered old”
:
“You are still young”;
// the closest form of condition
// in JS with the same behaviour as
// Elm is using ternary operator

12. List in Elm and Array in JS
ELM
[1..4]
[1,2,3,4]
1 :: [2,3,4]
1 :: 2 :: 3 :: 4 :: []
JAVASCRIPT
[1,2,3,4]

13. Records in Elm and Object in JS
ELM
-- create
user = { name = “Tom”, age = 23 }
-- access field
user.name
-- update fields
{ user |
name = “Jerry”,
age = 26
}
JAVASCRIPT
-- create
const User = { name: “Tom”, age: 23};
-- access field
User.name
-- update fields
User.name = “Jerry”;
User.age = 26;

14. Function and Anonymous Function
ELM
-- define function
totalPrice discount price =
price – (discount * price)
-- invoke function
totalPrice 0.5 15000
-- anonymous function
n -> String.toUpper n
JAVASCRIPT
-- define function
function totalPrice(discount, price) {
return price – (discount * price);
}
-- invoke function
totalPrice(0.5, 15000);
-- anonymous function
(n) => n.toUpperCase(); // ES6
function(n) { return n.toUpperCase(); }; // ES5

15. Type Signature
ELM
calculate : Int -> Int -> Int
calculate x y =
let squareX = x ^ 2
squareY = y ^ 2
in squareX + squareY
JAVASCRIPT
// There’s no such thing like this in
// JS

16. Function Composition
ELM
formatting : String -> List String
formatting yourname =
yourname
|> String.toLower
|> String.trim
|> String.split “ “
JAVASCRIPT
// by default it does not exist in JS
// unless we use functional programming
// library such as Ramda

17. Elm and JavaScript
Interop
WHAT HAPPENS IN JAVASCRIPT STAY IN JAVASCRIPT.

18. Two Ways to Interop
PORTS
We can consider it as a hole inside the Elm
program for sending the value ins and outs
Sending values out to JS is a command
Listening values coming in from JS is a
subscription.
FLAGS
It’s more like a static configuration for the Elm
program

19. How to Use Elm in Production?
Have an advocate in your team
Start small
Fix a problem
Write Elm code

20. Contact Me
Email: asep@froyo.co.id
Framework’s web: http://www.framework.id
Personal’s web: http://www.asep.co
You can find the source code on this presentation at:
https://github.com/froyoframework/basic-elm-sample
https://github.com/froyoframework/elm-shopping-cart-sample