Make Yourself a Happy Front-end Web Developer with ElmASEP BAGJA PRIANDANA | FROYO FRAMEWORK

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?

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

Why Functional Programming Matter? Immutability

Pure function or stateless function

Safe code means reliable code

It's easy to refactor

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

The Elm Architecture

View View View

Update Update UpdateModel Model Model

functions

functions

types Actions types

The Syntax: Elm vs JavaScriptCOMPARING BETWEEN TWO LANGUAGES

CommentsELM

-- single comment

{- multiline comment

{- can be nested -}

-}

JAVASCRIPT

// single comment

/* multiline comment

line 2

*/

LiteralsELM

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`

VariablesELM

let

length = 12

wide = 5

in

length * wide

JAVASCRIPT

let length = 12, // ES6

wide = 5;

length * wide;

ConditionalELM

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

List in Elm and Array in JSELM

[1..4]

[1,2,3,4]

1 :: [2,3,4]

1 :: 2 :: 3 :: 4 :: []

JAVASCRIPT

[1,2,3,4]

Records in Elm and Object in JSELM

-- 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;

Function and Anonymous FunctionELM

-- 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

Type SignatureELM

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

Function CompositionELM

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

Elm and JavaScript InteropWHAT HAPPENS IN JAVASCRIPT STAY IN JAVASCRIPT.

Two Ways to InteropPORTS

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

How to Use Elm in Production? Have an advocate in your team

Start small

Fix a problem

Write Elm code

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