PaoloServillo,EnzovanKessel,JessedeRuijter · Paolo Servillo, Enzo van Kessel, Jesse de Ruijter Created Date: 12/22/2016 12:13:31 AM

....

[Faculty of ScienceInformation and Computing

Sciences]

. 1

Concepts of programming languagesSomething El(m)se

Paolo Servillo, Enzo van Kessel, Jesse de Ruijter

....


Sciences]

. 2

Contents

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

....


Sciences]

. 3

What is Elm?

Web application

....


Sciences]

. 4

What is Eml?

But… functional!

Why functional?

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

....


Sciences]

. 5

What is Elm?Front-end languages, frameworks and libraries

▶ Javascript framework/libraries▶ Transcompilers

....


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

....


Sciences]

. 7

Elm does it all!

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

....


Sciences]

. 8

The language

Functions

Elm looks a lot like Haskell in syntax but there are somesmall differences

▶ multiline strings▶ different operators for floats and ints

increment : Int -> Intincrement a = a + 1

concat : String -> String -> Stringconcat a b = a ++ b

(//) : Int -> Int -> Int

....


Sciences]

. 8

The language

Functions

Elm looks a lot like Haskell in syntax but there are somesmall differences

▶ multiline strings▶ different operators for floats and ints

increment : Int -> Intincrement a = a + 1

concat : String -> String -> Stringconcat a b = a ++ b

(//) : Int -> Int -> Int

....


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)

....


Sciences]

. 10

The language

Functions - Pattern matching

head : List String -> Stringhead list = case list of

[] -> "there is no head?"[a,b] -> aa::_ -> a

isOrdered : (String, String, String) -> StringisOrdered tuple =case tuple of("A","B","C") as orderedTuple ->

toString orderedTuple ++ " is an ordered tuple."

(_,_,_) as unorderedTuple ->toString unorderedTuple ++ " is an unordered tuple."

....


Sciences]

. 11

The language

Functions - Currying and partial application

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

add : Int -> Int -> Intadd x y =

x + yincrement = add 1

▶ What is the type of increment?

increment : Int -> Int

▶ Elm supports partial application

....


Sciences]

. 11

The language

Functions - Currying and partial application

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

add : Int -> Int -> Intadd x y =

x + yincrement = add 1

▶ What is the type of increment?

increment : Int -> Int

▶ Elm supports partial application

....


Sciences]

. 12

The language

Records

myRecord = { x = 3, y = 4 }

sum record =let

{x,y} = recordin

x + y

....


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)

....


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 -> UseraddBio bio user =

{ user | bio = bio }

....


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}

....


Sciences]

. 16

The language

Generic types

type OptionalValue a = Nothing | OptionalValue avalueInt : OptionalValue IntvalueInt = OptionalValue 4

valueFloat : OptionalValue FloatvalueFloat = OptionalValue 5.0print : OptionalValue -> Stringprint aOptionalValue =

case aOptionalValue ofOptionalValue x -> toString(x)Nothing -> ""

....


Sciences]

. 17

The language

Views

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

, div [] [ text (String.reverse model.content) ]]

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

....


Sciences]

. 18

The language

Graphics

collage : Int -> Int -> List Form -> Elementsquare : Float -> Shapefilled : 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)

....


Sciences]

. 19

The architecture

MVC

type alias Model = { ... }

type Msg = Reset | ...

update : Msg -> Model -> Modelupdate msg model =

case msg ofReset -> ......

view : Model -> Html Msgview model =

...

....


Sciences]

. 19

The architecture

MVC

type alias Model = { ... }

type Msg = Reset | ...


case msg ofReset -> ......


...

....


Sciences]

. 20

The architecture

Login form example

....


Sciences]

. 21

The architecture

Model

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

model : Modelmodel =

Model "" "" ""

....


Sciences]

. 22

The architecture

Update

type Msg= Name String| Password String| PasswordAgain String


case msg ofName name ->

{ model | name = name }Password password ->

