At Torii we write in JavaScript, both on the server side (NodeJS) and on the client side (React). JavaScript has served us well, but as the codebase grew and many developers joined, we've started seeing that having more structure will help the team to become more efficient. That's why TypeScript came to mind.

Many of our developers were used to working with it at their previous jobs, myself included, so when I joined Torii, I felt like it could really help us improve our codebase and prevent bugs. So I decided that I was going to introduce it into our projects! But how do you do that when you already have millions of lines of code already written in JS???

First’s thing first, let’s talk a little about TypeScript and the motivation for using it.

What is it?

TypeScript is a strongly typed programming language that builds on JavaScript. It adds additional syntax to JavaScript to support a tighter integration with the IDE, to catch errors early in your editor, rather than during runtime (since JS is dynamic).

Why TypeScript?

• More robust
• It’s more predictable (since types don’t change during runtime, in contrast to JS where you don’t always know what you’re gonna get)
• It’s easier to find bugs (during compile time instead of during runtime)
• More readable and explicit
• Popular within the dev community and became an industry standard
  
  

Experimenting with the code on my own

So let’s go back to how we decided to introduce it into our codebase.

The guideline for starting to use TS in our projects was to start with the quickest and simplest transformations we could make.

Clearly, we can’t start full-time project, that would run for a year, to transform existing repositories, that would tie up time and major resources from our main tasks. So our approach was: “let’s start using TS tomorrow!” (not really tomorrow, but as soon as possible). It means that we are going to do the minimal work that has to be done so we can start using TS ASAP (alongside the existing JS files).

To support that plan, we had to find the right project to start with. So I found a repository which is relatively isolated; not dependent on other projects or database schemas which are commonly used, the perfect candidate. I added TS, set the required configuration and started transforming some of the files. The chosen project included many integrations with third party applications. I realized that many integrations were actually implementing the same methods…it looked like an interface to me! So I created some folders with common types and interfaces, and in a few days we had a new structure to allow every developer to write new code in TS, and transform JS code into TS easily.

Adding more people into the effort

The next stage was to start adding more people into the TS effort. But how do you do that when many of them never used it before and they are busy with their day to day tasks?

We decided to host a one-day-hackathon! it’s not really the classic type of a hackathon, but we wanted to make it a fun occasion where people will learn the new language, experiment with it, and most importantly: have fun (and pizza)!

The plan was that every developer will transform at least one integration module that day into TS.

From then on, every new file after that day will be written in TS, and on hackathon day the end goal was to try our best to transform as many files as possible all together. Other existing files will be transformed “lazily” on an ongoing basis, on the fly.

How we planned and prepared before the hackathon

We knew that if we want this day to work in the most efficient way, we must plan ahead. We asked all of the developers to watch and play with this very recommended resource - TypeScript Crash Course on YouTube, before the hackathon day:

The next thing I did is to create a 1-hour training where I explained about the motivation to switch to TypeScript and told the story of my work and the research I did before, along with the guidelines for the future.

I also thought it would be the most beneficial if I demonstrate a live coding demo of how to transform a JS file into TS. In the demo I demonstrate a lot of reverse engineering in order to analyze what the functions are supposed to return, and demonstrate what happens in the IDE when I make a mistake during my editions. It’s basically a live narrating of how to do it step by step.

Live demos can be stressful and may not work as planned so I recorded myself and my screen, and practiced the demo on a dry run with another developer. I also asked a teammate to be my crash test dummy and try transforming a file himself before I present it to the entire group. It helped to sharpen my message, and I was ready for the big day.

The hackathon day

The day has finally come and all the developers gathered at Torii (at the office and over zoom), after watching the TypeScript crash course video beforehand on their free time. We started the day with the training I made about how to use TypeScript at Torii with the live coding demo. We also created a list of tasks with all of the integrations that needed to be transformed and labeled them according their complexity level, that way people with no prior TS experience will have a proper place to start. We uploaded the video of the demo and published the list, so each developer will be able to assign themselves to a different task.

The last thing we did is to assign 3 mentors for the day (Ziv Erlichson, Shmuel Gutman, and myself) to make sure people won’t get stuck and always have someone to ask if they’re having any difficulties.

Everyone started working and we were amazed of how well it went! Nothing but clear sky and smooth transitioning! Not long after, we realized people are already taking a second task and even a third one! Some of them coded alone and some were practicing pair programming.

And we also had delicious pizzas, because it’s not really a hackathon without it!

All in all, at the end of day we gathered again to acknowledge everyones work and to wrap up the session: 32 PRs for 32 integrations were transformed by 18 developers. I spent the next few days reviewing them and was so happy to see the amazing work all of the developers did.

To sum up:

TypeScript is really cool and not too difficult to start with. The transition can be smooth, if you’re planning ahead and create a proper training. Make sure to dry run and have someone else to try it first! and lastly, you can also have lots of fun during the process!