Ecosystem

Design

Features

There are many ways to build a website. If you're considering Gatsby, you may also be looking at some alternatives:

Traditional static site generators such as Jekyll let you put text or markdown in a specific directory such as pages/ in a version-controlled codebase. They then build a specific kind of site, usually a blog, as HTML files from the content you've added. These files can be cached and served from a CDN.

Content Management Systems (CMSs) like Wordpress give you an online text editor to create content. You customize the look and feel through choosing themes and plugins, or writing custom PHP or Javascript code. Content is saved in a database, which is retrieved and sent to users when they visit the website. Depending on your requirements you can self-host your website, or use an official hosting provider.

Site builders like Squarespace are a type of hosted closed-source CMS. They focus on making it fast to build a website; however, they don't allow self-hosting or enable you to export your website and customize it.

The chart below details Gatsby's capabilities in comparison with a representative from each category. Click on any row to see a more detailed explanation on that feature and our rating for each system.

Offline access via service workers is one of the core principles of Progressive Web Apps, since many users -- especially in developing countries -- will be accessing your site over spotty connections.
Gatsby supports this out of the box; adoption is possible with Jekyll and Wordpress. Squarespace doesn't currently support any offline access.

Extraneous code fetches are typically done by single-page applications written in various JS frameworks; on page load they fetch the code needed to run the entire application rather than just the page that's loaded. Website-building frameworks tend to be fiine on this.

Progressive image loading means displaying a blurry placeholder image before loading the full heavyweight asset. This prevents the display from "bouncing around" as images load in addition to making the page feel complete before they have.

The most well-known implementation of this is on Medium-hosted blogs. Gatsby comes with this feature out of the box (demo at using-gatsby-image.gatsbyjs.org); it takes custom per-page code on other code-based platforms.

Responsive images enable modern browsers to load the right size of image assets given browser size -- that way users with high-resolution, large-screen devices can get a high-quality image while users on low-resolution or small-screen devices don't spend extra time waiting for the page to load when a low-resolution asset would suffice. Gatsby comes with this feature out of the box (demo at using-gatsby-image.gatsbyjs.org).

Wordpress and Squarespace supports this out-of-the-box automatically, while Jekyll requires some customization.

There's two ways to get CSS on your web page -- inline it with your html, or load it on a separate page referenced in your html. If you reference CSS in a separate page, your client's browser will block page loading until it receives the CSS file. This can delay interactivity by 500ms (on a fast connection), to 3+ seconds on a slow connection.

Gatsby offers this out of the box; in other frameworks it is usually possible but requires a lot of custom code, often written on a per-page basis.

Google Fonts and other open-source font libraries are helpful in building beautiful sites. The hard part is what you don't see -- a page load blocking request to Google's servers. While this request is pretty fast, even faster is hosting fonts on your own server, so you can just load them from your local filesystem.

If your site is built on open-source software, you can change your hosting provider; and customize to your heart's content.

If you use a site-builder, you're locked into a specific platform and a specific provider. If they don't offer a feature you need, your only option is to rebuild your site on a different platform. You also assume additional business risk that the platform goes out of business or moves in a direction different than you had hoped.

Refreshing & Click To Preview are standard features of content creation workflows. When you write or edit a post, in order to preview what your content looks like, you click a Preview button, or refresh the page.

Hot reloading is an innovation of modern web development. As you edit content, you see the resulting UI change in your local development environment browser without refreshing the page. Gatsby offers this out of the box; Jekyll offers this through plugins; Wordpress offers a partial version where content in posts you edit is seen in your editing page as you change the text.

Hot reloading is an innovation of modern web development. As you edit code, you see the resulting UI change in your local development environment browser without refreshing the page. Gatsby offers this out of the box; Jekyll offers this through plugins; Wordpress does not offer this feature while editing components.

Component systems allow developers to plug-n-play either external 3rd party components or internal components from a shared codebase or component library. Wordpress and Squarespace both support this; Gatsby supports this through React; other static site generators like Jekyll don't offer this at all.

Gatsby is built on top of React, which uses a one-directional data binding system for its components. One-directional data flows are essential to building complex frontend components by removing complex cross-dependencies present in alternate data flow approaches, such as MVC.

React's one-directional data flow is a pattern, rather than a library, so you could in theory implement in PHP / Wordpress, but there's no out-of-the-box solution.

Gatsby is built on top of GraphQL, which allows you to write declarative queries for the data you want, and co-locate your components. Its build system pulls all of the data in for you, so you can query it in your local GraphiQL IDE / query constructor in order to get data in the shape you're looking for.

Gatsby is built on top of React, which allows a hierarchical UI construction by declaratively passing props down child trees. When components are behaving oddly, you can inspect their state using the DevTools extension and compare expected state of each element in a hierarchy to the actual state, enabling faster debug cycles compared to alternate frameworks.

Gatsby provides asset pipelining out of the box through its build system on top of Webpack and Babel. Wordpress and Jekyll don't provide this, although you could set up your own. Squarespace has a limited and tightly controlled development environment (no local development) that doesn't allow for creating an asset pipeline.

Languages such as Sass and Less compile to CSS while offering support for variables, functions, hierarchal class definitions; libraries like glamor and aphrodite allow css to be colocated with JS and HTML in React. This solves problems in vanilla CSS like global namespacing, non-determinatism, dead code elimination and minification

Design

Gatsby offers native support for design systems through react-sketchapp, a tool allowing you to export your production React components into Sketch. Other frameworks aren't plugged into the React ecosystem.

Gatsby offers native support for component libraries through react-sketchapp, a tool allowing you to export your production React components into Sketch. Other frameworks aren't plugged into the React ecosystem.

Want to help keep this information complete, accurate, and up-to-date? Please comment here.