JSConf HI 2019
February 7 2019, Honolulu, HI , United States
JSConf HI 2019
Video
Adopting Typescript at Scale
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
27.42 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

About the talk

Brie Bunge talks about the process AirBnB went through to adopt TypeScript throughout their organization.

#abstract syntax tree #active server pages #adoption #airbnb #apollo #application programming interface #autocomplete #autopsy #barriers to entry #bassline #bat #batiste #bermuda #best practice #biological life cycle #bit #bulb #cascading style sheets #change management #chicken or the egg #clarinet #client (computing) #code review #compile time #compiler #configuration file #conversation #cough #cream #dependent type #disease #dress code #education #electric light #email #engineer #error #evidence #facebook #facetime #feedback #filename extension #friction #github #google #gravity #hybrid (biology) #ice #ice cream #information #javascript #jsconfhi #keychain #language #larix laricina #library (computing) #mana #map #missy elliott #mod (video gaming) #nola #npm (software) #open-source software #overtime #parameter (computer programming) #percentage #perimeter #pop-tarts #portland, oregon #property #regression analysis #regression testing #religious text #repurchase agreement #sauger #scenario #schema (psychology) #server (computing) #shape #signal hill, california #single source of truth #skype #software bug #software engineering #software release life cycle #soul #source code #source lines of code #stack overflow #status quo #string (computer science) #style guide #subroutine #switch #syntax #tail #take-out #tart #technology #temperature #thai script #thailand #tool #tractor #trade-off #tree #truth #type safety #type system #typescript #typographical error #wav #wealth #wii More (114)

Share

Aloha, my name is Bree and I work at Airbnb big changes that big organizations is hard. There's a lot of people to convince and a lot of 00:06 code to migrate. I'd like to share with you how we brought typescript to Airbnb. I appreciate you all being here with me. I know you could be out at 00:16 the beach with your snazzy new tell but I hope there's something in here for everyone whether you're navigating a big change at your company in this 00:24 could be used as a sort of case study whether you're actively migrating to typescript now and there are tools and techniques that we'll talk about 00:30

that can help or if you've heard of it about typescript and want to learn more Purple cover what typescript is what we mean by at scale 00:37 the process of proposing typescript at this scale. Addressing questions and concerns along the way in response to the proposal how he gradually 00:46 adopted typescript and migration strategies that were using to move from JavaScript to typescript. Buy quick show of hands how many people have use 00:56 typescript before so that everybody's on the same page suppose we had 01:05

this greater function. It takes a name and returns. Hello that name. So we passed in jazz concert with say hello, Jess, cough, how friendly Here's 01:15 what that code would look like in typescript notice that it's quite similar to the only difference is that we've annotated the perimeter with what 01:24 type it is. So we use this function in our temperature project and we passed a string everything compiles fine. But if we passed something 01:30 that's not a string in this case an array of strings typescript will give us an error that a string array is not assignable to perimeter of kite 01:40

string. We didn't have to refresh the page click through our flow look at the error in our Consul and traced back through where they are happened. We 01:47 got this air immediately interested her right after we typed it. We can express the type of other objects as well. This interface describe the shape 01:55 of a person object that has a first name and last name and you can describe types for more complicated contracts. Text cannoli comes with a compiler 02:04 that can tell you when something has gone wrong. It also has a language server that editors can hook into for things like auto-completion find usages 02:13

for factoring and more in this example. We've hooked up the type for our with Styles react higher-order component. So we get autocomplete for the 02:22 hundreds of CSS properties that accept including in my documentation amazing. I didn't have to flip back and forth to the docks pages. I got all of 02:30 this in my editor with with pipes throughout our code we can do more as it's being offered this just scratches the surface of what type of group is 02:37 capable of what gives you a sense of a kind of error that can help catch in the tooling it enables. So that's the good part. What about the 02:47

upscale part? So is it is there a problem? Oh-oh FaceTime Scripps. I'm not actually 02:56 making all this up. If you did typo a variable that would give you that look like that are actually real thing. So let's fix that. 03:06 The scale changes the conversation. I've been on small teams before where it was. Just Haley's typescript. Yeah, sounds cool. Let's use it. But as you 03:16 still up to hundreds of Engineers and more and more code that conversation changes we would have changed that we were proposing is using typescript in 03:25

