PaoloServillo,EnzovanKessel,JessedeRuijter · Paolo Servillo, Enzo van Kessel, Jesse de Ruijter...
Transcript of PaoloServillo,EnzovanKessel,JessedeRuijter · Paolo Servillo, Enzo van Kessel, Jesse de Ruijter...
....
[Faculty of ScienceInformation and Computing
Sciences]
. 1
Concepts of programming languagesSomething El(m)se
Paolo Servillo, Enzo van Kessel, Jesse de Ruijter
....
[Faculty of ScienceInformation and Computing
Sciences]
. 2
Contents
▶ What is Elm?▶ The language▶ The architecture▶ Transcompiling▶ Elm in practice
....
[Faculty of ScienceInformation and Computing
Sciences]
. 3
What is Elm?
Web application
....
[Faculty of ScienceInformation and Computing
Sciences]
. 4
What is Eml?
But… functional!
Why functional?
▶ User preference▶ Trends and popularity▶ Conciseness▶ Testability▶ Parallelization and distributed computing
....
[Faculty of ScienceInformation and Computing
Sciences]
. 5
What is Elm?Front-end languages, frameworks and libraries
▶ Javascript framework/libraries▶ Transcompilers
....
[Faculty of ScienceInformation 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 ScienceInformation and Computing
Sciences]
. 7
Elm does it all!
▶ Not only JavaScript, but also HTML and CSS.▶ Model, view, controller structure.
....
[Faculty of ScienceInformation and Computing
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
....
[Faculty of ScienceInformation and Computing
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
....
[Faculty of ScienceInformation 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 ScienceInformation and Computing
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."
....
[Faculty of ScienceInformation 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 -> Intadd x y =
x + yincrement = add 1
▶ What is the type of increment?
increment : Int -> Int
▶ Elm supports partial application
....
[Faculty of ScienceInformation 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 -> Intadd x y =
x + yincrement = add 1
▶ What is the type of increment?
increment : Int -> Int
▶ Elm supports partial application
....
[Faculty of ScienceInformation and Computing
Sciences]
. 12
The language
Records
myRecord = { x = 3, y = 4 }
sum record =let
{x,y} = recordin
x + y
....
[Faculty of ScienceInformation 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 ScienceInformation 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 -> UseraddBio bio user =
{ user | bio = bio }
....
[Faculty of ScienceInformation 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 ScienceInformation and Computing
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 -> ""
....
[Faculty of ScienceInformation and Computing
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 "+" ]]
....
[Faculty of ScienceInformation and Computing
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)
....
[Faculty of ScienceInformation and Computing
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 =
...
....
[Faculty of ScienceInformation and Computing
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 =
...
....
[Faculty of ScienceInformation and Computing
Sciences]
. 20
The architecture
Login form example
....
[Faculty of ScienceInformation and Computing
Sciences]
. 21
The architecture
Model
type alias Model ={ name : String, password : String, passwordAgain : String}
model : Modelmodel =
Model "" "" ""
....
[Faculty of ScienceInformation and Computing
Sciences]
. 22
The architecture
Update
type Msg= Name String| Password String| PasswordAgain String
update : Msg -> Model -> Modelupdate msg model =
case msg ofName name ->
{ model | name = name }Password password ->
{ model | password = password }PasswordAgain password ->
{ model | passwordAgain = password }
....
[Faculty of ScienceInformation and Computing
Sciences]
. 23
The architecture
View
view : Model -> Html Msgview model =
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]
....
[Faculty of ScienceInformation and Computing
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 ]
....
[Faculty of ScienceInformation and Computing
Sciences]
. 25
The architecture
main =Html.beginnerProgram
{ model = model, view = view, update = update}
....
[Faculty of ScienceInformation and Computing
Sciences]
. 26
The architectureMessaging
▶ The way to communicate between the different partsof the MVC-structure.
....
[Faculty of ScienceInformation and Computing
Sciences]
. 27
The architecture
Subscriptions
....
[Faculty of ScienceInformation 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 ScienceInformation 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 ScienceInformation 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 ScienceInformation and Computing
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
....
[Faculty of ScienceInformation and Computing
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
....
[Faculty of ScienceInformation and Computing
Sciences]
. 31
Transcompiling
Currying and partial application
▶ Functions wrappers F2 to F9▶ Function appliers A2 to A9
....
[Faculty of ScienceInformation and Computing
Sciences]
. 32
Transcompiling
Arrays
Relaxed Radix Balanced Trees
....
[Faculty of ScienceInformation and Computing
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!
....
[Faculty of ScienceInformation and Computing
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.
....
[Faculty of ScienceInformation and Computing
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.
....
[Faculty of ScienceInformation and Computing
Sciences]
. 36
Transcompiling
Example: quicksort
....
[Faculty of ScienceInformation and Computing
Sciences]
. 37
Transcompiling
Example: quicksort
....
[Faculty of ScienceInformation and Computing
Sciences]
. 38
Transcompiling
Example: quicksort
....
[Faculty of ScienceInformation and Computing
Sciences]
. 39
Transcompiling
Example: quicksort
....
[Faculty of ScienceInformation and Computing
Sciences]
. 40
Elm in practice
Interop
▶ Json▶ Javascript
....
[Faculty of ScienceInformation and Computing
Sciences]
. 40
Elm in practice
Interop
▶ Json▶ Javascript
....
[Faculty of ScienceInformation and Computing
Sciences]
. 41
Elm in practice
Interop Json
▶ An important feature for a web language
....
[Faculty of ScienceInformation and Computing
Sciences]
. 42
Elm in practice
Interop Javascript
We can embed Elm in HTML to communicate with Javascript
▶ Ports▶ Flags
....
[Faculty of ScienceInformation and Computing
Sciences]
. 43
Elm in practice
Embed Elm in Html
elm-make src/Main.elm --output=main.js
....
[Faculty of ScienceInformation and Computing
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>
....
[Faculty of ScienceInformation and Computing
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'
});
....
[Faculty of ScienceInformation and Computing
Sciences]
. 46
Elm in practice
Error handling
Why?
▶ Elm promises no runtime errors▶ Maybe/Result▶ Null
....
[Faculty of ScienceInformation 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 ScienceInformation and Computing
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
....
[Faculty of ScienceInformation and Computing
Sciences]
. 49
Elm in practice
Elm awesomeness
▶ Great package manager▶ Really clear error messages▶ Semantic versioning
....
[Faculty of ScienceInformation 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 ScienceInformation 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 ScienceInformation and Computing
Sciences]
. 52
Questions?