1. why you should care
@jcemer
Types and
Immutability

2. @jcemer
jcemer.com

4. 2012 - Event-driven Programming
2012 - CoffeeScript
2013 - OO and Functional Programming
2014 - Async Control Flow
2015 - Modern Paradigms and Concepts
2017 - Managing and Evolving Code
2017 - Types and Immutability

5. JavaScript is a high-
level, dynamic, weakly
typed, object-based,
multi-paradigm, and
interpreted language
According Wikipedia

6. 01Data
Types

7. A type is a set of
similar values
with associated
operations

8. 4
2.1
893
12
2.3
5.3 *
56
1
3
4
6
9.4

9. ObjectString
Number
Undefined
Null
Boolean
Symbol
Literal
Array
Function
Date
JSON
…
Primitives

10. undefined?

11. Types in
JavaScript have
always been a
headache

12. class Product {
constructor (name, cost, tax)
{
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost *
(1 + this.tax)
}
}
Product
Name
Cost
Tax
Price()
String
Number
Number
Number

13. const item = new Product("Banana", 2, "%30")
item.price()
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost *
(1 + this.tax)
}
}
This is Not
a Number™

14. There is a typo here!
const item = new Product("Banana", 2, .3)
item.prices()
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost *
(1 + this.tax)
}
}

15. Modern
errors

16. The new
keyword is
missing

17. Common Mistake #1:
Incorrect references
to this
The 10 Most Common Mistakes
JavaScript Developers Make
by Ryan J. Peterson

18. function Product(name, cost, tax) {
if (!(this instanceof Product)) {
throw new Error("Constructor called as a function")
}
this.name = name
this.cost = cost
this.tax = tax
}
Product("Banana", 2, "%30")

20. 1 * 'foo'
'foo' * 1
'foo' + 1
[] + {}
({}) + {}
null + 1
5 % undefined
null.prop
undefined()

21. 1. NaN
2. undefined is not a function
3. incorrect this reference
4. cannot read/set any
property of undefined/null
5. silent errors

22. Those are all typical
examples of runtime
errors from a
dynamic language

23. 02Type
Checking

24. flow.org

25. Static type checking
is performed before
running code

26. eslint.org

27. Let’s add types to
help programmers
and not computers

28. Product
Name
Cost
Tax
Price()
String
Number
Number
Number

29. /* @flow */
class Product {
name: string
cost: number
tax: number
constructor (name, cost, tax) {
this.name = name
this.cost = cost
this.tax = tax
}
price() {
return this.cost * (1 + this.tax)
}
}
const item = new Product("Banana", 2, "%30")
Type annotations
Type incompatible!

31. typescript
lang.org

33. primitives
objects (arrays, classes, …)
literal
+
Types

34. any
nullable or maybe
union and intersection
+
Advanced Types
Any value
null or Product
Product or FreeProduct

35. new types (aliases)
interfaces
generics
+
Fancy Types
Cost is a number
Any value with price method
“a way of abstracting a type away”

36. Type Signature
allows you to
foresee problems
Types as Design Tools
by Kris Jenkins

37. /* @flow */
function crazy() : number | string | Array<null> {
const rand = Math.random()
if (rand > .5) {
return 0
}
if (rand < .5) {
return []
}
return rand.toString()
}
const ops : number | string | Array<null> = crazy()
Type smells!

38. A Type System is,
first and foremost,
a communication
mechanism
Tweet by Sarah Mei

39. A Type System replaces
direct communication
with other humans, when
such communication isn't
practical - large teams,
open source, etc
Tweet by Sarah Mei

41. 03IO Data
Parsing

42. interface ItemsResponse {
results: string[]
}
http.get<ItemsResponse>('/api/items')
.subscribe(data => {
this.results = data.results
})
It should return a
result property
with an array of
strings
from Angular documentation

43. interface ItemsResponse {
results: string[]
}
{
"results": [
"Item 1",
"Item 2",
]
}
Code
API Responses
{
"results": [
8,
4,
]
}
Oops!

44. Trust me,
I'm an
engineer

45. /* @flow */
const someValue: any = null
const strLength: number = someValue.length
any is a
bad guy!

46. Using any is
completely unsafe,
and should be avoided
whenever possible
from Flow documentation

47. Runtime exception:
the case of broken
data not being
handled

48. elm-lang.org

49. Elm is a statically
typed language
with no runtime
exceptions

50. type alias Product =
{ name : String
, cost : Float
, tax : Float
}
price : Product -> Float
price {cost,tax} =
cost * (tax + 1)
Almost only
type annotation

51. item : Product
item = { name = "Banana", cost = 2, tax = 0.3 }
itemPrice : Float
itemPrice = price item
-- 2.6 : Float
type alias Product =
{ name : String
, cost : Float
, tax : Float
}
price : Product -> Float
price {cost,tax} =
cost * (tax + 1)

