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

.

[Faculty of Science Information and Computing Sciences]

.

1

Concepts of programming languages

Something El(m)se

Paolo Servillo, Enzo van Kessel, Jesse de Ruijter

.

[Faculty of Science Information and Computing Sciences]

.

2

Contents

▶ What is Elm? ▶ The language ▶ The architecture ▶ Transcompiling ▶ Elm in practice

.

[Faculty of Science Information and Computing Sciences]

.

3

What is Elm?

Web application

.

[Faculty of Science Information and Computing Sciences]

.

4

What is Eml?

But… functional!

Why functional?

▶ User preference ▶ Trends and popularity ▶ Conciseness ▶ Testability ▶ Parallelization and distributed computing

.

[Faculty of Science Information and Computing Sciences]

.

5

What is Elm?

Front-end languages, frameworks and libraries

▶ Javascript framework/libraries ▶ Transcompilers

.

[Faculty of Science Information and Computing Sciences]

.

6

What is Elm?

Functional transcompilers vs Javascript frameworks

Advantages

▶ Pure functions ▶ Strict typing and static type checking

Disadvantages

▶ Embedding and communcating with Javascript

.

[Faculty of Science Information and Computing Sciences]

.

7

Elm does it all!

▶ Not only JavaScript, but also HTML and CSS. ▶ Model, view, controller structure.

.

[Faculty of Science Information and Computing Sciences]

.

8

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 increment : Int -> Int increment a = a + 1 concat : String -> String -> String concat a b = a ++ b (//) : Int -> Int -> Int

.

[Faculty of Science Information and Computing Sciences]

.

8

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

increment : Int -> Int increment a = a + 1 concat : String -> String -> String concat a b = a ++ b (//) : Int -> Int -> Int

.

[Faculty of Science Information and Computing Sciences]

.

9

The language

Functions - Lambdas

incrementPrime = \x -> x + 1 concatPrime = \a b -> a ++ b squares = List.map (\n -> n^2) (List.rang 1 100)

.

[Faculty of Science Information and Computing Sciences]

.

10

The language

Functions - Pattern matching

head : List String -> String head list = case list of [] -> "there is no head?" [a,b] -> a a::_ -> a isOrdered : (String, String, String) -> String isOrdered tuple = case tuple of ("A","B","C") as orderedTuple -> toString orderedTuple ++ " is an ordered tuple." (_,_,_) as unorderedTuple -> toString unorderedTuple ++ " is an unordered tuple."

.

[Faculty of Science Information and Computing Sciences]

.

11

The language

Functions - Currying and partial application

▶ f : a -> b -> c the curried version is f : (a,b) -> c

add : Int -> Int -> Int add x y = x + y increment = add 1

▶ What is the type of increment?

increment : Int -> Int Elm supports partial application

.

[Faculty of Science Information and Computing Sciences]

.

11

The language

Functions - Currying and partial application

▶ f : a -> b -> c the curried version is f : (a,b) -> c

add : Int -> Int -> Int add x y = x + y increment = add 1

▶ What is the type of increment?

increment : Int -> Int

▶ Elm supports partial application

.

[Faculty of Science Information and Computing Sciences]

.

12

The language

Records

myRecord = { x = 3, y = 4 } sum record = let {x,y} = record in x + y

.

[Faculty of Science Information and Computing Sciences]

.

13

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)

.

[Faculty of Science Information and Computing Sciences]

.

14

The language

Type aliases

hasBio : { name : String, bio : String, pic : String } -> Bool hasBio user = String.length user.bio > 0 type alias User = { name : String , bio : String , pic : String } addBio : String -> User -> User addBio bio user = { user | bio = bio }

.

[Faculty of Science Information and Computing Sciences]

.

15

The language

Record-types

type alias Positioned a = { a | x : Float, y : Float } type alias Named a = { a | name : String } type alias Moving a = { a | velocity : Float, angle : Float } dude : Named (Moving (Positioned {})) dude = { x = 0 , y = 0 , name = "Clark Kent" , velocity = 42 , angle = degrees 30}

.

[Faculty of Science Information and Computing Sciences]

.

16

The language

Generic types

type OptionalValue a = Nothing | OptionalValue a valueInt : OptionalValue Int valueInt = OptionalValue 4 valueFloat : OptionalValue Float valueFloat = OptionalValue 5.0 print : OptionalValue -> String print aOptionalValue = case aOptionalValue of OptionalValue x -> toString(x) Nothing -> ""

.

[Faculty of Science Information and Computing Sciences]

.

17

The language

Views

div [] [ input [ placeholder "Text to reverse",

• nInput Change ] []

, div [] [ text (String.reverse model.content) ] ] div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]

