Just Use Any: js.la Edition

Slide 1

Slide 1 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Just Use Any Lauren Tan (she/her) PRESENTED BY unknown

Slide 2

Slide 2 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA type Spiderman SKIP INTRO

Slide 3

Slide 3 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Type systems at ${work}.

Slide 4

Slide 4 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA https://jobs.netflix.com/

Slide 5

Slide 5 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Type Systems at Netflix Studio UI. We're hiring UI Engineers in LA!

Slide 6

Slide 6 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Studio UI Foundations. react redux* Apollo GraphQL TypeScript gatsby/Next.js lerna yarn ??? Top secret stuff Designed by Sophinie Som https://jobs.netflix.com/jobs/870589 (my awesome team)

Slide 7

Slide 7 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA TypeScript. GraphQL. gRPC. JVM.

Slide 8

Slide 8 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Making the case for typed JavaScript at Netflix.

Slide 9

Slide 9 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 1. Improve developer productivity. Making the case for typed JavaScript at Netflix.

Slide 10

Slide 10 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 2. Reduce bugs. Making the case for typed JavaScript at Netflix.

Slide 11

Slide 11 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 3. Performance*. Making the case for typed JavaScript at Netflix.

Slide 12

Slide 12 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html

Slide 13

Slide 13 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 4. End to end type safety. Making the case for typed JavaScript at Netflix.

Slide 14

Slide 14 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA We also considered the risks of adopting typed JavaScript. Making the case for typed JavaScript at Netflix.

Slide 15

Slide 15 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA TypeScript checked most of those boxes. Making the case for typed JavaScript at Netflix.

Slide 16

Slide 16 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Building a community.

Slide 17

Slide 17 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 18

Slide 18 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA MY CODEBASE AFTER 3.7 LANDS yay!?.optional!?.chaining

Slide 19

Slide 19 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 20

Slide 20 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA • Matt Greer - Type Widening • Ryan Anklam - TVUI's Experience with TypeScript Tim Branyen - Experience Using TypeScript in AppDirectory • Jordan Gensler - How To Type Everything • Danny Cochran - TypeScript with Maple • Randy Wenas - TS at Employee Apps • Emily Dobervich - TypeScript is just JavaScript • Young Min Kim - Using TypeScript Today Passionate TypeScript users at Netflix. Building a community.

Slide 21

Slide 21 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA "Prefer statically typed [!!...] for better developer productivity"

Slide 22

Slide 22 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA TypeScript. GraphQL. gRPC. JVM.

Slide 23

Slide 23 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA bit.ly/swipe-left

Slide 24

Slide 24 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Djikstra, supposedly "If debugging is the process of removing software bugs, then programming must be the process of putting them in."

Slide 25

Slide 25 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 26

Slide 26 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA "A type system is a tractable syntactic method for proving the absence of certain program behaviors by classifying phrases according to the kinds of values they compute." Types and Programming Languages, Benjamin C. Pierce

Slide 27

Slide 27 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 28

Slide 28 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA How many ways can this program fail?

Slide 29

Slide 29 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA const half = x !=> x / 2;

Slide 30

Slide 30 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA const TEST_CASES = [ null, undefined, Symbol(1), 10, '10', 'hello world', { name: 'Lauren' }, [1, 2, 3], x !=> x * x ];

Slide 31

Slide 31 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA TEST_CASES.map(testValue !=> { return { result: half(testValue), test: testValue.toString() } });

Slide 32

Slide 32 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA not my type!

Slide 33

Slide 33 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA TEST_CASES.map(testValue !=> { return { result: half(testValue), test: testValue.toString() } ^^^^^^^^^^ });

Slide 34

Slide 34 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 35

Slide 35 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Spend less time debugging, and more time writing code.

Slide 36

Slide 36 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 37

Slide 37 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 38