our main repo. The one that powers airbnb.com and making it a primary language for front end development more people are affected by the change in 03:34 more code would have to be migrated. Let's quantify what we mean by at scale are maybe we have lots of JavaScript. There's over two million lines of 03:42 JavaScript check into Army repo and over a hundred internal npm packages. These are separate repost it be packaged up to an internal and Tamarack 03:50 Street that we can share across repost. That's a lot of code. You still got some back on in there talk about the history of JavaScript. We got some 03:58

history over the airbnb's decade. So we we also have lots of Engineers interacting with this code. They're over 1,300 at the company 200 of which are 04:05 fronting. The majority of these foreign Engineers contribute to that made Mana refill. Those numbers paint a picture of the environment in which we 04:15 are proposing typescript. And what did it what did it look like at that scale? Every month we have a fun meeting where all the front and Engineers 04:24 around the company get together and we can kick out about new front-end Technologies and patterns for things. We want to consider in more depth. We 04:33

draft proposals that outlined things like benefits trade-offs alternative considered exit strategy and long-term owners people weigh in on the pros 04:39 and cons of these proposals and we decide as a group whether it makes sense to move forward this to make deliberate decisions about what we commit to 04:48 as a broader team in avoid hopping on the hype-train without legitimate technical justification. We've been exploring typescript that Airbnb since 04:55 2016 on smaller teams and instead of type system was a top request from a 2017 front end survey given this positive Signal Hill and I 05:04

stuck around there. We Droppin a proposal for typescript and presented it to the front and working group The Proposal detailed why 05:12 typescript made sense at Airbnb. Let's highlight some of the main reasons. Everything is mission is to make it so anyone can belong anywhere. Every 05:22 issue user encounters with our product gets in the way of that mission. The same is true of the products. You all are working on typescript helps 05:31 prevent bugs which in turn helps our end users. Play script also enables the wealth of developer productivity benefits and cooling like editor 05:38

auto-completion and refracting like we saw earlier with typescript Engineers can move faster more safely. We're investing in gravity. Well and Apollo 05:47 Airbnb which lets us generate typescript types from our graphql schema. This means that we can get into inside type safety because the type used by 05:56 the back end in the front and share a single source of Truth in engineer can make it change the API without unknowingly breaking clients in front and 06:05 Engineers can be confident about what state will be coming back from the server shoes have been a major source of bugs for us. So this end and type 06:13

safety was a major selling point. Sounds great. Right, but there were lots of questions and concerns in response to our initial 06:21 proposal. Let's look at a few of them in more depth. Armada repo depends on her internal npm packages. 06:31 Do we need to convert those to typescript First in order to get autocomplete and type checking. So this is a predicament. We have we have our ties for 06:41 project that depends on age S and P M package. How do we get types for that package? It would seem like the package needs to be converted to 06:49

typescript first, but that's problematic cuz we be blocked on the maintainer converting it and maybe they're reluctant to do so cuz if the early 06:56 phases of our proposal it wasn't sure we were going to move forward with it. But on the flip side in order for developers have a good experience with 07:03 typescript we needed that type safety. So how do we get around this evening chicken-and-egg problem? Play script has a feature called declaration 07:10 files files with a d. T s extension which we can do find types for JavaScript files. Let's look at an example. So we have the greater function that we 07:19

saw earlier and the corresponding D. ES file on the top there. No implementation details here. It only describes what the types are. Play script 07:28 stitches together such that the Declaration file is used at compile time. And the original JavaScript is used at front. I'm so let's go back to our 07:37 original scenario and see how declaration files can help. Sure, if that project had been converted to Thai script. We couldn't generate a d. ES file 07:45 as part of the typescript build, but we were considering that that wasn't an option. Instead we could put the Declaration file in our typescript 07:55

project. Another choice is that we can create a separate and fan package and put the Declaration files there. This is nice because now we can share 08:03 the Declaration files across several repos. And this is how types for things like react work. You have a human soul reacts and you can install a tight 08:11 react package. The types of react along with those four or five thousand other packages living definitely text a community maintains repository 08:20 the vast majority of public dependencies. We had an army repo we're already typed in definitely types of community around typescript was a major 08:29

selling point and we contribute back. I'm sure there's people around this room has that have contributed back. Thank you. Definitely type works great 08:36 for public npm packages, but what about the internal ones? We married this definitely type set up internally by creating a separate 08:45 empty amscope. So instead of installing from types. You can sell from Airbnb types and the repo I set up similar to how definitely typed it so we 08:55 could advertise there and publish these types internally. And we open source that starter kit. If you are interested in setting up this or 09:02

