How FP made Grammarly codebase error-Free & Predictable

A presentation at OdessaJS by Anton Pets

How FP made Grammarly codebase error-Free & Predictable Anton Pets 20 July 2019

!” Grammarly - a writing assistant that helps make your communication clear and effective, wherever you type. 20M Daily Active Users !3

4

Grammarly Challenges !5

Text is difficult !6

Change is difficult ➡ !7

Our combo Object Oriented Design !8

!9

We believe that static types help a lot when building a complex system !10

TypeScript is… Args validation - free & out of the box !11

TypeScript is… !12

TypeScript is… 💚 !13

TypeScript is… Confident refactoring !14

TypeScript is… Interfaces! !15

= ❤ Types + !16

!17

!18

!19

TypeScript FP libs Funfix fp-ts !20

TypeScript FP libs Funfix fp-ts !21

Functional Programming: Real Life Cases !22

💼 Case 1/4 !23

!24

!25

!26

😊 !27

🧪 How to experiment ? !28

!29

!30

!31

!32

Can we 🧪 better ? !33

!34

!35

!36

!37

!38

!39

!40

!41

!42

Pure Functions Deterministic: Same Input ➡ Same output No uncontrolled side effects !43

Pure Functions Deterministic: Same Input ➡ Same output No uncontrolled side effects !44

!45

⛳ What we achieved !46

⛳ Reliable almost nobody knows about 🧪 !47

⛳ Extensible add ♾ number of 🧪 !48

💼 Case 2/4 !49

!50

!51

!52

!53

!54

🙏 Will not compile !55

🤔 But how to deal with null? !56

!57

🤔 Empty alert? Exception? … !58

Bad !59
Null 2) Undefined

!60

!61

!62

!63

!64

!65

Option ≡ an array with 0…1 elements !66

map filter forEach contains … !67

map filter forEach contains … empty getOrElse fold … !68

!69

!70

!71

!72

⛳ What we achieved !74

⛳ Reliable empty values are safe !75

⛳ Clean no ifs overload, empty values handled separately !76

💼 Case 3/4 !77

!78

!79

!80

!81

!82

!83

!84

!85

!86

!87

!88

🤔 ” How to handle errors correctly? !91

!92

🧐 !93

!94

!95

!96

!97

⛳ What we achieved !98

⛳ Clean & Confident no defensive programming !99

⛳ Single Responsibility Business logics is separated from error handling !100

💼 Case 4/4 !101

!102

!103

!104 🏋

React lazy loading 👍 !105

🌓 !106

https://dev.to

!109

!110

!111

!112

!113

!114

What we want? When we want it? Good retry function! Now!!!

!116

!117

😱 !120

!121

fp-ts !122

Promise in FP Task !123

Promise in FP Task !124

Promise in FP Task !125

Error + Result container Either<Error, Result> !126

Error + Result container Either<Error, Result> !127

Error + Result container Either<Error, React.Component> where type Error = TimeoutError | 404Error !128

Task returning Either Task<Either<Error, Result>> alias: TaskEither<Error, Result> !129

Task returning Either TaskEither<Error, Result> () => Promise< Either<Error, Result> > !130

!131

✅ !132

☑ ✅ !133

https://github.com/gcanti/retry-ts by the author of fp-ts !134

!135

!136

!137

You can’t just stop speaking about FP

!139

!141

!142

!143

!144

✅ !145

☑ ✅ ☑ !146

!147

!148

!149

✅ !150 ✅

☑ ✅ ☑ ☑ !151

!152

!153

!154

!155

!156

✅ !157 ✅ ✅

☑ ☑ ☑ ☑ ✅ !158

!159

Сode examples: done !163

⛳ What we achieved !164

⛳ Flexible retry Combine different retry policies !165

⛳ Predictable Know your errors in advance !166

⛳ Isolated side effects Combine complex tasks without execution !167

Problem - Solution Empty values ➡ !168 Option

Problem - Solution Empty values ➡ Option Exceptions ➡ Try !169

Problem - Solution Empty values ➡ Option Exceptions ➡ Try Async side effects ➡ Task / TaskEither !170

Remember?

Option Try Task / TaskEither !172

One last thing FP is about composition: Function composition Monadic composition !173

Conclusions !174

One last last thing Composing Software: The Book E. Elliot Functional Programming in Scala P. Chiusano, R. Bjarnason www.grammarly.com/jobs You know what to do !175

Anton Pets
@oopets

1 / 175

Developing frontend applications is not simple because crafting UI systems with a complex mutable state spread across the network is inherently difficult. This problem is still very new and thus does not have clear answers. At Grammarly, we have found the methodology that lets us tackle this complexity while keeping our codebase error-free and predictable. Our approach combines the pragmatic usage of functional programming with static typing. I will show you how functional programming can solve typical frontend problems effectively and elegantly.