Slide 38 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA const TEST_CASES = [ null, !// Uncaught TypeError undefined, !// Uncaught TypeError Symbol(1), !// Uncaught TypeError 10, !// 5 '10', !// 5 'hello world', !// NaN { name: 'Lauren' }, !// NaN [1, 2, 3], !// NaN x !=> x * x !// NaN ];

Slide 39

Slide 39 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA How many ways can this program fail? (Infinity)

Slide 40

Slide 40 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA const half = (x: number) !=> x / 2;

Slide 41

Slide 41 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA How many ways can this program fail (at compile time)?

Slide 42

Slide 42 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 0*.

Slide 43

Slide 43 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Less is better.

Slide 44

Slide 44 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA What are types anyway?

Slide 45

Slide 45 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA A type is the set of possible values for a term.

Slide 46

Slide 46 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA string type T1 = string '中⽂' 'español' '⽇本語' 'js.la' '2019' '✌'

Slide 47

Slide 47 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA number number type T2 = number 2019 NaN Infinity 123.45 0x11 123e-1

Slide 48

Slide 48 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA type T3 = string | number '中⽂' 'español' '⽇本語' 'js.la' '2019' '✌' 2019 NaN Infinity 123.45 0x11 123e-1 number string

Slide 49

Slide 49 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Why should I care about the cardinality of a type? cardinality · number of elements of the set

Slide 50

Slide 50 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA number type T4 = 'TSConf' | 'dotJS' | 'React Rally' Cardinality: 3 'TSConf' 'dotJS' 'React Rally'

Slide 51

Slide 51 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA number type Option = None | Some Cardinality: 2 None Some https://github.com/gcanti/fp-ts

Slide 52

Slide 52 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA number Cardinality: Infinity undefined null number string symbol array object type T5 = unknown

Slide 53

Slide 53 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA type T5 = unknown *slaps roof of typescript* this bad type can fit so many types in it

Slide 54

Slide 54 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA When we restrict what we can do, RUNAR BJARNASON it's easier to understand what we can do. https://youtu.be/GqmsQeSzMdw

Slide 55

Slide 55 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Being precise helps TypeScript help you.

Slide 56

Slide 56 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA I had no idea how interpreters or compilers work. So I decided to build one. github.com/poteto/boba-js

Slide 57

Slide 57 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !// Integers & arithmetic expressions!!... let version = 1 + (50 / 2) - (8 * 3); !// !!... and strings let name = "The Monkey programming language"; !// !!... booleans let isMonkeyFastNow = true; !// !!... arrays & hash maps let people = [{"name": "Anna", "age": 24}, {"name": "Bob", "age": 99}]; monkeylang.org

Slide 58

Slide 58 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !// User-defined functions!!... let getName = fn(person) { person["name"]; }; getName(people[0]); !// !=> "Anna" getName(people[1]); !// !=> "Bob" !// and built-in functions puts(len(people)) !// prints: 2

Slide 59

Slide 59 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA let fibonacci = fn(x) { if (x !== 0) { 0 } else { if (x !== 1) { return 1; } else { fibonacci(x - 1) + fibonacci(x - 2); } } };

Slide 60

Slide 60 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !// `newAdder` returns a closure that makes use of the free variables `a` and `b`: let newAdder = fn(a, b) { fn(c) { a + b + c }; }; !// This constructs a new `adder` function: let adder = newAdder(1, 2); adder(8); !// !=> 11

Slide 61

Slide 61 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Lex Parse Evaluate Simple interpreter architecture.

Slide 62

Slide 62 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA V8 architecture.

Slide 63

Slide 63 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Lex Parse Evaluate Simple interpreter architecture.

Slide 64

Slide 64 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA let add = fn(x, y) { x + y; };

Slide 65

Slide 65 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA let add = fn(x, y) { x + y; };

Slide 66

Slide 66 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA [ { type: TokenType.LET, literal: 'let' }, { type: TokenType.IDENT, literal: 'add' }, { type: TokenType.ASSIGN, literal: '=' }, { type: TokenType.FUNCTION, literal: 'fn' }, { type: TokenType.LPAREN, literal: '(' }, { type: TokenType.IDENT, literal: 'x' }, { type: TokenType.COMMA, literal: ',' }, { type: TokenType.IDENT, literal: 'y' }, { type: TokenType.RPAREN, literal: ')' }, { type: TokenType.LBRACE, literal: '{' }, { type: TokenType.IDENT, literal: 'x' }, { type: TokenType.PLUS, literal: '+' }, { type: TokenType.IDENT, literal: 'y' }, { type: TokenType.SEMICOLON, literal: ';' }, { type: TokenType.RBRACE, literal: '}' }, { type: TokenType.SEMICOLON, literal: ';' }, { type: TokenType.EOF, literal: '' }, ];

Slide 67

Slide 67 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export type LiteralType = string; export type Token = { type: TokenType; literal: LiteralType; };

Slide 68

Slide 68 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Lex Parse Evaluate Simple interpreter architecture.

Slide 69

Slide 69 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA [ LetStatement { token: { type: 'LET', literal: 'let' }, name: Identifier { token: [Object], value: 'add' }, value: FunctionLiteral { token: [Object], parameters: [Array], body: [BlockStatement] } } ]

Slide 70

Slide 70 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export type BooleanLiteralToken = { type: TokenType.TRUE | TokenType.FALSE; literal: LiteralType; }; export default class BooleanLiteral implements Expression { constructor(public token: BooleanLiteralToken, public value: boolean) {} expressionNode() { /** snip **/ } tokenLiteral() { /** snip **/ } toString() { /** snip **/ } }

Slide 71

Slide 71 text

Slide 72

Slide 72 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !(true !== true);

Slide 73

Slide 73 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !(true !== true); currToken

Slide 74

Slide 74 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !(true !== true); currToken

Slide 75

Slide 75 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA !(true !== true); currToken

Slide 76

Slide 76 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export type LiteralType = string; export type Token = { type: TokenType; literal: LiteralType; };

Slide 77

Slide 77 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export const enum TokenType { ILLEGAL = 'ILLEGAL', EOF = 'EOF', !// Identifiers + Literals IDENT = 'IDENT', INT = 'INT', !// Operators ASSIGN = '=', PLUS = '+', MINUS = '-', BANG = '!', ASTERISK = '*', SLASH = '/', LT = '<', GT = '>', EQ = '!==', NOT_EQ = '!!=', !// Delimiters COMMA = ',', SEMICOLON = ';', LPAREN = '(', RPAREN = ')', LBRACE = '{', RBRACE = '}', !// Keywords FUNCTION = 'FUNCTION', LET = 'LET', TRUE = 'TRUE', FALSE = 'FALSE', IF = 'IF', ELSE = 'ELSE', RETURN = 'RETURN', } 27 types of Tokens.

Slide 78

Slide 78 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA

Slide 79

Slide 79 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export default function parseBoolean(this: Parser): Expression { return new BooleanLiteral(this.currToken, !/* !!... !*/); !// ^^^^^^^^^^^^^^ !// Argument of type 'Token' is not assignable to parameter of type !// 'BooleanLiteralToken'. !// Types of property 'type' are incompatible. !// Type 'TokenType' is not assignable to type !// 'TokenType.TRUE | TokenType.FALSE'.ts(2345) } this.currToken could be *any* token!

Slide 80

Slide 80 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Type narrowing.

Slide 81

Slide 81 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export default function assertTokenType( token: Token, !!...assertedTokenTypes: T[] ): asserts token is { type: T; literal: LiteralType } { const satisfiesAssertion = assertedTokenTypes.some( type !=> type !!=== token.type ); if (!satisfiesAssertion) { throw new AssertionError({ message: `Token type is not: ${assertedTokenTypes.join(' OR ')}`, }); } }

Slide 82

Slide 82 text

Slide 83

Slide 83 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export default function parseBoolean(this: Parser): Expression { assertTokenType(this.currToken, TokenType.TRUE, TokenType.FALSE) return new BooleanLiteral(this.currToken, !/* !!... !*/); !// ^^^^^^^^^^^^^^ !// (property) Parser.currToken: { !// type: TokenType.TRUE | TokenType.FALSE; !// literal: string; !// } } ✅ this.currToken MUST be of type TokenType.TRUE | TokenType.FALSE

Slide 84

Slide 84 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export default function hasOwnProperty( obj: T, key: PropertyKey ): key is keyof T { return Object.prototype.hasOwnProperty.call(obj, key); }

Slide 85

Slide 85 text

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Slide 88

Slide 88 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA const KEYWORDS = { fn: TokenType.FUNCTION, let: TokenType.LET, true: TokenType.TRUE, false: TokenType.FALSE, if: TokenType.IF, else: TokenType.ELSE, return: TokenType.RETURN, } as const; hasOwnProperty(KEYWORDS, ident)

Slide 89

Slide 89 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA export function lookupIdentifier(ident: string) { if (hasOwnProperty(KEYWORDS, ident)) { return KEYWORDS[ident]; !// ^^^^^ !// (parameter) ident: !// | "fn" !// | "let" !// | "true" !// | "false" !// | "if" !// | "else" !// | "return" } return TokenType.IDENT; } ident is now a string literal, with a cardinality of 7.

Slide 90

Slide 90 text

Slide 91

Slide 91 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Recap.

Slide 92

Slide 92 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 1. Improve developer productivity. Making the case for typed JavaScript at Netflix.

Slide 93

Slide 93 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 2. Reduce bugs. Making the case for typed JavaScript at Netflix.

Slide 94

Slide 94 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 3. Performance*. Making the case for typed JavaScript at Netflix.

Slide 95

Slide 95 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA 4. End to end type safety. Making the case for typed JavaScript at Netflix.

Slide 96

Slide 96 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Spend less time debugging, and more time writing code.

Slide 97

Slide 97 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA A type is the set of possible values for a term. cardinality · number of elements of the set

Slide 98

Slide 98 text

! sugarpirate_ " poteto Just Use Any js.la 2020, Los Angeles, CA Less is better.

Slide 99

Slide 99 text

Thank you. ! sugarpirate_ # sugarpirate_ " poteto $ bit.ly/just-use-any-la jobs.netflix.com/jobs/870589