{ model | password = password }PasswordAgain password ->

{ model | passwordAgain = password }

....


Sciences]

. 23

The architecture

View


div [][ input [ type_ "text", placeholder "Name",onInput Name ] [], input [ type_ "password", placeholder "Password",onInput Password ] [], input [ type_ "password", placeholder "Re-enter Password",onInput PasswordAgain ] [], viewValidation model]

....


Sciences]

. 24

The architecture

View

viewValidation : Model -> Html msgviewValidation model =

let(color, message) =

if model.password == model.passwordAgain then("green", "OK")

else("red", "Passwords do not match!")

indiv [ style [("color", color)] ] [ text message ]

....


Sciences]

. 25

The architecture

main =Html.beginnerProgram

{ model = model, view = view, update = update}

....


Sciences]

. 26

The architectureMessaging

▶ The way to communicate between the different partsof the MVC-structure.

....


Sciences]

. 27

The architecture

Subscriptions

....


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

....


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.

....


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.

....


Sciences]

. 30

Transcompiling

Compiling in Javascript

▶ Functions which introduce concepts (currying, partialapplication, MVC-structure)

▶ Re-implementation of standard functions (foldr, map,take, cmp)

▶ Elm converted to JavaScript

....


Sciences]

. 30

Transcompiling

Compiling in Javascript

▶ Functions which introduce concepts (currying, partialapplication, MVC-structure)

▶ Re-implementation of standard functions (foldr, map,take, cmp)

▶ Elm converted to JavaScript

....


Sciences]

. 31

Transcompiling

Currying and partial application

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

....


Sciences]

. 32

Transcompiling

Arrays

Relaxed Radix Balanced Trees

....


Sciences]

. 33

TranscompilingArrays

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 childnodes

▶ Immutable concatenation, insertions and splits.▶ Fast to iterate, update and index!

....


Sciences]

. 34

TranscompilingFunctions on arrays

Loop through the nodes of the RBB-tree:

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

....


Sciences]

. 35

TranscompilingLists

Nested objects with:

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

folds, etc.

....


Sciences]

. 36

Transcompiling

Example: quicksort

....


Sciences]

. 37

Transcompiling

Example: quicksort

....


Sciences]

. 38

Transcompiling

Example: quicksort

....


Sciences]

. 39

Transcompiling

Example: quicksort

....


Sciences]

. 40

Elm in practice

Interop

▶ Json▶ Javascript

....


Sciences]

. 40

Elm in practice

Interop

▶ Json▶ Javascript

....


Sciences]

. 41

Elm in practice

Interop Json

▶ An important feature for a web language

....


Sciences]

. 42

Elm in practice

Interop Javascript

We can embed Elm in HTML to communicate with Javascript

▶ Ports▶ Flags

....


Sciences]

. 43

Elm in practice

Embed Elm in Html

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

....


Sciences]

. 44

Elm in practicePorts

port check : String -> Cmd msg-- SUBSCRIPTIONSport 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>

....


Sciences]

. 45

Elm in practiceFlags

type alias Flags ={ user : String, token : String}

// if you want it to be fullscreenvar app = Elm.MyApp.fullscreen({

user: 'Tom',token: '12345'

});// if you want to embed your appvar node = document.getElementById('my-app');var app = Elm.MyApp.embed(node, {

user: 'Tom',token: '12345'

});

....


Sciences]

. 46

Elm in practice

Error handling

Why?

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

....


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

....


Sciences]

. 48

Elm in practice

Reusable components

Reusing a part in a different project

▶ Export the functions defining the component in amodule

▶ Import the module Using a part twice within the sameproject

▶ No copy-paste!▶ Call the function twice

....


Sciences]

. 49

Elm in practice

Elm awesomeness

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

....


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

....


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

....


Sciences]

. 52

Questions?

Documents

PaoloServillo,EnzovanKessel,JessedeRuijter · Paolo Servillo, Enzo van Kessel, Jesse de Ruijter Created Date: 12/22/2016 12:13:31 AM