Gatsby: The tool of the trade
January 22nd, 2020
Read time: 2 min 36 sec
Stop managing content. Start telling your story.
Gatsby brings your content to the edge for lightning-fast, safe website delivery with no CMS overhead
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.
Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.
Components are a key feature of React, and now they’re a commonly followed web design pattern. With the current level of complexity of user interfaces, it is almost impossible to write maintainable code in long pages of HTML or use templating engines and expect consistency.
So instead, we build reusable components and then use them to construct views. This way we have separate modules handling separate things, and it’s easier to manage and maintain. The component just contains all the information it requires, and Gatsby, since it uses React, follows the same pattern.
Atomic design is an approach that’s a good way of handling complex interfaces, and we could put it to use here with React components. Brad Frost has an amazing blog post describing what it is and how it works.
The icing on the cake: we’ve got hot reloading and code splitting built-in, giving a better development experience and better site performance. This is aimed at making the developer write minimal tooling configuration and focus more on the actual site development.
Again, complex user interfaces mean complex styling patterns, and it’s only a matter of time before style-sheets get bloated. You get specificity issues, scroll through hundreds of lines of code trying to figure out things, and end up using !important to see the styling you added.
Resizing images for responsiveness on different devices, lazy-loading, using srcsets and picture… Already sounds tedious when it is to be done manually.
Although it is a requirement for performance and app-like optimized interfaces these days, we don’t see many tools that we can directly jump into and use.
Meanwhile, in Gatsby with just a plugin, particularly the gatsby-plugin-sharp, you can directly generate fluid images, add filters, change formats, blur up on load and a lot more. This saves a lot of work and time manually resizing images and writing explicit boilerplate code for responsive images. It also gives you way better performance along with smoother user experience.
With the performance boost and features to add to the smoothness of the user experience, Gatsby aims at a full app-like experience borrowing from full PWAs. There are no reloads between pages when using gatsby-link instead of hyperlinks, and the app still appears smooth and performant thanks to lazy-loading images and code-splitting.
For sites following standards that you also want to be performant, we’ve got tons of things to do and guides to follow: minification and bundling, browser caching and async loading scripts or files, and so on. When working with a framework like React, you have more things to worry about even though it solves a couple of problems: code-splitting, SEO, routing if required, responsive images, and the list goes on.
Gatsby aims to solve all these problems, with less time spent on tooling, configuration, and the environment and more time to design and develop the site.
We're here to help!
Our talented team of full-stack engineers paired with passionate storytelling UX and front end consultants are ready to assist you on your journey.
Give us a shout at @talacha_dev and someone will get in touch with you.