make yourself a happy front-end web developer with elm
TRANSCRIPT
![Page 1: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/1.jpg)
Make Yourself a Happy Front-end Web Developer with ElmASEP BAGJA PRIANDANA | FROYO FRAMEWORK
![Page 2: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/2.jpg)
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?
![Page 3: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/3.jpg)
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
![Page 4: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/4.jpg)
Why Functional Programming Matter? Immutability
Pure function or stateless function
Safe code means reliable code
It's easy to refactor
![Page 5: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/5.jpg)
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
![Page 6: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/6.jpg)
The Elm Architecture
View View View
Update Update UpdateModel Model Model
functions
functions
types Actions types
![Page 7: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/7.jpg)
The Syntax: Elm vs JavaScriptCOMPARING BETWEEN TWO LANGUAGES
![Page 8: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/8.jpg)
CommentsELM
-- single comment
{- multiline comment
{- can be nested -}
-}
JAVASCRIPT
// single comment
/* multiline comment
line 2
*/
![Page 9: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/9.jpg)
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`
![Page 10: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/10.jpg)
VariablesELM
let
length = 12
wide = 5
in
length * wide
JAVASCRIPT
let length = 12, // ES6
wide = 5;
length * wide;
![Page 11: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/11.jpg)
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
![Page 12: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/12.jpg)
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]
![Page 13: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/13.jpg)
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;
![Page 14: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/14.jpg)
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
![Page 15: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/15.jpg)
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
![Page 16: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/16.jpg)
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
![Page 17: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/17.jpg)
Elm and JavaScript InteropWHAT HAPPENS IN JAVASCRIPT STAY IN JAVASCRIPT.
![Page 18: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/18.jpg)
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
![Page 19: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/19.jpg)
How to Use Elm in Production? Have an advocate in your team
Start small
Fix a problem
Write Elm code
![Page 20: Make Yourself a Happy Front-end Web Developer with Elm](https://reader035.vdocument.in/reader035/viewer/2022070516/587071de1a28ab48378b7b71/html5/thumbnails/20.jpg)
Contact Me Email: [email protected]
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