Concepts of programming languages

Transcription

1 Concepts of programming languages Something El(m)se Paolo Servillo, Enzo van Kessel, Jesse de Ruijter 1

2 Contents What is Elm? The language The architecture Transcompiling Elm in practice 2

3 What is Elm? Web application 3

4 What is Eml? But functional! Why functional? User preference Trends and popularity Conciseness Testability Parallelization and distributed computing 4

5 What is Elm? Front-end languages, frameworks and libraries Javascript framework/libraries Transcompilers 5

6 What is Elm? Functional transcompilers vs Javascript frameworks Advantages Pure functions Strict typing and static type checking Disadvantages Embedding and communcating with Javascript 6

7 Elm does it all! Not only JavaScript, but also HTML and CSS Model, view, controller structure 7

8 The language 8

9 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 8 (//) : Int -> Int -> Int

10 The language Functions - Lambdas incrementprime = \x -> x + 1 concatprime = \a b -> a ++ b squares = Listmap (\n -> n^2) (Listrang 1 100) 9

11 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" 10 (_,_,_) as unorderedtuple -> tostring unorderedtuple ++ " is an unordered tuple

12 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? 11

13 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 11

14 The language Records myrecord = { x = 3, y = 4 } sum record = let {x,y} = record in x + y 12

15 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

16 The language Type aliases 14 hasbio : { name : String, bio : String, pic : String } -> Bool hasbio user = Stringlength userbio > 0 type alias User = { name : String, bio : String, pic : String } addbio : String -> User -> User addbio bio user = { user bio = bio }

17 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 } 15 dude : Named (Moving (Positioned {})) dude = { x = 0, y = 0, name = "Clark Kent", velocity = 42, angle = degrees 30}

18 The language Generic types type OptionalValue a = Nothing OptionalValue a valueint : OptionalValue Int valueint = OptionalValue 4 valuefloat : OptionalValue Float valuefloat = OptionalValue 50 print : OptionalValue -> String print aoptionalvalue = case aoptionalvalue of OptionalValue x -> tostring(x) Nothing -> "" 16

19 The language Views div [] [ input [ placeholder "Text to reverse", oninput Change ] [], div [] [ text (Stringreverse modelcontent) ] ] div [] [ button [ onclick Decrement ] [ text "-" ], div [] [ text (tostring model) ], button [ onclick Increment ] [ text "+" ] ] 17

20 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 [makesquare blue 50] 18 makesquare color size = filled color (square size)

21 The architecture 19

22 The architecture MVC type alias Model = { } type Msg = Reset update : Msg -> Model -> Model update msg model = case msg of Reset -> 19 view : Model -> Html Msg view model =

23 The architecture Login form example 20

24 The architecture Model type alias Model = { name : String, password : String, passwordagain : String } model : Model model = Model "" "" "" 21

25 The architecture Update type Msg = Name String Password String PasswordAgain String 22 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 }

26 The architecture View view : Model -> Html Msg view model = div [] [ input [ type_ "text", placeholder "Name", oninput Name ] [], input [ type_ "password", placeholder "Password" oninput Password ] [], input [ type_ "password", placeholder "Re-enter oninput PasswordAgain ] [], viewvalidation model ] 23

27 The architecture View viewvalidation : Model -> Html msg viewvalidation model = let (color, message) = if modelpassword == modelpasswordagain then ("green", "OK") else ("red", "Passwords do not match!") in div [ style [("color", color)] ] [ text message ] 24

28 The architecture main = HtmlbeginnerProgram { model = model, view = view, update = update } 25

29 The architecture Messaging The way to communicate between the different parts of the MVC-structure 26

30 The architecture Subscriptions 27

31 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

32 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

33 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

34 Transcompiling 30

35 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 30

36 Transcompiling Currying and partial application Functions wrappers F2 to F9 Function appliers A2 to A9 31

37 Transcompiling Arrays Relaxed Radix Balanced Trees 32

38 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 33 -lengths, is an array of accumulated lengths of the child nodes Immutable concatenation, insertions and splits

39 Transcompiling Functions on arrays Loop through the nodes of the RBB-tree: If leaf -> apply function If node -> apply function on its references recursively 34

40 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 35

41 Transcompiling Example: quicksort 36

42 Transcompiling Example: quicksort 37

43 Transcompiling Example: quicksort 38

44 Transcompiling Example: quicksort 39

45 Elm in practice 40

46 Elm in practice Interop Json Javascript 40

47 Elm in practice Interop Json An important feature for a web language 41

48 Elm in practice Interop Javascript We can embed Elm in HTML to communicate with Javascript Ports Flags 42

49 Elm in practice Embed Elm in Html elm-make src/mainelm --output=mainjs 43

50 Elm in practice Ports port check : String -> Cmd msg -- SUBSCRIPTIONS port suggestions : (List String -> msg) -> Sub msg 44 <script src="spellingjs"></script> <script> var app = ElmSpellingfullscreen(); appportschecksubscribe(function(word) { var suggestions = spellcheck(word); appportssuggestionssend(suggestions); }); function spellcheck(word) { // have a real implementation! return []; } </script>

51 Elm in practice Flags type alias Flags = { user : String, token : String } 45 // if you want it to be fullscreen var app = ElmMyAppfullscreen({ user: 'Tom', token: '12345' }); // if you want to embed your app var node = documentgetelementbyid('my-app'); var app = ElmMyAppembed(node, { }); user: 'Tom', token: '12345'

52 Elm in practice Error handling Why? Elm promises no runtime errors Maybe/Result Null 46

53 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 47

54 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 48

55 Elm in practice Elm awesomeness Great package manager Really clear error messages Semantic versioning 49

56 Elm in practice Semantic versioning All packages start with initial version 100 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 50

57 What do we think of Elm? Really impressive! Catching up with other languages Not specialized in websites, but web based programs in general 51

58 Questions? 52