What is Gatsby? Everything you need to know

Listen about GatsbyJS, so don’t you know what to make of it?

Here are five flashing-fast questions and answers with the Front End Developer, about everyone’s favorite front-end platform right now.

What is Gatsby?

GatsbyJS is a React-based, GraphQL-powered, static site generator. What does that mean? Ok, it blends the best bits of React, Webpack, React-Router, GraphQL, and other front-end tools into one very fun developer experience. Don’t get caught up on the ‘static web builder’ moniker.

The word has been around for a while, but it is much more of a new front-end system than an old static site generator. It uses powerful pre-configuration to create a website that uses only static files for extremely fast page loads, service staff, code slicing, server-side rendering, smart image loading, asset optimization, and data prefetching.

Everything out of the box, man. I didn’t believe the pace until I tried it myself. Your code and create your web, it turns it into a directory with a single HTML file and your static properties. This archive is imported to and from your preferred hosting company. Overall imagine, part of Jekyll, part of Create-React-App.

What makes Gatsby special?

You might think, “I have a nice web pack configuration that I use,” or “create-react-app works for me,” or “Jekyll’s fine for my blog.” Well, I think there are three things that make it very special compared to those other software. First, it’s the way it uses GraphQL to build its data layer. What do I mean by that?

It is built to gather the data from anywhere: Markdown, JSON, your favourite CMS, third party APIs, anywhere! And as you construct time, it builds an internal GraphQL server with all of these data. So, in your answer components, all of your data is queried from the same position at the same time, in the same manner via GraphQL.

The second explanation why this is unique is the richness of this ecosystem. It hasn’t been around for that long, but she already has a lot of documentation and a variety of starters to help you get the web up fast. The GraphQL data collection I listed earlier can sound daunting, but because of its well-documented data source plugins, it can be as easy as a few lines of code in the config file.

Lastly, it is committed to success. Every level of success and usability is a priority, and you can really see it in the final product. More than any boiler or engine I’ve come across, Gatsby lives up to the hype.

Do I have to know React and GraphQL?

One of the biggest obstacles for someone to try Gatsby is to say, “Well, I don’t know GraphQL,” or, “I don’t know React, and I don’t really have the time or energy to learn that just so I can try Gatsby.” Fair enough, and as someone who knew React, but was overwhelmed by GraphQL, I’ve been learning Gatsby for too long since I first learned about it.

Although, I can honestly say that if you just know one or don’t know about React and GraphQL, it is actually a perfect entry point. It has excellent documents and descriptions of React and GraphQL, and its form lends itself to ‘thinking in React’ and ‘thinking in GraphQL.’ Now, as much as you may, can you use Gatsby without these? In reality, I tried it.

As I said, I knew React, but not GraphQL, and thought, I’m just not going to use the GraphQL part, you know, just make normal API calls to my components, etc. Don’t do that. It totally fails the intention of it and utterly hamstrings you. It’s sort of like asking, “Can I use React without JSX? “So, yeah, Respond and GraphQL is key to Gatsby, but if you don’t know them, Gatsby is a perfect tool to understand them, not a reason not to.

How do I get started with Gatsby?

If you’re thinking about getting started, as I said before, it has excellent documentation and tutorials, so head over to gatsbyjs.org and follow:

• Tap on the documents and follow the directions.
• Install Gatsby CLI globally.
• Run the ‘latest’ command of Gatsby with the name of your site. ‘cd’ in the current directory.
• Run ‘gatsby production’ and press the ‘localhost’ icon in your console.

And here we go, our Gatsby platform is up and going. To compile this for development, we’d quit ‘develop’ and run ‘gatsby build’ And you can see the ‘build’ folder that was supposed to be submitted to your hosting company. Gatsby incorporates the concept of ‘starters’ as well. Starters are more of a Gatsby boiler plate and models.

If you know your data will come from a specific location, or your site will run in a certain manner, such as a forum, there is probably a starter who has pre-configured data sources, and the styling and part structure will already be set up and displayed. This makes it really fast and easy to get up and run. If there is no starter that suits you, you should use its default starter, find your data source plugin, and follow the installation instructions.

I would suggest starting its default starter tutorial to get moving, and I think you’ll be shocked how easily you feel relaxed and itchy to link to your favourite CMS or files.

What’s next for the future of Gatsby?

It hasn’t been around for that long. Version 1 was released in July 2017. Since then, its use has expanded enormously, and version 2 of the beta has been launched in June 2018. There will be a few technological improvements to it, including what I think to be a general improvement in Gatsby’s perspective. Any of the technological changes to Gatsby v2 are as follows:

• Upgrade to webpack 4 from webpack 1 is supposed to lead to some significant performance improvements, particularly during the build phase.
• Adoption of the Reach Router, a project similar to the Reach Router, but designed with access to single-page applications in mind.
• Any tweaks about where you can use GraphQL in Gatsby, from being confined to Gatsby’s very top-level React modules, to being able to identify a question for any object.
• Upgrade React to v16 so that you can use Context, Fragments, and some other feature of the new edition of React.