thing. It doesn't have any types in it. It's more just the setup for how you can add test and publish your own types. How many bugs can typescript 09:12 help prevent? A recent study to type or not to type show that 15% of bugs in a selection of GitHub repos were preventable with typescript. 09:21 Internally, we have a process for documenting. It's in instead of current production. This is a blameless process. The point is so that we can learn 09:32 from our mistakes so we don't repeat them in the future. So I literally sat down and read through six months worth of post mortems super fun reading 09:40

right to my favorites like tail of the uncut typeerror the Peril of the permuda parameters. Okay, maybe they have such exciting name 09:48 in any case or not. Let's look at example script with a belt. 09:58 We made a change to our shared input component that broke a form on a settings page users were unable to submit the form because it no longer passed 10:09 validation. Here, is there a simplified version of that Sheridan can input component before the change. It takes an unblur prop and passes it straight 10:16

through to the input element a change was made to add a new unblur Handler. But there was a subtle but can you 10:26 spot it? The event parameter was no longer being passed to the unblur prop. This caused an issue 10:35 several hops away in a different repo. The input component was being consumed as part of a Redux form which expects an event or value to be passed in 10:45 order for validation to work properly without the event the phone no longer pass validation, which meant to submit button was always disabled. How 10:53

could typescript help is here? The pipes for redux-form capture the constraint we saw in the docks the underwear prop must be passing event or value. 11:03 So if we have been using typescript with Redux form types hooked up we would have seen an error at the call site where the event wasn't being passed. 11:14 Another common class of issues involved strict no checks where you use a property to structure or try to invoke something. That could be Nola run to 11:24 find you probably seen that one before. Another was type mismatches typescript tells us when we try to use types that are not assignable to one 11:31

another. And I hope you have a better sense of the common kinds of post-mortem bugs typescript can help prevent. What's the overall percentage? 11:39 38% we found that 38% of incident causing bugs that reach production bugs that have real effects on our users and bottom line could have been 11:50 prevented with typescript. This is fighting for us. It helped make the impact real we sell light bulbs go off as we replicated some of the incidents 12:00 and show people the arrow tips group would have given so we could have written test to catch these things but static by checking as an extra layer of 12:07

protection you access to a similar history at your company could be worth taking a look with someone who knows ice cream to see what this percentage 12:15 looks like for you. Do teens want to switch to typescript? We piloted typescript on several teams 12:23 specifically targeting teams that haven't use typescript before to gain additional perspectives. We help them get set up and gather feedback along the 12:32 way. After using it for a while, we sent a survey to them asking whether we should continue investing in typescript and the feedback is overwhelmingly 12:39

positive. We'd recommend using the sort of trial. For testing out a new technology your pattern the front and working group was on board with it 12:47 because it was self-contained. It was easy to roll back. Should we not move forward with it and it helped the proposal because we could gauge whether 12:55 teams actually like using typescript. There were concerns around Bill times. We measured it and found no significant impact we have over 13:02 500 is split rules enabled in our main repo with a typescript PS1 Purser. You were happy to discover that most of them just worked. If we were to ever 13:11

move away from typescript in the future, we could strip off the types and end up with roughly the same job scripture would have written. Otherwise the 13:20 one by one we documented considered followed up and came up with solutions to the questions and concerns raised is important to us to work with two 13:27 tractors in here out their concerns. We can Brew too many of them to advocates in the end and our proposal became stronger from their feedback. 13:35 Acrofit sufficiently addressing concerns. We surveyed all front-end Engineers on whether we should adopt I script. Given the positive response we have 13:44

enough evidence to move forward in the proposal was approved. From there. We gradually expanded 13:54 adoption. At this point we have completed the pilot face that was valuable for proving out typescript and getting the foundation in place. We are 14:04 ironed up fortunes early and improved tooling and documentation. So later teams would have a smoother on ramp. We have ongoing contact with the 14:12 typescript team and help surface issues, like prioritizing better handling as default props is one example this phase also grew our internal 14:19

typescript Community. Most people at Airbnb don't know Thai script yet. So this map more people could help and answer questions. Next we moved into a 14:26 beta status and seems good off into using it to help are more teams recreated Internal Documentation and a style guide and hosted learning sessions. 14:34 We set up a slack Channel and internal stack Overflow tag a Google email group of GitHub group people could use on their PRS wanted to make sure 14:44 people could get the help they needed. The final step is graduating typescript to General availability meaning of stable and everyone should start 14:51

