Getting to know “The Great” GatsbyJS

GatsbyJS logo

It’s no secret that learning a new technology is no walk in the park. When learning something new, we sometimes fall headfirst into the rabbit hole of free resources that are available on the web. Gaining a solid understanding of how it works may be too time-consuming, and getting started may feel like you bit off more than you can chew. Being a developer myself I know how it feels to have these great big ideas but get discouraged because technology can sometimes feel intimidating. Gatsby takes away most of the stress by providing optional precompiled starter projects, amazing tutorials, a large community full of supporters, and well-written documentation on its website.

So what IS Gatsby and what is its purpose?

What is GatsbyJs, you may ask? GatsbyJs generates static sites for ReactJs and was founded in late May of 2015 by Kyle Mathews and Sam Bhagwat. Gatsby is a Javascript framework that allows users to create a simple website from start to finish using reusable components to build beautiful user interfaces that perform very well and with lightning speed. Gatsby retrieves the information you need from data sources like APIs, Markdown files, and/or CMSs like WordPress or Drupal using GraphQL. Gatsby then builds the site by converting your project into plain HTML, CSS, and javascript files. It then deploys your site on any number of static web hosts such as Netlify, Github pages, Amazon S3, Now.sh, or any of the many others, making your site blazing fast without ever having to learn or touch any backend code.

Create React app vs GatsbyJs…

I know a common question that comes up when people read about GatsbyJS is “what makes GatsbyJS different from Create React App”?

Well…

They both help you simplify the configuration process of creating an application by doing most of the heavy lifting for you and providing you with default starters/tools. GatsbyJs and Create React App both use React (a JavaScript library that was created by Facebook in 2013 to build User interfaces). Gatsby and Create React App even share nearly identical Webpack and Babel configurations which make porting less of a headache. When it comes to speed both Create React App and GastbyJS exceed expectations.

However, Gatsby offers some additional advantages like performance optimizations with static rendering and a thriving ecosystem of plugins.

Here is where I attempt to use food to explain why Gatsby is the JAM :)

If I were to put it into simpler, non-technical terms, I’d say it’s like a PB&J sandwich. Other technologies would have you choose the type of bread you want, add jam, figure out which type of peanut butter would taste and spread best, add everything on the bread without breaking it, and then have you cut the crust off so that everything looks nice and goes down smoother. Whereas Gatsby is like a Smuckers Uncrustable sandwich…prepared, already filled with all the right components, and just waiting for you to thaw, unwrap, and dive right in. Not too much mess, little confusion, and less time spent putting it all together.

Photo by Freddy G on Unsplash

Take a deeper dive into GatsbyJS

If you still have questions and want to know more about the magic that happens within GatsbyJS I have listed a few links to useful content and helpful online communities that you can use to assist you on your Gatsby journey :)

Also, if you are looking for something fun to do while learning Gatsby checkout the #100DaysOfGatsby Challenge!!

Through hard work and determination, I’ve proven that your past doesn’t define your future. Six years ago, I was a single mom living in a shelter. Now, I’m a self-taught software engineer, public speaker, event organizer, and mentor. This blog will track my journey.