Some see React’s strict ways of managing the state of an application as a limitation, John Strick, software engineering manager at Outreach, said. But to Strick, that management leads to better performance characteristics, which is especially important for front-end codebases. Outreach developers use React with TypeScript and GraphQL to keep unruly codebases at bay and performance top-notch.
He would know.
Strick came to the sales engagement platform with 12 years of experience in a variety of software engineering roles at Microsoft, including test engineer and principal engineer on the SharePoint OneDrive.
What JavaScript framework is your team currently using, and why did you decide to use this particular framework?
We’re using React along with TypeScript and GraphQL. React is the most-used modern front-end JavaScript framework. It has strict ways of managing the state of your application, which leads to better performance characteristics. That can feel like a limitation at times, but front-end codebases can get really large and performance can quickly become a problem. React also has great developer tools and performance profiling tools. And it’s relatively easy to learn and most new hires are familiar with it.
TypeScript gives us typing and allows us to catch errors at compile time. It also makes the developer experience better by providing IntelliSense about component interfaces and property types. GraphQL has made loading data from the server really easy. The client isn’t restricted to a static API and it makes it easier to fetch data without needing a home-grown data-loading framework.
TypeScript gives us typing and allows us to catch errors at compile time.’’
How do factors like page performance play into your development process?
We have a script written in Danger JS that checks the bundle size for every single code check-in. If it’s over a certain size, it requires additional approval. This strategy helps us maintain that our bundle doesn’t get too large and that we’re intentional when adding new packages that might have large increases to our bundle size.
What other tools, technologies or strategies are you using to monitor and improve website performance?
Like many other web applications, we have a single-page app that has multiple routes. We ran into issues with memory leaks awhile back. This painful user experience was difficult to debug. Now, we periodically log memory usage for every user and can send alerts if the usage is higher than normal.
We also will refresh the app when navigating to different routes so that memory doesn’t get too high and start degrading the overall user experience.
