TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup...

26
TypeScript International JavaScript Conference April 2018 @Srushtika | Ably Realtime | iJS | 2018

Transcript of TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup...

Page 1: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

TypeScriptInternational JavaScript Conference

April 2018

@Srushtika | Ably Realtime | iJS | 2018

Page 2: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Hi!I’m Srushtika

@Srushtika

[email protected]

Developer Advocate

Page 3: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

TypeScript

Why?@Srushtika | Ably Realtime | iJS | 2018

Page 4: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

JAVASCRIPTHipster much?

@Srushtika | Ably Realtime | iJS | 2018

Page 5: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

In a regular project cycle

Write new code Write new codeDocument Maintain

@Srushtika | Ably Realtime | iJS | 2018

Page 6: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

In a regular project cycle

Write new code Write new code

Document Maintain

@Srushtika | Ably Realtime | iJS | 2018

Page 7: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

TypeScript

What?@Srushtika | Ably Realtime | iJS | 2018

Page 8: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

@Srushtika | Ably Realtime | iJS | 2018

Page 9: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

@Srushtika | Ably Realtime | iJS | 2018

Page 10: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

TypeScript

How?@Srushtika | Ably Realtime | iJS | 2018

Page 11: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Types

@Srushtika | Ably Realtime | iJS | 2018

Page 12: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Interfaces

@Srushtika | Ably Realtime | iJS | 2018

Page 13: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Classes & OOP

@Srushtika | Ably Realtime | iJS | 2018

Page 14: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Migrating to TypeScript?

Here’s how we did it at Ably

@Srushtika | Ably Realtime | iJS | 2018

Page 15: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Understanding the problem

Realization

● Explosive growth in codebase

● Growth in the development team

● Long onboarding time

● Long and complex refactoring of existing code

Research

Flow vs TypeScript:

go.ably.io/typescript-vs-flow

Progressive Migration

● Setup TypeScript configuration

● Convert files that have most active development

● Use of a designated procedure to convert each file

@Srushtika | Ably Realtime | iJS | 2018

Page 16: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Migration Steps

@Srushtika | Ably Realtime | iJS | 2018

Page 17: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Refactoring and Documentation

@Srushtika | Ably Realtime | iJS | 2018

Page 18: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Tips & Tricks

@Srushtika | Ably Realtime | iJS | 2018

Page 19: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

noImplicityAny

@Srushtika | Ably Realtime | iJS | 2018

Page 20: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Object vs any

@Srushtika | Ably Realtime | iJS | 2018

Page 21: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Function overloading

@Srushtika | Ably Realtime | iJS | 2018

Page 22: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Function return types

@Srushtika | Ably Realtime | iJS | 2018

Page 23: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

const variables and types? Really?

@Srushtika | Ably Realtime | iJS | 2018

Page 24: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Interfaces with Classes

@Srushtika | Ably Realtime | iJS | 2018

Page 25: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

John Diamondhttps://github.com/jdmnd

Page 26: TypeScript · Flow vs TypeScript: go.ably.io/typescript-vs-flow Progressive Migration Setup TypeScript configuration Convert files that have most active development Use of a designated

Thankyou!

@Srushtika | Ably Realtime | iJS | 2018