James Nutter
Typescript, React and other cool things...
July 1st, 2019
I have multiple applications that I am working on at my full-time job but I wanted to take time to write about the latest project we released. That project is our new company website: t1cg.io. This was exciting for us as a team for many reasons but for me personally it was a great opportunity to implement Typescript in React! This was also my first time using CSS modules. So a big project with lots of hot new tech, you get it, but how did it go?
It was phenomenal! Not only was this my first experience using CSS modules but this was also my intro to using Typescript in a large scale application. When it comes to React, well I've been using it for almost 2 years now and feel pretty comfortable with it. However, introducing Typescript to React has changed the way I think about my React code. I was familiar with PropTypes from the standard library but Typescript took things to a whole new level. My time spent with strictly typed languages is maybe a single percent of what my time with Javascript has been. Needless to say it was a big shift, but overall I would say it was well worth it. At first I found myself very frustrated with how much more code I was typing and how simple set ups for a component were requiring me to refer to docs and google. When I am working on a project, especially one that I'm really interested in, I want to get things up and going as quick as possible. With time I found that the extra time was paying off, because I wasn't just writing a React component any longer. I began to really think about what that component was doing and what data it may be handling. To the seasoned programmer or frequent user of a strictly typed language this may seem rather obvious, but I found myself really considering the code I was writing and how each prop or piece of state would be used. The best way I can describe it was everything felt very intentional and because of that I felt like I had a much better grasp on what was going on in this application. When a project is of this size I think Typescript benefits the developer because it's easier to understand each components purpose or usage.
For anyone who has been wondering what a Typescript React component looks like, here is a little piece of code I wrote for our navbar. If you've never used Typescript I bet you can still guess what's going on here:
Cool right?!
Typescript implementation not only helped our collaborations on this project but also reduced the amount of bugs. I believe it made the development cycle more efficient and a lot less painful when working on someone else's code. Our company is now adopting Typescript into every React based project we have and I'd encourage you to look into it too! Along with TS we are also using CSS modules as our styling method from here on out. We found CSS modules were the best way for our team to keep styles from interfering with one another and keeping things organized ( I also exclusively use it now for my personal projects!). If you haven't given CSS modules a chance I HIGHLY suggest you do!
Below are some resources to learn more about Typescript and CSS Modules. If you have any questions or would like to hear more about our project please tweet or email me and I'll get back to you as soon as I can. Also please check out t1cg.io and give it a tour. Our team worked very hard and had an amazing time on this project. I personally contributed a lot of code to this site and would love to hear some feedback :-) Until next time!
https://www.typescriptlang.org/