using it. We're actively approaching this at the moment remaining steps are solidifying Saugeye documentation, wrapping up internal education efforts 15:00 and migrating more code. We're about 50% of teens using typescript and 10% of the files in arm on a repo have been converted so far. Using this 15:08 gradual approach made for smoother adoption. If we said from day one that everybody should start using typescript person after person would run into 15:18 the same issues or had the same questions instead. We can figure things out on a smaller scale and carry forward and those answers would carry forward 15:25

as we expanded our we've been exploring a couple options for migrating are code to typescript. 15:34 original migration strategy with a JavaScript typescript hybrid Let's see how this strategy works in the context of arm on a repo. This is a 15:43 simplified version that I came up with by literally going to airbnb.com and giving reasonable names to the things I saw so no company Secrets here. 15:53 What's the rent on a homeless project and see what it would look like to convert it using the hybrid strategy? We had a typescript config file and 16:01

rename individual files from jasta TS or jsx to TSX. typescript errors pop up And we proceeded to fix them. 16:10 An awesome feature of typescript is that not all code has to be converted before it can compile and run be allowed to ask configuration option allows 16:20 JavaScript and texture files to live side-by-side. So at this point we can check in what we have so far in the sight still works. You don't have to 16:28 pause development migrate the whole project and then my and then do that first we can migrate instead file by file. We repeat 16:37

this process over time until the whole project is migrated. On the topic of migration. I want to take a brief moment and share some tips. We found 16:47 helpful. The first is TS fix me we had in a global type Alias for typescript any type which means something could be anything. We called it to us. 16:55 Fix me to indicate that it should be Revisited and fixed up later on best practices to avoid any because it was a Skype safety, but it can be helpful 17:05 during the migration process. Batiste ignore comments silences the air on the following line probably typing a file might involve unraveling 17:13

some deep chain of dependent types. We try to avoid this by like converting wav files first, but sometimes it's inevitable. So TS fix me and see 17:23 signor can help split things up such that incremental work can be checked in. These are intended to be temporary and we're planning on adding type 17:31 coverage tooling to help remove them as we are fine the types of overtime. Andrea Sachs we use proptypes on a react components for run time type 17:38 checking when converting a GSX completed TSX. We can either remove the prop types in favor of a typescript type or keep it pop tarts and add an extra 17:48

type in addition example, we wanted to keep proptypes so that JavaScript consumers can still get run time checks, but to avoid the clarinet 17:57 second type that would need to be kept in sync with those proptypes. We created a props type utility that is able to drive the typescript type given 18:07 the proptypes and the default props. In this case the proptypes and default routes get combined into this final type. If you're curious how this works 18:15 under the hood. I created it just that you can check out. Recently, we've been experimenting with a revised all in 18:24

typescript migration strategy. So let's go back to that, this project we were looking at before and use the all-in strategy instead to see how it 18:34 works. We start off with all JS week and everything over to TS get the project filing perhaps we have some looser types, then we'd like but we still 18:43 have typescript strictest options turn on and then we proceed to refine the types overtime removing the TSX mise-en-place ignores. 18:53 Does have some advantages over the hybrid strategy, it's easier to refine side by sides rather than file by file if you're developing a feature and 19:02

you only care about anyone type. It's a much lower barrier to entry to just fix the bat type in isolation rather than having to convert the whole file 19:10 first fix of all the errors and then as a Titan care about Not having to rename the file also means that it's easier to review sometimes if a file is 19:18 renamed in one command and changes are made and another they show up separately and code review and the reviewer has to piece together. What happened? 19:26 It also makes it clear what types of missing Thai scripts inference is powerful and we can leverage it for large portions of a file from files require 19:34

a few to notice. Fix me in order in order to compile typescript can figure out the rest. Another is that developers can use a 19:41 consistent mental model. They don't have to contact switch depending on what file extension there in like why can't I add a type here? Why am I not 19:51 getting compilations are there pets can be added consumed and I checked in all files. Yeah, that sounds great. But how do we migrate 19:58 all the code? Code mods are a powerful tool for large-scale code modifications in their simplest form could be a global find and replace 20:08

across a project you might have done this in your editor before and there are coupons Library strike X's, but they are brittle cuz they might freak 20:18 depending on subtle code style variations. Alternatively we can use an abstract syntax tree, which is something that the speakers are earlier brought 20:27 up to. So this is the AST representation of this code. Notice how for every piece of gold on the left it has a 20:34 corresponding node in the tree on the right. So just for fun say we wanted to write a code mom that reverses all the identifiers in our code 20:44