.

[Faculty of Science Information and Computing Sciences]

.

18

The language

Graphics

collage : Int -> Int -> List Form -> Element square : Float -> Shape filled : Color -> Shape -> Form

▶ Using these types we can create a nice blue square

main = collage 300 300 [makeSquare blue 50] makeSquare color size = filled color (square size)

.

[Faculty of Science Information and Computing Sciences]

.

19

The architecture

MVC

type alias Model = { ... } type Msg = Reset | ... update : Msg -> Model -> Model update msg model = case msg of Reset -> ... ... view : Model -> Html Msg view model = ...

.

[Faculty of Science Information and Computing Sciences]

.

19

The architecture

MVC

type alias Model = { ... } type Msg = Reset | ... update : Msg -> Model -> Model update msg model = case msg of Reset -> ... ... view : Model -> Html Msg view model = ...

.

[Faculty of Science Information and Computing Sciences]

.

20

The architecture

Login form example

.

[Faculty of Science Information and Computing Sciences]

.

21

The architecture

Model

type alias Model = { name : String , password : String , passwordAgain : String } model : Model model = Model "" "" ""

.

[Faculty of Science Information and Computing Sciences]

.

22

The architecture

Update

type Msg = Name String | Password String | PasswordAgain String update : Msg -> Model -> Model update msg model = case msg of Name name -> { model | name = name } Password password -> { model | password = password } PasswordAgain password -> { model | passwordAgain = password }

.

[Faculty of Science Information and Computing Sciences]

.

23

The architecture

View

view : Model -> Html Msg view model = div [] [ input [ type_ "text", placeholder "Name",

• nInput Name ] []

, input [ type_ "password", placeholder "Password",

• nInput Password ] []

, input [ type_ "password", placeholder "Re-enter Password",

• nInput PasswordAgain ] []

, viewValidation model ]

.

[Faculty of Science Information and Computing Sciences]

.

24

The architecture

View

viewValidation : Model -> Html msg viewValidation model = let (color, message) = if model.password == model.passwordAgain then ("green", "OK") else ("red", "Passwords do not match!") in div [ style [("color", color)] ] [ text message ]

.

[Faculty of Science Information and Computing Sciences]

.

25

The architecture

main = Html.beginnerProgram { model = model , view = view , update = update }

.

[Faculty of Science Information and Computing Sciences]

.

26

The architecture

Messaging

▶ The way to communicate between the different parts

• f the MVC-structure.

.

[Faculty of Science Information and Computing Sciences]

.

27

The architecture

Subscriptions

.

[Faculty of Science Information and Computing Sciences]

.

28

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

.

[Faculty of Science Information and Computing Sciences]

.

29

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.

.

[Faculty of Science Information and Computing Sciences]

.

29

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.

.

[Faculty of Science Information and Computing Sciences]

.

30

Transcompiling

Compiling in Javascript

Functions which introduce concepts (currying, partial application, MVC-structure) Re-implementation of standard functions (foldr, map, take, cmp) Elm converted to JavaScript

.

[Faculty of Science Information and Computing Sciences]

.

30

Transcompiling

Compiling in Javascript

▶ Functions which introduce concepts (currying, partial

application, MVC-structure)

▶ Re-implementation of standard functions (foldr, map,

take, cmp)

▶ Elm converted to JavaScript

.

[Faculty of Science Information and Computing Sciences]

.

31

Transcompiling

Currying and partial application

▶ Functions wrappers F2 to F9 ▶ Function appliers A2 to A9

.

[Faculty of Science Information and Computing Sciences]

.

32

Transcompiling

Arrays

Relaxed Radix Balanced Trees

.

[Faculty of Science Information and Computing Sciences]

.

33

Transcompiling

Arrays

Relaxed Radix Balanced Trees

▶ Leaf

• height, is always 0
• table, is an array of elements

▶ Node

• height, is always greater than 0
• table, is an array of child nodes
• lengths, is an array of accumulated lengths of the child

