@JGFERREIRO
@JGFERREIRO #REACTDESIGNERS
How many of you have
used TypeScript?
Slide 3
Slide 3 text
@JGFERREIRO
Frontend @Eventbrite
Studio team
Jorge Ferreiro
Hi there! I’m
Slide 4
Slide 4 text
@JGFERREIRO
@JGFERREIRO www.ferreiro.me
Index
1. Why TypeScript?
2. How did we adopt it?
3. After 3 months
4. What’s next?
Slide 5
Slide 5 text
@JGFERREIRO
@JGFERREIRO www.ferreiro.me
Slide 6
Slide 6 text
@JGFERREIRO
@JGFERREIRO www.ferreiro.me
Slide 7
Slide 7 text
@JGFERREIRO
@JGFERREIRO
Why did we adopt
TypeScript?
1.
Slide 8
Slide 8 text
@JGFERREIRO www.ferreiro.me
Some paint points-goals
Self-document contract with
Backend APIs
Guarantee same types on
multiple team’s apps
Document better our React props
and our state types
Slide 9
Slide 9 text
@JGFERREIRO
Bonus
Try new technologies out.
Eventbrite internal tooling was
really well set up for TypeScript
with some apps already in TS
Slide 10
Slide 10 text
@JGFERREIRO
@JGFERREIRO
How did we adopt
TypeScript?
2.
@JGFERREIRO
We needed to build two new
internal apps. So we gave an
opportunity to TypeScript
Experimentation
Slide 14
Slide 14 text
@JGFERREIRO
Bunch of tutorials, and most
importantly, checking other apps
inside Eventbrite and #TypeScript
channel
Bonus: Useful help from Frontend
Infra team!
Learning by doing
Slide 15
Slide 15 text
We documented the team
connections for writing
TypeScript.
Example: Studio-build app
Team conventions
Slide 16
Slide 16 text
@JGFERREIRO
We kept evolving the types as the
backend changed or when we
added new abstractions.
Code duplication on purpose. Now
we’ve stable types, and we’re
consolidating types in several apps
Iterating over the types
Slide 17
Slide 17 text
@JGFERREIRO
@JGFERREIRO
After 3 months
3.
Slide 18
Slide 18 text
@JGFERREIRo
Some TypeScript pros
Contract with the backend is now documented!
Easy to onboard new engineers
High visibility and easy to reason about your
app’s datatypes
Amazing dev experience with VS Code
Low learning curve
Slide 19
Slide 19 text
@JGFERREIRo
Some TypeScript cons
No runtime typechecking
Some libs don't have exported types
Example: Our design system
Slide 20
Slide 20 text
@JGFERREIRO
@JGFERREIRO
What’s next?
4.
Slide 21
Slide 21 text
@JGFERREIRO
Studio-types + studio-utils
Created shared utils and types
libraries to consolidate types
and logic across several apps
Shared team types and utils
libraries!
Slide 22
Slide 22 text
@JGFERREIRO
Could we migrate
other team’s projects
into TypeScript too?
Apps migration
Slide 23
Slide 23 text
@JGFERREIRO
@JGFERREIRO
Action plan!
5.
Slide 24
Slide 24 text
@JGFERREIRO
@JGFERREIRO www.ferreiro.me
1. Join #typescript channel
2. Youtube tutorial
3. Create a hello world TypeScript
project/
Next steps if you wanna try!