TypeScript and React for Scalability

An interview with Gabriele Petronella

2 + 2 = 5. No, it's not a quote by George Orwell, but it's the powerful result you'll get when using TypeScript and React together.

We took the chance to interview Gabriele Petronella, who recently joined our roster of trainers and experts, and get behind the scenes of his workshop.

Time to talk about the good old code again! And, as usual, the human factor is always very much involved.

Curious? Read on!

Avanscoperta: Hello Gabriele! Please introduce yourself to our readers.

Gabriele: Hi! I’m Gabriele, a software engineer, and about 10 years ago, I co-founded buildo, a boutique consulting company in Milan.

Avanscoperta: When did you first get interested in coding?

Gabriele: I would say when I was in high school, even though I didn’t learn to code until my first year of university when I took a C course.
I then got interested in iPhone OS apps (yep, it wasn’t called iOS at the time), learned Objective-C, and used it for many years before moving on to something else. Good times! :)

Avanscoperta: How did you start getting involved in writing code in React?

Gabriele: When we founded buildo, we immediately had a big project to work on, which involved a fairly complex web client, very data intensive. We developed the first version in Angular.js, but we quickly hit performance issues; we ultimately concluded that the 2-way data binding architecture of Angular.js was at the root of these issues and started to look for alternative solutions.

React.js was just getting popular (we’re talking version 0.12 if I remember correctly), and it looked pretty promising, so we jumped on board and never looked back since!

Avanscoperta: The same question as above, but let’s focus on TypeScript.

Gabriele: Fast forward a few years, and now we have multiple JavaScript projects ranging from a few ~10ks to a few ~100ks lines of code. This was when we started noticing we were getting slowed down by the dynamic nature of JavaScript and the lack of type-safety. Some refactors would take a long time to do correctly, and developers were constantly jumping back and forth between the editor and browser to check everything worked. We felt we could do better.

At the same time, our backends were (and still are) primarily written in Scala, a language with a very sophisticated type system, so it was natural for us to start looking for more type-safety for our front-end applications.
We initially landed on Flow, which looked very cool and, at the time, had a much more powerful type system. Unfortunately, the open-source version of Flow was barely maintained by Facebook, and the bugs started to pile up; that’s when TypeScript started to get much better - probably pushed by Flow itself - so we made the switch, and we’ve been very happy with it since.

Avanscoperta: When did you discover that TypeScript and React work so well together?

Gabriele: They initially didn’t! When we started using TypeScript in our React projects, React still used classes for its components. Classes don’t play too well with static types since there’s a lot of implicit stuff going on, and we had to cast explicitly in many spots.

Readers who were using React back then may remember stuff like HOC, defaultProps, this.setState, and so on. Those were all extremely cumbersome to type accurately, and the ergonomics were quite bad.

Fortunately, the whole JavaScript community got progressively very receptive towards static types (Flow, TypeScript, etc.), and many frameworks started designing their API with types in mind. React was no exception, and the hooks API sealed the deal. Hooks were type-friendly compared to HOC, since they allow for local type inference. At the same time, hooks were the foundation of the shift towards function components, and functions are way simpler to type than classes.

I won’t get into details here, but the bottom line is that TypeScript and React really started to get along well when React started ditching classes in favour of functions.

Avanscoperta: With new technologies popping up almost daily, how can one stay updated without getting lost?  

Gabriele: Tough question! I don’t think there’s a magic recipe here, but I use a few principles to make sense of the tech world around me.

First, I made my peace with not knowing everything: trying to follow every trend is not humanly possible, so you must accept that you’ll have blind spots; that’s fine; everyone does.

Second, what trends to follow? I tend to be very pragmatic here: it’s easy to be fascinated by a piece of technology just because it looks cool, but I always ask myself: “does the problem it solves resonate with me?”; if it doesn’t, I may just skip it. I will stay loosely informed (I’ve found Twitter to be a good way to get a sense of what’s going on at a superficial level), but I won’t invest in it unless I see concrete benefits. The cool thing is that sometimes these trends come and go, and it feels good to have skipped on a trend that seemed the inevitable future, but it turned out to be a fluke.

Bottom line: don’t worry about ignoring stuff, just stay in the loop (i.e., know that that thing exists), and you can pick it up if you ever need it.

Avanscoperta: One thing is to know something, and another is to be able to transmit that knowledge to others in an effective and lasting way. How did you get interested in teaching?

Gabriele: I never formally trained myself to be a teacher, but since my youth, people told me I was good at explaining things, so I started believing them.

I like taking complex concepts and trying to break them down to explain them to others, be it a conference talk, onboarding a new colleague, or teaching a course.

In recent years, I learned how to teach effectively in a more structured way. Among several things I’ve read and attended, I want to highlight the Training from the Back of the Room course from Teri Frith. It was eye-opening and changed how we structured the React and TypeScript course very directly.

For our readers, no, Avanscoperta did not pay me nor ask for the endorsement :P It’s just that the course is *that* good!