53. > import Json.Decode exposing (..)
> resultsDecoder = field "results" (list string)
> decodeString resultsDecoder "bla"
Err "Given an invalid JSON: Unexpected token b in JSON…"
: Result.Result String (List String)
> decodeString resultsDecoder "{ "results": ["1", "2"] }"
Ok ["1","2"] : Result.Result String (List String)

54. Request
Response
Ok
Render results
Show an error
message
Err

55. A Result wraps any
computation that may
fail, this is a great way
to manage errors
Elm documentation

56. There is no
exception in Elm,
the code must cover
all edge cases

57. Relax, you don’t
need to move away
from JavaScript!

58. var t = require("tcomb")
const Results = t.interface({
results: t.list(t.String)
}, "Results")
Results({
results: ["1", "2"]
})
Results({
results: [2]
})
// TypeError: [tcomb] Invalid
value 2 supplied to Results/
results: Array<String>/0:
String
Check the
types values
at runtime
github.com/
gcanti/tcomb

59. +
github.com/
gcanti/
babel-plugin-
tcomb

60. bit.ly/
runtime-type-
validation
+

61. We should focus our
efforts on either avoiding
—or fixing!—the corner
case value coercions
Fixing Coercion, Not
The Symptoms by Kyle Simpson

62. 04Immuta
bility

63. All JavaScript
primitives are
immutable

65. But JavaScript
objects are
mutable

66. Oops!
Side effects

67. User
Product
Data model UI components
user.father.name = "Peter"
X
X
X
X
X
X
X
X
Father Mother …
…
…

68. A small change on
mutable data implies
on check and render
all descendants
components

69. No way to
watch
changes!
🙏

70. Immutability
is a very good
paradigm

71. Immutable data
just is, once
created, it will be
the same forever

72. const newUser = {
...user,
father: {
...user.father,
name: "Peter"
}
}
Create a new
user with a
new father
user === newUser // false
user.father === newUser.father // false
user.name === newUser.name // true
user.mother === newUser.mother // true

73. UI components
Re-render
user === newUser
// false
product === newProduct
// true
No re-render

74. Immutable
data removes
complexity
Immutable Data and React
by Lee Byron

75. Immutability improve
performance when used
with React Pure
Component or Angular
OnPush Change Detection

76. redux.js.org
github.com/
jcemer/
minimalistic-
shop

77. Oops

78. const item = [0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1,
0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0,
0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0,
1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0,
1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1,
0, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0,
0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0,
1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0,
0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,
0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0,
0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1,
0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1,
0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0,
1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0,
1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1,
0, 1, 1, 0, 1, 0, …]

79. // item.push(42) without mutation:
var itemNew = item.concat([42])
// item.unshift(42) without mutation:
var itemNew = [42].concat(item)
// item[10] = 42 without mutation:
var itemNew = item.slice(0, 10)
.concat(42)
.concat(item.slice(11))
// item.splice(10, 0, 42) without mutation:
var itemNew = item.slice(0, 10)
.concat(42)
.concat(item.slice(10))
Ok,
Enough is
enough!

80. Array manipulation
is very optimized
when performed
with mutation

81. 05
Persistent
data
structures

82. facebook.
github.io/
immutable-js/

83. Think about
managing the data
like code on Git
Immutable data structures for
functional JS by Anjana Vakil

84. const item = Immutable.List(
[0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 1, 1, …]
)
const item2 = item.push(42)
const item3 = item.unshift(42)
const item4 = item.set(10, 42)
const item5 = item.insert(10, 42)

86. Hash Array
Mapped Trie

87. Immutable Data
and React
Immutable data
structures for
functional JS
youtu.be/Wo0qiGPSV-s
youtu.be/I7IdS-PbEgI

88. const user = {
name: "Paul",
father: { name: "John" },
mother: { name: "Ana" }
}
const item = Immutable.fromJS(user)
const newItem = item.setIn(
["father", "name"], "Peter"
)
Deep change

89. ImmutableJS has poor
docs, hard debugging
and enforces a new API
for data manipulation

90. redux.js.org/
docs/
recipes/
UsingImmutableJ
S.html

91. 06Immutable
languages

92. All values in Elm
are immutable
According Wikipedia 🤔

93. There are many tools
and languages
nowadays that enforce
Pure Functional
Paradigm

94. staltz.com/
is-your-javascript-
function-actually-
pure.html

95. It’s an incredible blessing,
that we went from 0 viable
ways to do FP in the browser
to 4 in just a few years
JavaScript vs Elm vs PureScript vs
GHCjs vs Scalajs by Isaac Shapira

97. ***

98. I hope you learned
something new!
@jcemer
Thank you

99. Special
thanks
Hugo Bessa
Rafael Rinaldi
Rodrigo Willrich
Zeh Fernandes
Marcelo Boeira
Felipe Fialho
Rachel Mason