2022: The Road to TypeScript

What does the road to official TypeScript support for Ember look like? What does it include, and what does it exclude, and why? Why has it taken this long? What does the future hold? What have we done which is distinctive from other frameworks? What are some of the possibilities for collaboration across the front-end ecosystem in this space going forward?

Transcript

1. The Road to TypeScript Chris Krycho, April 2022
2. What we’ll cover • How we got here • Where we are today • Where we’re going in the future
3. Who is this talk for? • Ember developers using— • TypeScript • JavaScript • Non-Ember developers using— • TypeScript • JavaScript
4. How we got here 2011 – 2021 The before times • 2011: Ember.js released • 2012: TypeScript released • 2015: • TypeScript adds support for JSX/TSX • Ember starts using TS internally for Glimmer VM Early days of TS in Ember • 2016: TypeScript features unblock JS • 2017: @types for Ember and ember-cli-typescript • 2018–19: steady improvements in Ember types Recent developments • 2019–21: LinkedIn researches SemVer for TS types • 2020–21: Salsify develops Glint for type checked Glimmer templates • 2021–22: official Ember TypeScript support RFCs
5. Official Ember TypeScript support RFCs • 0724: Official TypeScript Support • 0730: Semantic Versioning for TS Types • 0748: Glimmer Component Signature • 0776: TypeScript Blueprints • 0779: First-Class Component Templates • 0785: New TS-friendly Test Helpers • 0800: TypeScript Adoption Plan • TBD: Documentation updates! Where We Are Today
6. Where We Are Today Philosophy— • 0724: Official TypeScript Support • 0730: Semantic Versioning for TS Types The Plan— 0800: TypeScript Adoption Plan Writing Code— • 0779: First-Class Component Templates • 0748: Glimmer Component Signature • 0776: TypeScript Blueprints • 0785: New TS-friendly Test Helpers TODO— TBD: Documentation updates! Official Ember TypeScript support RFCs
7. RFC 0724 Official TypeScript Support Goal: Official TypeScript adoption is a positive-sum outcome for all Ember users. How? • We will never require TypeScript • TypeScript investment improves JavaScript users’ experience • We maintain our stability guarantees by investing in specs and tooling • Ship types natively, not from @types Where We Are Today → Philosophy
8. RFC 0730 Semantic Versioning for TypeScript Types A very, very deep dive into TypeScript’s semantics (variance with mutable type-level variables is… hard). The TL;DR summary— • Pick and publish: • Support policies • Supported TS versions • Test your types against all supported TS versions • “Be generous in what you accept and conservative in what you provide”—formalized! Where We Are Today → Philosophy
9. Support policies Every README.md should specify the policy used and define the package’s public types. These are your contract with your users. Simple majors • Dropping a previously- supported TypeScript version is a breaking change. • Adding new versions is fine. Requiring your users to update to that version is a breaking change. • Matches the way most libraries treat dropping support for Node versions, or for framework versions. Rolling support windows • Dropping a previously- supported may not be a breaking change. • LTS releases must have overlapping supported TS versions • Supports “laddering up”: • upgrade to latest TS supported by previous • then upgrade package • Matches the way some foundational packages (such as ember-source) treat Node and browser version support. Where We Are Today → Philosophy → RFC 0730
10. Example: 
 simple majors ember-modifier v3.2 Where We Are Today → Philosophy → RFC 0730
11. Example: 
 rolling support windows A hypothetical upgrade path for ember-source. • Ember LTS: ~biannual • TS version: ~quarterly Where We Are Today → Philosophy → RFC 0730 Ember version Supported TS versions 4.8 (LTS) 4.6, 4.7 4.9 4.6, 4.7 4.10 4.6, 4.7, 4.9 4.11 4.6, 4.7, 4.9 4.12 (LTS) 4.6, 4.7, 4.9, 5.0 4.13 4.6, 4.7, 4.9, 5.0 4.14 4.6, 4.7, 4.9, 5.0, 5.1 4.15 4.6, 4.7, 4.9, 5.0, 5.1 4.16 (LTS) 4.9, 5.0, 5.1, 5.2
12. “Be generous in what you accept and conservative in what you provide”— Intuitively: 
 “No new red squiggles” in a minor release. Formally: 
 The devil is in the details. Where We Are Today → Philosophy → RFC 0730
