For the past year, I’ve been working on a few medium-large scale Gatsby projects. While Gatsby itself and the surrounding ecosystem have been amazing, with every new change request or feature for a project, it felt like the system was becoming more and more fragile.
Is Gatsby really enterprise ready? - I was asking myself.
Fortunately, I was about to launch this blog powered by Gatsby and just before going live, I decided to convert it to TypeScript. The intention was curiosity and challenge rather than objective reasoning. I had already worked on a few TypeScript + React + Redux projects before, and I thought Gatsby + TypeScript must be an easy one.
Having converted this blog, I concluded two things:
I suggest we briefly go over them. Shall we?
Let’s take a look why corporates usually choose expensive traditional CMS systems today:
It just so happens that the listed benefits perfectly play with headless CMS and Gatsby! Well… Except maybe the last two: speed of development and quality.
As I mentioned in the beginning, it’s quite easy to make Gatsby site complex as it grows - and with complexity come bugs, and with bugs come slow iterations.
It’s easy to make Gatsby site complex as it grows - and with complexity come bugs, and with bugs come slow iterations.
Now, let’s check how TypeScript can help.
TypeScript introduces strict type checking. Type checking catches most of your runtime errors early during development. Runtime errors cause build errors. How much time have you wasted this year waiting for the build only to get an error: TypeError: Cannot read property 'split' of undefined ? Don’t even ask me..
TypeScript can safe guard your components from unreliable content coming from the CMS, given you enable strict mode. There is a plugin that automatically generates interfaces for your GraphQL queries. Those interfaces have nullable properties by default - because you never know what can come from the CMS. And TS compiler’s strict mode simply won’t let you compile the code unless you provide default prop values. This in turn makes your components more robust.
As the application becomes data-intensive, there are dozens of props and state values flying around. You never know what the prop can actually be - you must either go up the component stream and check the graphql query or console.log it. With TypeScript, all you need is to hover on the prop to see its type and possibly the structure. TypeScript helps you understand your website’s data flow better.
Working with multiple developers becomes easier as every one now follows strict type-checking and maintains inherent quality.
But what do the benefits above really mean for your overall project success? Overall, TypeScript helps you sustain the quality and development speed as your application grows.
TypeScript helps you sustain the quality and development speed as your application grows.
Read the full transcript on Ilyas' personal blog.
Prototype is one of the leading companies for web design in Dubai. Get in touch for a free consultation today.
January 29, 2020
Subscribe to our blog to receive relevant news and tips about digital transformation, app development, website development, UX, and UI design. Promise we won't spam you.