nodes

▶ Immutable concatenation, insertions and splits.

Fast to iterate, update and index!

.

[Faculty of Science Information and Computing Sciences]

.

34

Transcompiling

Functions on arrays

Loop through the nodes of the RBB-tree:

▶ If leaf -> apply function ▶ If node -> apply function on its references recursively.

.

[Faculty of Science Information and Computing Sciences]

.

35

Transcompiling

Lists

Nested objects with:

▶ Constructor type ▶ Value as first parameter ▶ Objects as rest ▶ Functions on lists rewritten in a functional way, using

folds, etc.

.

[Faculty of Science Information and Computing Sciences]

.

36

Transcompiling

Example: quicksort

.

[Faculty of Science Information and Computing Sciences]

.

37

Transcompiling

Example: quicksort

.

[Faculty of Science Information and Computing Sciences]

.

38

Transcompiling

Example: quicksort

.

[Faculty of Science Information and Computing Sciences]

.

39

Transcompiling

Example: quicksort

.

[Faculty of Science Information and Computing Sciences]

.

40

Elm in practice

Interop

Json Javascript

.

[Faculty of Science Information and Computing Sciences]

.

40

Elm in practice

Interop

▶ Json ▶ Javascript

.

[Faculty of Science Information and Computing Sciences]

.

41

Elm in practice

Interop Json

▶ An important feature for a web language

.

[Faculty of Science Information and Computing Sciences]

.

42

Elm in practice

Interop Javascript

We can embed Elm in HTML to communicate with Javascript

▶ Ports ▶ Flags

.

[Faculty of Science Information and Computing Sciences]

.

43

Elm in practice

Embed Elm in Html

elm-make src/Main.elm --output=main.js

.

[Faculty of Science Information and Computing Sciences]

.

44

Elm in practice

Ports

port check : String -> Cmd msg

• - SUBSCRIPTIONS

port suggestions : (List String -> msg) -> Sub msg <script src="spelling.js"></script> <script> var app = Elm.Spelling.fullscreen(); app.ports.check.subscribe(function(word) { var suggestions = spellCheck(word); app.ports.suggestions.send(suggestions); }); function spellCheck(word) { // have a real implementation! return []; } </script>

.

[Faculty of Science Information and Computing Sciences]

.

45

Elm in practice

Flags

type alias Flags = { user : String , token : String } // if you want it to be fullscreen var app = Elm.MyApp.fullscreen({ user: 'Tom', token: '12345' }); // if you want to embed your app var node = document.getElementById('my-app'); var app = Elm.MyApp.embed(node, { user: 'Tom', token: '12345' });

.

[Faculty of Science Information and Computing Sciences]

.

46

Elm in practice

Error handling

Why?

▶ Elm promises no runtime errors ▶ Maybe/Result ▶ Null

.

[Faculty of Science Information and Computing Sciences]

.

47

Elm in practice

Concurrency

Processes (sparse)

▶ processes run concurrent ▶ processes and tasks(not really concurrent) ▶ Task : Fail or Succeed for external services , Chaın ▶ spawn, kill, sleep

.

[Faculty of Science Information and Computing Sciences]

.

48

Elm in practice

Reusable components

Reusing a part in a different project

▶ Export the functions defining the component in a

module

▶ Import the module Using a part twice within the same

project

▶ No copy-paste! ▶ Call the function twice

.

[Faculty of Science Information and Computing Sciences]

.

49

Elm in practice

Elm awesomeness

▶ Great package manager ▶ Really clear error messages ▶ Semantic versioning

.

[Faculty of Science Information and Computing Sciences]

.

50

Elm in practice

Semantic versioning

▶ All packages start with initial version 1.0.0 ▶ Versions are incremented based on how the API

changes:

▶ PATCH - the API is the same, no risk of breaking code ▶ MINOR - values have been added, existing values are

unchanged

▶ MAJOR - existing values have been changed or removed ▶ elm-package will bump versions for you, automatically

enforcing these rules

.

[Faculty of Science Information and Computing Sciences]

.

51

What do we think of Elm?

▶ Really impressive! ▶ Catching up with other languages ▶ Not specialized in websites, but web based programs in

general

.

[Faculty of Science Information and Computing Sciences]

.

52

Questions?