Elm: delightful web development
-
Upload
amir-barylko -
Category
Technology
-
view
371 -
download
0
Transcript of Elm: delightful web development
![Page 1: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/1.jpg)
delightful webdevelopment
elm
![Page 2: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/2.jpg)
HTML and JS
(so far)
![Page 3: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/3.jpg)
IT’S A FREAKING
MESS!
![Page 4: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/4.jpg)
The ELM
language
![Page 5: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/5.jpg)
Open source
elm-lang.org
![Page 6: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/6.jpg)
Haskell inspired
(and built with)
![Page 7: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/7.jpg)
Functional
![Page 8: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/8.jpg)
Simple
![Page 9: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/9.jpg)
www.elm-tutorial.org
![Page 10: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/10.jpg)
Transpiler
![Page 11: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/11.jpg)
ES3
![Page 12: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/12.jpg)
Web Assembly
![Page 13: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/13.jpg)
Functionsadd : Int -> Int -> Int
add x y =
x + y
![Page 14: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/14.jpg)
Partial Applicationadd2 = add 2
add2 3 -- result 5
![Page 15: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/15.jpg)
Pipe Operator3
|> multiply 2
|> add 1
![Page 16: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/16.jpg)
Type Variablesswitch : ( a, b ) -> ( b, a ) switch ( x, y ) = ( y, x )
![Page 17: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/17.jpg)
Union typestype Answer
= Yes
| No | Other String
type Resource res
= Loading
| Loaded res
![Page 18: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/18.jpg)
Type Aliasestype alias CustomerId = Int
type alias Email = String
![Page 19: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/19.jpg)
Records{ id : Int, name : String}
type alias Player = { id : Int , name : String }
label: Player -> String
![Page 20: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/20.jpg)
Packageshttp://package.elm-lang.org/
![Page 21: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/21.jpg)
elm-lang/coreelmpackages
![Page 22: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/22.jpg)
Maybetype Maybe a = Just a
| Nothing
withDefault : a -> Maybe a -> a
map : (a -> b) -> Maybe a -> Maybe b
![Page 23: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/23.jpg)
Listlength : List a -> Int
head : List a -> Maybe a
tail : List a -> Maybe (List a
filter : (a -> Bool) -> List a
take : Int -> List a -> List a
drop : Int -> List a -> List a
![Page 24: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/24.jpg)
Resulttype Result error value
= Ok value
| Err error
map : (a -> value) -> Result x a -> Result x value
andThen : Result x a -> (a -> Result x b) -> Result x b
![Page 25: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/25.jpg)
elm-lang/htmlelmpackages
![Page 26: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/26.jpg)
![Page 27: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/27.jpg)
Htmltext : String -> Html msg
node: String
-> List (Attribute msg)
-> List (Html msg)
-> Html msg
type alias Html msg = Node msg
type alias Attribute msg = Property msg
![Page 28: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/28.jpg)
Markuph1 : List (Attribute msg) -> List (Html msg) -> Html msg
h2 : List (Attribute msg) -> List (Html msg) -> Html msg
div : List (Attribute msg) -> List (Html msg) -> Html msg
p : List (Attribute msg) -> List (Html msg) -> Html msg
hr : List (Attribute msg) -> List (Html msg) -> Html msg
span : List (Attribute msg) -> List (Html msg) -> Html msg
a : List (Attribute msg) -> List (Html msg) -> Html msg
![Page 29: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/29.jpg)
Small Examplemain =
ul [class "grocery-list"]
[ li [] [text "Pamplemousse"]
, li [] [text "Ananas"]
, li [] [text "Jus d'orange"]
, li [] [text "Boeuf"] , li [] [text "Soupe du jour"]
, li [] [text "Camembert"]
, li [] [text "Jacques Cousteau"]
, li [] [text "Baguette"]
]
•Pamplemousse•Ananas•Jus d'orange•Boeuf•Soupe du jour•Camembert•Jacques Cousteau•Baguette
![Page 30: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/30.jpg)
The ELM
architecture
![Page 31: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/31.jpg)
Modeltype alias Model =
String
init : ( Model, Cmd Msg )
init =
( "Hello", Cmd.none )
![Page 32: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/32.jpg)
Messagestype Msg
= PostToSlack
| FetchSponsors
| NoOp
![Page 33: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/33.jpg)
Viewview : Model -> Html Msg
view model =
div []
[ text model ]
![Page 34: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/34.jpg)
Updateupdate : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of PostToSlack -> Api.sendPost model.email NoOp -> ( model, Cmd.none )
![Page 35: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/35.jpg)
Subscriptionssubscriptions : Model -> Sub Msg subscriptions model =
Sub.none
![Page 36: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/36.jpg)
Mainmain : Program Never
main =
Html.App.program
{ init = init
, view = view , update = update
, subscriptions = subscriptions
}
![Page 37: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/37.jpg)
Expand sample Flow
![Page 38: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/38.jpg)
Examples
![Page 39: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/39.jpg)
Drawbacks
![Page 40: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/40.jpg)
In flux (lightly)
![Page 41: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/41.jpg)
Learn a language
![Page 42: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/42.jpg)
Api still growing
![Page 43: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/43.jpg)
THANK YOU!
![Page 44: Elm: delightful web development](https://reader036.fdocuments.us/reader036/viewer/2022062412/5871232f1a28abe4448b5857/html5/thumbnails/44.jpg)
[email protected] @abarylko
http://bit.ly/abarylkoslides
http://orthocoders.com
http://westerndevs.com