![Page 1: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/1.jpg)
1
Build frontend applications that never crash with fp-ts ecosystem
AntonSutarmin
![Page 2: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/2.jpg)
2
Truly reliable frontend applications with fp-ts ecosystem
AntonSutarmin
![Page 3: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/3.jpg)
3
![Page 4: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/4.jpg)
4
![Page 5: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/5.jpg)
5
The quality of being able to be trusted to do what somebody wants or needs
Reliability
![Page 6: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/6.jpg)
6
Reliability Edge case coverage
No runtime crashes
Compliance with tech specs
![Page 7: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/7.jpg)
7
How to achieve better reliability?
Static types
Functional paradigm
Runtime type safety
![Page 8: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/8.jpg)
8
How to achieve better reliability?
Static types
Functional paradigm
Runtime type safety
![Page 9: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/9.jpg)
Static types
9
Dynamic types
● Faster initial development
● Better code reusability and
expressiveness
● Easier maintenance
● Self-documented code
![Page 10: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/10.jpg)
10
https://twitter.com/01k/status/1067788059989684224
![Page 11: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/11.jpg)
Typescript
11
● Very expressive type system
● Typed superset of JavaScript
● Compiles to plain JS
● Could be used in very different ways
![Page 12: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/12.jpg)
strictNullChecks: false
12
● null/undefined is a part of every type
● Works like in most modern programming languages
![Page 13: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/13.jpg)
strictNullChecks: false
13
● null/undefined is a part of every type
● Works like in most modern programming languages
![Page 14: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/14.jpg)
strictNullChecks: true
14
![Page 15: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/15.jpg)
strictNullChecks: true
15
![Page 16: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/16.jpg)
strictNullChecks: true
16
Works without deceiving a programmer
![Page 17: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/17.jpg)
TS: gotchas
17
Array indexing
![Page 18: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/18.jpg)
18
TS: gotchas
Array indexing
any type
![Page 19: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/19.jpg)
19
TS: gotchas
Array indexing
any type
![Page 20: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/20.jpg)
Static types: takeouts
20
Use responsibly
Don’t try to trick
![Page 21: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/21.jpg)
21
How to achieve better reliability?
Static types
Functional paradigm
Runtime type safety
![Page 22: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/22.jpg)
22
Functional paradigm
Immutable data
Pure functions
![Page 23: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/23.jpg)
23
Functional paradigm
Immutable data
Pure functions
![Page 24: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/24.jpg)
24
goto statement
![Page 25: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/25.jpg)
25
throw is new goto
try {
} catch (e) { /* good enough? */}
![Page 26: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/26.jpg)
26
Error | UserFP-way to pass errors
![Page 27: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/27.jpg)
27
Either<Error, User>FP-way to pass errors
![Page 28: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/28.jpg)
28
Either monad
![Page 30: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/30.jpg)
30
fp-ts
● Library for FP in TS
● Collection of data types and utilities
● Higher Kinded Types in Typescript!
![Page 31: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/31.jpg)
31
fp-ts/lib/Either
● Can be used for error handling
![Page 32: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/32.jpg)
32
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
![Page 33: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/33.jpg)
33
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
![Page 34: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/34.jpg)
34
fp-ts/lib/*
● Pipeable API
● Option
● Task
● Reader
● Writer
● IO
● TaskEither
● NonEmptyArray
● State
● Store
![Page 35: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/35.jpg)
35
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
![Page 36: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/36.jpg)
36
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
![Page 37: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/37.jpg)
37
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
● No runtime exceptions at all
![Page 38: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/38.jpg)
38
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
● No runtime exceptions at all
![Page 39: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/39.jpg)
39
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
● No runtime exceptions at all
![Page 40: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/40.jpg)
40
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
● No runtime exceptions at all
![Page 41: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/41.jpg)
41
fp-ts/lib/Either
● Can be used for error handling
● Pipeable API
● No runtime exceptions at all
![Page 42: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/42.jpg)
42
How to achieve better reliability?
Static types
Functional paradigm
Runtime type safety
![Page 43: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/43.jpg)
43
Runtime validation
![Page 44: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/44.jpg)
44
Runtime validation
![Page 45: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/45.jpg)
45
io-ts
● Part of fp-ts ecosystem
● Runtime type validation
function safeParseUser(str: string): E.Either<t.Errors, User> {
const parsedUser = JSON.parse(str);
return (parsedUser);
}
![Page 46: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/46.jpg)
46
io-ts: basic types
function safeParseUser(str: string): E.Either<t.Errors, User> {
const parsedUser = JSON.parse(str);
return userCodec.decode(parsedUser);
}
![Page 47: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/47.jpg)
47
io-ts: composability
userCodec
![Page 48: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/48.jpg)
48
io-ts: use cases
● http-requests
![Page 49: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/49.jpg)
49
io-ts: use cases
● http-requests
● local storage data
![Page 50: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/50.jpg)
50
Static types
Functional paradigm
Runtime type safety
Wearesafe!
![Page 51: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/51.jpg)
51
And there is a lot more!
● fp-ts-routing
● newtype-ts
● ...
![Page 52: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/52.jpg)
![Page 53: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/53.jpg)
@AntonSutarmin
twitter.com/devexperts
facebook.com/devexperts github.com/devexperts
Stay tuned!
linkedin.com/company/devexperts
![Page 54: that never crash Build frontend applications with fp-ts ... · Typed superset of JavaScript Compiles to plain JS Could be used in very different ways. strictNullChecks: ... Use responsibly](https://reader035.vdocuments.site/reader035/viewer/2022070902/5f5cef511e32812432314724/html5/thumbnails/54.jpg)
Questions?
@AntonSutarmin