Migrating large codebase to TypeScript

It's 2019 and TypeScript is the obvious choice for every new project. But if your codebase is JavaScript how do you make the switch?

Facing a quarter million lines of code – a messy mixture of untyped or poorly flow-typed JavaScript – our team of 15 at productboard absolutely knew we wanted to make the switch, but the barrier to entry looked very high.

A half a year later, 85% of the codebase is strictly typed TypeScript and our confidence over the code has increased tremendously.

In this talk I'd like to share our experience and answer the following questions:

- How we convinced management it was worth the effort?
- How we approached the migration and how we phase it?
- How we learned to best collaborate as a team?
- What we’d do differently next time?

We learned a lot along the way and are eager to share it with all the other teams, because we believe everyone deserves TypeScript!

Transcript

1. Migrating Large Frontend Codebase to TypeScript
2. Vojta Prikryl ! Prague, Czech Republic " Tech Lead in productboard @vojta_prikryl @productboard
3. "large frontend codebase"?
4. "large frontend codebase"? August 2018:
 250 000 LOCs 
 of JavaScript
5. 80% 
 Processes & Communication 20% 
 Technology
6. 1. History & Context 2. How we made the decision 3. Preparation 4. Initial migration phase 5. Gradual adoption over time 6. Takeaways & Do's & Don'ts Table of Contents
7. 1. History & Context
8. Brief history of productboard
9. Let's have typed JavaScript!
10. Let's have typed JavaScript! # # $ %& '( )
11. 2. How we made the decision
12. Is TypeScript better than Flowtype?
 Is TypeScript going to be better than Flowtype next year?
 Should we migrate now?
13. Is TypeScript better than Flowtype? • Can it solve our pain points?
14. Is TypeScript better than Flowtype? • Can it solve our pain points?
15. Is TypeScript better than Flowtype? • Can it solve our pain points?
16. Is TypeScript better than Flowtype? • Can it solve our pain points?
17. Is TypeScript better than Flowtype? • Can it solve our pain points? • Features
18. Is TypeScript better than Flowtype? • Can it solve our pain points? • Features • IDE support
19. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap
20. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap • Community activity • Github Issues / Pull requests / Contributors / Commits / ...
21. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap • Community activity • Github Issues / Pull requests / Contributors / Commits / ...
22. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap • Community activity • Github Issues / Pull requests / Contributors / Commits / ...
23. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap • Community activity • Github Issues / Pull requests / Contributors / Commits / ... • 3rd-party Type Definitions
24. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap • Community activity • Github Issues / Pull requests / Contributors / Commits / ... • 3rd-party Type Definitions
25. Is TypeScript going to be better than Flowtype next year? • Documentation & Project Roadmap • Community activity • Github Issues / Pull requests / Contributors / Commits / ... • 3rd-party Type Definitions
26. Should we migrate ?
27. Should we migrate ? now
28. Should we migrate ? now • It's not TS vs no-TS (or FlowType)
29. Should we migrate ? now • It's not TS vs no-TS (or FlowType) • It's TS vs 100 other ideas what to do
30. Should we migrate ? now • It's not TS vs no-TS (or FlowType) • It's TS vs 100 other ideas what to do • UUID migration, Design System, 
 CSS-in-JS, Optimized data fetching,
 State management improvements, 
 New Features Delivery, etc,...
31. Prioritization!
32. • What can help us scale as the organization? • What will help us the most with onboarding newcomers? Prioritization!
33. 3. Preparation
34. • Migration strategy Flowtype -> TypeScript • Gradual vs Total • Didn't want to have 3 technologies next to each other (untyped JS, Flowtyped JS / TS) • People stepping on each others fingers • Migration strategy untyped JS -> TypeScript • How many people to involve? • Decided to work in smaller group of senior engineers with experience with TypeScript in past
35. • tsconfig • TS / JS interoperability • Build pipeline • Babel 7 • Linters • global.d.ts • 3rd Party libs definitions • PoC with Core architectural concepts being typed • in our case State management, HoCs, compose • might be Router, API layer, controller ...
36. • Learn all features of TypeScript • Read through docs. More than once. • Decide how to use some core concepts: • Interface vs Type • Adoption is limited • Our case: • ✅ Enums • ❌ Flux Action Dispatcher
37. 4. Initial migration phase
38. Goals • , Replace Flowtype with TypeScript completely • ❌ Don't touch untyped JavaScript • - Write internal comprehensive guide • . Be as fast as possible
39. Migrate all the things!
40. /0123
44. Run TypeScript for the first time and ...
46. JS / TS 
 interoperability
 issues
47. JavaScript file: TypeScript file:
50. ... 3 weeks and 5 kilograms of 4 later ...
 5556
51. We survived. But had to explain. Why it took so long. After that we earned eternal glory7
52. 5. Gradual adoption over time
53. Goals • ⏭ Migrate all remaining untyped JavaScript to TypeScript • 9 Educate team so everybody can contribute and eventually spread the knowledge
55. Interface over implementation
56. Disable any
58. But don't forget to add a comment!
59. Tooling is your friend
62. Keep team motivated
64. Resolve all issues very quickly and precisely
65. Be prepared that people will approach you saying "TypeScript is broken!!"
66. Set up clear expectations
67. So how it went?
68. So how it went?
69. What went well? • Buy-in from both team and management • Created great atmosphere in the team. 
 I believe that really helped with the adoption.
70. Room for improvements? • Preparation • Get even more deeper into the technology. • Initial migration got delayed • Communicate better about changing situation
71. OUR CONFIDENCE IN THE CODE HAVE NEVER BEEN HIGHER
72. WE ARE HAPPY WE DID IT!
73. : Thanks! @vojta_prikryl @productboard www.productboard.com
74. Q&A @vojta_prikryl @productboard www.productboard.com