would start with her code as the input. Create an AST out of it modify that AST and admit new source code 20:54 out. The power here is that we are making this change programmatically the alternative would be editing each file to make the change in this works 21:03 fine. If you only have a handful, but once it gets to be more like a thousand files the thought of manually changing them gets really sad. Facebook's 21:13 dress code shift is a popular tool. We use for code mines at Airbnb this transform captures the modifications. We just made that AST to reverse the 21:22

identifiers. We find all notes that correspond to identifiers. Replace those notes with new ones with the name reversed. 21:30 And then return the new source code back out. Missy Elliott would be proud of us sweet flip it and reverse it. 21:42 I got lots of great. Pick up a code and Wii modded it can be identified 21:54 as flipping remember that stump is your all yet? 22:04 A tool that can I help you with your rap skills, but can help you with your coat in my is ASP explorer. Net it would Sean pointed out earlier. It has 22:16

a source code to transform in the output and an interactive St. All in one place. Also, I just landed the definitely try. At types for Jets coach if 22:25 that makes it easier to offer code mods in typescript. Several patterns emerge while migrating JavaScript code to typescript. We repeatedly 22:35 move static class properties in the class body for react components of the props type annotated react lifecycle methods in Co diseases code mind 22:45 so that we can run them repeatedly over more code and we package them up in the tool called CS migrate. The goal is to send a JavaScript project in 22:55

and get to Highland High School project out. You still need to refine the types of overtime, but it gives you a baseline to work from We apply this 23:03 tool to our internal share react components Library, which is used everywhere across the site. We had types for this in our internal definitely type 23:13 but it was hard to keep those up-to-date with the rapid development of the library. So instead we wanted to admit types directly from the source. So 23:23 it was our first Target 40s migrate. We converted over 30,000 lines of code to typescript and instead of devoting. The whole team's time for weeks to 23:33

do this. We could run our suite of code mods into it in minutes. We use the type information from proptypes to make you so scarce fix me and we are 23:42 continuing to refine from this bassline. But even with this we generated meaningful typescript declaration files, we can consume in other repos. In 23:49 case a Pure Line count looks a bit scary with the typescript compiler HAPO for visual regression testing and are just test running a c i I felt 23:59 confident that my changes wouldn't break anything. And of course we made sure the site was still working. No regressions. Wilson's friends gets 24:07

migrate in other places and Ritter rating on it and we're planning on using it across more and more code. We plan to open source it so that you can 24:16 use it to migrate your code to thank you for following along this journey with me. I'd like to leave you with some key takeaways that we can draw from 24:24 this typescript transition that apply more generally. Effecting change at a large organization can be a challenge but strong evidence and addressing 24:34 questions and concerns make a compelling case. Adopting change gradually helps reduce friction and prove out the value. A 24:43

clear migration path helps teams move over to new patterns in tooling can help expedite the transition. I started this work while on a part of Team 24:52 feeling dissatisfied with my tools when I learned that there were others in the company who also wanted to make this change. I partnered with them and 25:01 carried the initiative forward. So easy to complain about things except the status quo positive change can come about through the actions of people 25:09 who care. So I'd encourage you to pursue the things that you are passionate about your organization to make life better for you and those around you 25:17

Thank you all for listening and thank you to everyone at Airbnb who contributed to this effort. Shut up Joe and mostly during the audience in miles in 25:25 Portland. And there are a bunch of other awesome. Airbnb Engineers. Would love to talk to you. I also have some types of stickers and some bailo 25:32 keychains for the first 30 people that come find me, so it doesn't incentive. Thank you so much. 25:42

Cackle comments for the website

Buy this talk

Access to the talk «Adopting Typescript at Scale»
Available
In cart
Free
Free
Free
Free
Free
Free

Video

Get access to all videos “JSConf HI 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Similar talks

Thais Correia
Software Engineer at Facebook
Available
In cart
Free
Free
Free
Free
Free
Free
Trish Ang
Front End Engineer at Slack
Available
In cart
Free
Free
Free
Free
Free
Free
Kevin Ball
Engineering at Humu
Willian Martins
JavaScript Formatter at Netflix
Shawn Wang
Account Executive at CircleCI
Lin Clark
Prinicipal Research Engineer at Mozilla
Till Schneidereit
Senior Research Engineering Manager, Developer Technologies at Mozilla
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk 'Adopting Typescript at Scale'
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
439 conferences
17532 speakers
6299 hours of content