typescript · flow vs typescript: go.ably.io/typescript-vs-flow progressive migration setup...
TRANSCRIPT
![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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/1.jpg)
TypeScriptInternational JavaScript Conference
April 2018
@Srushtika | Ably Realtime | iJS | 2018
![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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/8.jpg)
@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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/9.jpg)
@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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042515/5f3993b387cddb4e80323eb7/html5/thumbnails/26.jpg)
Thankyou!
@Srushtika | Ably Realtime | iJS | 2018