Concepts of programming languages Something El(m)se Paolo Servillo, - PowerPoint PPT Presentation

[Faculty of Science Information and Computing Sciences] Concepts of programming languages Something El(m)se Paolo Servillo, Enzo van Kessel, Jesse de Ruijter . . 1

[Faculty of Science Information and Computing Sciences] Contents ▶ What is Elm? ▶ The language ▶ The architecture ▶ Transcompiling ▶ Elm in practice . . 2

[Faculty of Science Information and Computing Sciences] What is Elm? Web application . . 3

[Faculty of Science Information and Computing Sciences] What is Eml? But… functional! Why functional? ▶ User preference ▶ Trends and popularity ▶ Conciseness ▶ Testability ▶ Parallelization and distributed computing . . 4

[Faculty of Science Information and Computing Sciences] What is Elm? Front-end languages, frameworks and libraries ▶ Javascript framework/libraries ▶ Transcompilers . . 5

[Faculty of Science Information and Computing Sciences] What is Elm? Functional transcompilers vs Javascript frameworks Advantages ▶ Pure functions ▶ Strict typing and static type checking Disadvantages ▶ Embedding and communcating with Javascript . . 6

[Faculty of Science Information and Computing Sciences] Elm does it all! ▶ Not only JavaScript, but also HTML and CSS. ▶ Model, view, controller structure. . . 7

