Typed Ember: Strong Types for Better Apps

A presentation at EmberConf 2019 in March 2019 in Portland, OR, USA by James C Davis

Slide 1

Slide 1

Typed Ember: Strong Types for Better Apps

Ember Community Discord: @jamescdavis GitHub: @jamescdavis Twitter: @jamscdavis

Slide 2

Slide 2

About Me

Slide 3

Slide 3

About Me

Slide 4

Slide 4

About My Work

Slide 5

Slide 5

About My Work

Front-end Lead, Center for Open Science

Slide 6

Slide 6

About My Work

Open Science Framework (osf.io)

Slide 7

Slide 8

Slide 8

About My Work

Typed-Ember Team

Slide 9

Slide 9

About My Work

ember-cli-typescript co-maintainer

Slide 10

Slide 10

About My Work

Ember and Ember Data type definitions

Slide 11

Slide 11

About My Work

Type definitions for popular addons

Slide 12

Slide 12

TypeScript

Slide 13

Slide 13

TypeScript Isn't Magical

Slide 14

Slide 14

¿por qué?

Slide 15

Slide 15

“Automatic” Documentation

Slide 16

Slide 16

API Documentation in Javascript

Slide 17

Slide 17

API Documentation in TypeScript

Slide 18

Slide 18

Return Types are Inferred

Slide 19

Slide 19

Reduce Run-time Errors

Slide 20

Slide 20

Simple Function with Object Property Access

Slide 21

Slide 21

Call Function with no Arguments

Slide 22

Slide 22

TypeError: Cannot read property ‘bar’ of undefined

Slide 23

Slide 23

This Makes us Sad

Slide 24

Slide 24

Function with Object Method Call

Slide 25

Slide 25

Call Function with Object Where Property is Not a Method

Slide 26

Slide 26

TypeError: arg.baz is not a function

Slide 27

Slide 27

More Tears

Slide 28

Slide 28

What can we do about TypeError?

Slide 29

Slide 29

TypeScript to the Rescue!

Slide 30

Slide 30

Refactor with wild abandon

Slide 31

Slide 31

What’s a type?

Slide 32

Slide 32

Types are Shapes

Slide 33

Slide 33

Person Type

Slide 34

Slide 34

Can we just provide one property?

Slide 35

Slide 35

Nope, doesn't type-check.

Slide 36

Slide 36

Mismatched type for one property?

Slide 37

Slide 37

Doesn't type-check.

Slide 38

Slide 38

All properties present and correct type?

Slide 39

Slide 39

Type-checks!

Slide 40

Slide 40

Prevents you from trying to force a square peg in a round hole

Slide 41

Slide 41

How do we TypeScript in Ember?

Slide 42

Slide 42

ember-cli-typescript

Slide 43

Slide 43

build-time type checking

Slide 44

Slide 44

compilation to Javascript

Slide 45

Slide 45

type definitions

Slide 46

Slide 46

blueprints

Slide 47

Slide 47

How does it look like?

Slide 48

Slide 48

SuperRentals tutorial app

Slide 49

Slide 49

Javascript model vs. TypeScript model

Slide 50

Slide 50

Javascript service vs. TypeScript service

Slide 51

Slide 51

Template that invokes the RentalListing component

Slide 52

Slide 52

RentalListing component converted to TypeScript Glimmer component

Slide 53

Slide 53

Misspell model property

Slide 54

Slide 54

Type Error at build-time with info on how to fix

Slide 55

Slide 55

Back to original RentalListing component

Slide 56

Slide 56

Try to perform an invalid operation on a property

Slide 57

Slide 57

Type Error at build-time with explanation

Slide 58

Slide 58

Frequently Asked Questions

Slide 59

Slide 59

Do I have to convert everything at once?

Slide 60

Slide 60

Nope!

Slide 61

Slide 61

Where do I start?

Slide 62

Slide 62

models

Slide 63

Slide 63

services

Slide 64

Slide 64

shared components

Slide 65

Slide 65

But what about addons?

Slide 66

Slide 66

precompile to JS

Slide 67

Slide 67

include type definitions

Slide 68

Slide 68

TS benefits for everybody!

Slide 69

Slide 69

Pain Points

Slide 70

Slide 70

New syntax and concepts to learn

Slide 71

Slide 71

Type definitions for third-party addons

Slide 72

Slide 72

Definitely Typed @types/*

Slide 73

Slide 73

Type definitions for Ember and Ember Data

Slide 74

Slide 74

also Definitely Typed @types/ember @types/ember-data

Slide 75

Slide 76

Slide 76

Thank you!