Avanscoperta: In the workshop description, we read that using the best parts of TypeScript and React together will help improve scalability. What do we mean by scalability in this context?

Gabriele: Software projects scale in many different ways, and TypeScript and React help us with quite a few of them.

First, software projects then add code (very rarely, we remove more code than we write), so having some help in detecting the impact of a change is crucial when refactoring in a big codebase; types help us with that. Similarly, creating clear abstractions to separate concerns help us avoid a change that impacts too many things in our codebase; React components help us with this concern.

Good software engineering is at the base of everything, but TypeScript and React give us good tools to work with.

Second, software projects can scale in their team: new people will have to learn the codebase, and we found that React and TypeScript help us achieve patterns that automatically lead to the pit of success.

Avanscoperta: Tell us something about the genesis of this workshop.

Gabriele: After years of building complex web applications and working with small to large front-end teams, I wanted to crystallize some of the knowledge coming from that experience. I have found many good courses and workshops that focus on either React or TypeScript, but nothing that touches on the architectural aspects of working together, so I’ve decided to start this endeavour. :)

Avanscoperta: What type of person would benefit the most from your workshop?

Gabriele: You can approach the workshop from many angles and still benefit from it. Ultimately, it resonates the most with developers who will make architectural decisions in a project or aspire to that role.

Avanscoperta: In which sense is this workshop aimed at decision-makers?

Gabriele: This workshop focuses on learning which key decisions you can make in structuring a front-end application so that they pay off in the long run. In this sense, it empowers developers who make these kinds of calls.

Avanscoperta: What pain point are you trying to solve with this workshop?

Gabriele: We talked about it a bit in the past answers, but the general gist is to design front-end applications that can survive the tax of time, using React and TypeScript to design a system that completely rules out classes of problems.

Avanscoperta: During the first two editions of the workshop, participants were lucky to have not one but three trainers, as Eric Camellini and Francesco Cioria also joined the workshop in the quality of co-trainers. Please tell us more about their involvement and role in shaping the workshop.

Gabriele: Eric and Francesco are experienced software developers with whom I have enjoyed working for many years. I pitched them the idea of working on a course together, and they agreed.

Specifically, Eric is now also a teacher of programming classes, so his knowledge in this area has been incredibly useful; on the other hand, Francesco started his own business (Lateral Studio) in the last years, where he helps companies launch their MVP in weeks instead of months. Hence, his insights from the startup world are also crucial.

Avanscoperta: You’re also one of the founders of buildo. What are the main challenges of starting your own business, and how has the landscape changed since the pandemic happened?

Gabriele: The hardest part of starting and growing a business is finding the best people to surround yourself with and empowering them to work at their best. We did an excellent job at buildo, creating a healthy work culture that is simultaneously very professional and informal.

The pandemic impacted where people work: many were suddenly forced home and found benefits in working remotely. We were no exception, and at the beginning of the pandemic, we shifted from working primarily onsite to fully remote. When we had the chance, we included the whole company in re-designing our working policy to incorporate the benefits of remote work with the upsides of in-person collaboration. The mix worked well for us, and we even wrote about it in a blog post.

Avanscoperta: What type of advice would you give to anyone willing to start their company, especially when it comes to hiring new talents?

Gabriele: Hiring the right people is always challenging.

One general advice is to focus on cultural fit and raw talent rather than specific skills. Especially at the beginning, you may not know how the business will evolve. Over the years, I’ve found that developing collaboration into something productive is easier when there’s a strong cultural affinity.

Avanscoperta: You’re deeply involved in the functional programming community, with a focus on Scala. What are your current projects in that area?

Gabriele: I’ve been a Scala enthusiast for years, and I used to contribute a lot to open source. Recently, I have taken a small break from it (mainly due to family obligations since I became a father :-) ), but I’m still actively involved in the community. For example, I’m a member of the SIP committee (the Scala Improvement Process), which steers the evolution of the language.

Avanscoperta: What’s the situation like in Milan right now, as the pandemic-related restrictions are gone, for free in-person events and evening meetups?

Gabriele: They’re finally coming back! And we’re trying to do our part by organizing and hosting several meetups and tech events in our offices. For example, we help organize the Scala meetup and host several others like the Haskell meetup, the Data Science meetup, etc. After almost three years of online events and conferences, meeting people face-to-face is refreshing!

Avanscoperta: What song could be the ideal soundtrack to your workshop?

Gabriele: Given the TypeScript theme, I’ll go with Safe and Sound by Capital Cities. Several puns intended.

Avanscoperta: That’s it, Gabriele; thanks a lot for your time. We leave the closing to you!

Gabriele: Thank you for the questions! I look forward to the next edition of the React and TypeScript workshop :-)

Foto di Maksym Ostrozhynskyy su Unsplash

Learn with Gabriele Petronella

Gabriele is the trainer of TypeScript and React Workshop for Flexible and Evolvable Apps.

Check out the full list of our upcoming training courses: Avanscoperta Workshops.

Subscribe to our Newsletter 📩 (available in Italian and English) and be the first to know when we schedule a new workshop or we publish a new workshop.