Frontend code without runtimeexceptions
@PietroGrandi3D
elm
1 / 41
Pietro Grandi
1. Frontend developer
2. Write on pietrograndi.com
3. Born as 3D Artist
Hi!
2 / 41
Runtime exception
3 / 41
When does it happen?
calling unexisting methods
var aString = 1;var first = aString.slice(0,1);
Runtime exception
4 / 41
When does it happen?
calling unexisting methods
var aString = 1;var first = aString.slice(0,1);
your program expects a type to be a di�erent one
Runtime exception
5 / 41
You discover it by the timeyou run that specific code
6 / 41
What causes it?
1. inconsistent data from external sources
Runtime exception
7 / 41
What causes it?
1. inconsistent data from external sources
2. error loading dependencies
Runtime exception
8 / 41
What causes it?
1. inconsistent data from external sources
2. error loading dependencies
3. bugs
Runtime exception
9 / 41
What causes it?
1. inconsistent data from external sources
2. error loading dependencies
3. bugs
we can control bugs
Runtime exception
10 / 41
Can't I prevent bugs?
you should be able to
a simple JS bug
function contains(c, s) { var index = s.indexOf(c); return index > -1; }
console.log(contains("hi", "there")); // false console.log(contains("hi", "hi!")); // true console.log(contains("hi", 1)); // TypeError: s.indexOf is // not a function
Bugs
11 / 41
Bring back type checking
apply defensive techniques
check against type
function contains(c, s) { var index = typeof s === 'string' ? s.indexOf(c) : -1; return index > -1; }
console.log(contains("hi", "there")); // false console.log(contains("hi", "hi!")); // true console.log(contains("hi", 1)); // false
Bugs
12 / 41
Figthing bugs in JS
use a linter
put runtime checks/assertions
handle corner cases
write more tests
try to rule your growing codebase
Bugs
13 / 41
Isn't this a job for acompiler?
14 / 41
Catch'em at compile time
static type checking
non-nullable types
no implicit casts
referential transparency
Bugs
15 / 41
How does Elm behave? contains c s = (List.length (String.indexes c s)) > 0
v = contains "hi" 1
Bugs
runnable example here 16 / 41
Doesn't compile contains c s = (List.length (String.indexes c s)) > 0
v = contains "hi" 1
Bugs
runnable example here 17 / 41
Cool.What is Elm?
18 / 41
What is Elm
functional language
declarative UI design
ML-like syntax
immutable data structures
statically and strongly typed
Elm
19 / 41
Strong typing if 0 then doStuff else differentStuff
Elm
20 / 41
Immutable data structures a = 2 a = a + 3
Elm
21 / 41
Functional
first-class functions
all functions can be partially applied
contains c s = (List.length (String.indexes c s)) > 0
containsH = contains "h" -- a new function
all functions always return
Elm
22 / 41
Features
compiles to Javascript
follows Elm Architecture
inference engine
enforces semantic versioning
Javascript interoperability
Elm
23 / 41
Elm Architecture?
24 / 41
The pattern
model: the state
update: modify your state
view: show your state
Elm architecture
25 / 41
The pattern
model: the state
update: modify your state
view: show your state
update changes model using messages
Elm architecture
26 / 41
The counter!main = beginnerProgram { model = 0, view = view, update = update }
type Msg = Increment | Decrement
update msg model = case msg of Increment -> model + 1 Decrement -> model - 1
view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
A trivial example
try it live! 27 / 41
Looks like Redux
Elm architecture
actually, Redux has been inspired by the Elm architecture... 28 / 41
Looks like Redux
it is part of the language
no plugins, libraries, hacks
just one way to go
Elm architecture
actually, Redux has been inspired by the Elm architecture... 29 / 41
The virtual DOM
evaluate what changes
render what is needed
lazy evaluation
Performances
30 / 41
JS output
use arrays instead of dictionaries
references instead of looking up
fully initialize objects
hooks to requestAnimationFrame to save work
Performances
31 / 41
How does it compare tocompetitors?
32 / 41
source 33 / 41
Sorry, I liedYou can still get runtime exceptions
34 / 41
Sorry, I liedYou can still get runtime exceptions
If you use Javascript.
35 / 41
Manual bootstrap var mountNode = document.getElementById('main'); var myApp = Elm.Main.embed(mountNode);
can act on a subset of the page
allows for slow integration
can build a small module
Javascript interoperability
36 / 41
Ports
get data from JS code
send data to JS code
typed ports
runtime assertions
Javascript interoperability
37 / 41
Inbound ports
define the port
type alias Move = (Float, Float)
port scroll : (Move -> msg) -> Sub msg
send data from JS code
myApp.ports.scroll.send([scroll, newScroll]);
Javascript interoperability
code from MaltaJS Elm app 38 / 41
Outbound ports
define the port
port todoListChanges : (List TodoItem) -> Cmd msg
listen for data
myApp.ports.todoListChanges.subscribe((updatedTodoList) => { /*...*/ })
Javascript interoperability
code from TodoMVC done in Elm 39 / 41
Elm Package Manager
forces documentation with a precise format
must document every public item
automatic semantic versioning
Package system
40 / 41
References:
Elm website
Elm slack community
Elm architecture
Move fast and don't break things
Thank you!
41 / 41