elm: make yourself a happy front-end web developer
Post on 16-Apr-2017
302 Views
Preview:
TRANSCRIPT
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
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
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
top related