Functions Elm looks a lot like Haskell in syntax but there are some small differences multiline strings different operators for floats and ints concat a b = a ++ b concat : String -> String -> String increment a = a + 1 increment : Int -> Int (//) : Int -> Int -> Int [Faculty of Science Sciences] Information and Computing The language . . 8

(//) : Int -> Int -> Int increment : Int -> Int Information and Computing Sciences] concat a b = a ++ b concat : String -> String -> String [Faculty of Science increment a = a + 1 The language Functions Elm looks a lot like Haskell in syntax but there are some small differences ▶ multiline strings ▶ different operators for floats and ints . . 8

[Faculty of Science Information and Computing Sciences] incrementPrime = \x -> x + 1 concatPrime = \a b -> a ++ b List.map (\n -> n^2) (List.rang 1 100) The language Functions - Lambdas squares = . . 9

toString unorderedTuple ++ " is an unordered tuple." [a,b] -> a (_,_,_) as unorderedTuple -> toString orderedTuple ++ " is an ordered tuple." ("A","B","C") as orderedTuple -> case tuple of isOrdered tuple = isOrdered : (String, String, String) -> String a::_ -> a [] -> "there is no head?" [Faculty of Science head list = case list of head : List String -> String Sciences] Information and Computing The language Functions - Pattern matching . . 10

Elm supports partial application add x y Information and Computing Sciences] increment : Int -> Int x + y [Faculty of Science = The language Functions - Currying and partial application ▶ f : a -> b -> c the curried version is f : (a,b) -> c add : Int -> Int -> Int increment = add 1 ▶ What is the type of increment? . . 11

Information and Computing Sciences] [Faculty of Science add x y = x + y The language Functions - Currying and partial application ▶ f : a -> b -> c the curried version is f : (a,b) -> c add : Int -> Int -> Int increment = add 1 ▶ What is the type of increment? increment : Int -> Int ▶ Elm supports partial application . . 11

[Faculty of Science Information and Computing Sciences] myRecord = { x = 3, y = 4 } sum record = let {x,y} = record in x + y The language Records . . 12

[Faculty of Science Information and Computing Sciences] The language Types ▶ Statically typed ▶ Elm does type checking ▶ Support for type inference (it can decide the types of certain variables without them being specified) . . 13

{ user | bio = bio } String.length user.bio > 0 addBio bio user = addBio : String -> User -> User } , pic : String , bio : String { name : String type alias User = hasBio user = [Faculty of Science pic : String } -> Bool hasBio : { name : String, bio : String, Sciences] Information and Computing The language Type aliases . . 14

, angle = degrees 30} [Faculty of Science , velocity = 42 , name = "Clark Kent" , y = 0 { x = 0 { a | velocity : Float, angle : Float } type alias Moving a = { a | name : String } type alias Named a = { a | x : Float, y : Float } type alias Positioned a = Sciences] Information and Computing The language Record-types dude : Named (Moving (Positioned {})) dude = . . 15

Nothing -> "" valueInt = OptionalValue 4 OptionalValue x -> toString(x) case aOptionalValue of print aOptionalValue = print : OptionalValue -> String valueFloat = OptionalValue 5.0 valueFloat : OptionalValue Float valueInt : OptionalValue Int [Faculty of Science type OptionalValue a = Nothing | OptionalValue a Sciences] Information and Computing The language Generic types . . 16

] [Faculty of Science , button [ onClick Increment ] [ text "+" ] , div [] [ text (toString model) ] div [] ] , div [] [ text (String.reverse model.content) ] onInput Change ] [] [ input [ placeholder "Text to reverse", Sciences] div [] Information and Computing The language Views [ button [ onClick Decrement ] [ text "-" ] . . 17

filled color (square size) [Faculty of Science [makeSquare blue 50] collage 300 300 filled : Color -> Shape -> Form square : Float -> Shape collage : Int -> Int -> List Form -> Element Sciences] Information and Computing The language Graphics ▶ Using these types we can create a nice blue square main = makeSquare color size = . . 18

MVC ... update : Msg -> Model -> Model view model = view : Model -> Html Msg ... Reset -> ... case msg of update msg model = type Msg = Reset | ... [Faculty of Science type alias Model = { ... } Sciences] Information and Computing The architecture . . 19

... update : Msg -> Model -> Model view model = view : Model -> Html Msg ... Reset -> ... case msg of update msg model = type Msg = Reset | ... [Faculty of Science type alias Model = { ... } Sciences] Information and Computing The architecture MVC . . 19

[Faculty of Science Information and Computing Sciences] The architecture Login form example . . 20

[Faculty of Science Information and Computing Sciences] type alias Model = { name : String , password : String , passwordAgain : String } model = Model "" "" "" The architecture Model model : Model . . 21

{ model | passwordAgain = password } | PasswordAgain String PasswordAgain password -> { model | password = password } Password password -> { model | name = name } Name name -> case msg of update msg model = update : Msg -> Model -> Model | Password String [Faculty of Science = Name String type Msg Sciences] Information and Computing The architecture Update . . 22

] view : Model -> Html Msg , viewValidation model , input [ type_ "password", placeholder "Password", onInput Name ] [] div [] [Faculty of Science view model = Sciences] Information and Computing The architecture View [ input [ type_ "text", placeholder "Name", onInput Password ] [] , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] [] . . 23

div [ style [("color", color)] ] [ text message ] let in ("red", "Passwords do not match!") else ("green", "OK") if model.password == model.passwordAgain then (color, message) = viewValidation model = [Faculty of Science viewValidation : Model -> Html msg Sciences] Information and Computing The architecture View . . 24

[Faculty of Science Information and Computing Sciences] main = Html.beginnerProgram { model = model , view = view , update = update } The architecture . . 25

[Faculty of Science Information and Computing Sciences] The architecture Messaging ▶ The way to communicate between the different parts of the MVC-structure. . . 26

[Faculty of Science Information and Computing Sciences] The architecture Subscriptions . . 27

[Faculty of Science Information and Computing Sciences] The architecture View (Virtual Dom) ▶ Elm creates a virtual DOM ▶ A technique called diffing is used to see what changed in the virtual DOM. ▶ If any, the differences are applied to the DOM . . 28

We can call lazy view model to differ the rendering, exploiting Pure functions: Same input, same output Immutability: ease in comparison. [Faculty of Science Information and Computing Sciences] The architecture View (Lazy evaluation) The language doesn't do lazy evaluation of its own. ▶ Javascript is strict ▶ Lazy and concurrency do not mix well . . 29

[Faculty of Science Information and Computing Sciences] The architecture View (Lazy evaluation) The language doesn't do lazy evaluation of its own. ▶ Javascript is strict ▶ Lazy and concurrency do not mix well We can call lazy view model to differ the rendering, exploiting ▶ Pure functions: Same input, same output ▶ Immutability: ease in comparison. . . 29