13. Ember/TypeScript RFCs ✅ Philosophy— • 0724: Official TypeScript Support • 0730: Semantic Versioning for TS Types The Plan— 0800: TypeScript Adoption Plan Writing Code— • 0779: First-Class Component Templates • 0748: Glimmer Component Signature • 0776: TypeScript Blueprints • 0785: New TS-friendly Test Helpers TODO— #TBD: Documentation updates! Where We Are Today
14. RFC 0800 TypeScript Adoption Plan • Concrete SemVer commitments • Supported TS versions • “breaking changes” policy • Edition support policy • Migrating from @types to native packages (ember-source etc.) • Tooling updates • testing (don’t break!) • publishing (release channels) • Communication updates • RFC templates • Ember release blog posts • Documentation needs Where We Are Today → The Plan
15. Ember/TypeScript RFCs ✅ ✅ Philosophy— • 0724: Official TypeScript Support • 0730: Semantic Versioning for TS Types The Plan— 0800: TypeScript Adoption Plan Writing Code— • 0779: First-Class Component Templates • 0748: Glimmer Component Signature • 0776: TypeScript Blueprints • 0785: New TS-friendly Test Helpers TODO— #TBD: Documentation Updates Where We Are Today
16. RFC 0779 First-Class Component Templates Make component templates a first-class peer to JavaScript and TypeScript. Use them side- by-side—with a different set of tradeoffs than with JSX/TSX. Where We Are Today → Writing Code
17. Neither HTML-first nor JavaScript-first— Make them peers. 1. Benefits of dedicated template languages—declarative, proper HTML support, etc. 2. Benefits of local JavaScript— modules, scoping, refactoring, composition, etc. Where We Are Today → Writing Code → RFC 0779
18. The win: Glint can just use TypeScript Where We Are Today → Writing Code → RFC 0779
19. RFC 0785 New TypeScript-Friendly 
 Test Helpers Goals: • Simplify for TypeScript authors… and everyone else • Make rendering work the same way in tests and app Where We Are Today → Writing Code
20. Use tracked state! 1. No more this.set() or this.get() in tests. 2. Wait for rerender() after updating. Where We Are Today → Writing Code → RFC 0785
21. RFC 0776 TypeScript Blueprints Goals: • Always up-to-date blueprints • Single source of truth • Make it “just work” for any Ember addon and its consumers How? Start with TypeScript and generate JavaScript. (This is annoyingly difficult. 
 But not impossible!) Where We Are Today → Writing Code
22. RFC 0776 Use generators like normal… but with a new --typescript option! Where We Are Today → Writing Code → RFC 0776
23. RFC 0748 Glimmer Component Signature Type • Fully represent a component • arguments • element for ...attributes • blocks • Support both docs and Glint • Provide a foundation for other, similar types in the ecosystem • modifiers • helpers Where We Are Today → Writing Code
24. Using a Signature Where We Are Today → Writing Code → RFC 0748
25. Using a Signature Where We Are Today → Writing Code → RFC 0748
26. Using a Signature Where We Are Today → Writing Code → RFC 0748 : args
27. Where We Are Today → Writing Code → RFC 0748 Using a Signature: element
28. Where We Are Today → Writing Code → RFC 0748 Using a Signature: blocks
29. Ember/TypeScript RFCs ✅ Philosophy— • 0724: Official TypeScript Support • 0730: Semantic Versioning for TS Types The Plan— 0800: TypeScript Adoption Plan Writing Code— • 0779: First-Class Component Templates • 0748: Glimmer Component Signature • 0776: TypeScript Blueprints • 0785: New TS-friendly Test Helpers TODO— #TBD: Documentation Updates ✅ ✅ Where We Are Today
30. RFC #TBD Documentation Updates Goals: • Make TypeScript a first-class peer to JavaScript— • in the guides • in the API docs • Coordinate with the rest of the Polaris teaching story How? Come help us design it! 
 (We’ll mentor and support you!) Where We Are Today → TODO
31. Ember/TypeScript RFCs ✅ Philosophy— • 0724: Official TypeScript Support • 0730: Semantic Versioning for TS Types The Plan— 0800: TypeScript Adoption Plan Writing Code— • 0779: First-Class Component Templates • 0748: Glimmer Component Signature • 0776: TypeScript Blueprints • 0785: New TS-friendly Test Helpers TODO— 0???: Documentation updates! ✅ ✅ Where We Are Today ✅
32. Where to next? 1. Finish what we started. Ship great TypeScript support with Polaris. 2. Collaborate across the TypeScript ecosystem with other adopters of these ideas. (Reach out!)
33. A vision of the future— Where to next?
34. Thank you!