1.0 roadmap

[KyleAMathews]

Hi folks, Gatsby is now 1.25 years old — seems high time we push for a 1.0 :-)

Below is a high-level description for the Gatsby 1.0 goals. Some pieces are already working in the current version of Gatsby and others are in process of being developed. See the current status of work on the Github project page.

Goals for Gatsby 1.0

Make building high-performance websites fun.

High performance by default

Performance is king. Gatsby gives you the fastest possible frontend performance by default, no compromises.

• Statically render everything.
• Provide a very fast initial render by loading only the critical HTML, CSS and JS.
• Prefetch data and code for the remainder of the site so subsequent routes changes render instantly.
• Use service workers to intelligently cache assets and make site work offline.

I love Facebook engineering's "pit of success" slogan. Incredibly fast websites should be the default not a monumental engineering feat.

Study after study has shown that faster websites improve user experience and improve business metrics.

Anything that prevents Gatsby from generating the fastest possible website is a bug.

Issues

• High performance roadmap 1.0 improving performance and scalability #431

Rich webapp-like feel

• The line between web apps and web sites has become blurry.
• Javascript enhancements have gone from a nice-to-have to a must-have for many sites.
• Adding rich web-app functionality is an awkward tack-on for older web tools.
• With Gatsby, adding any sort of JS-driven experience is trivial as it uses React.js for its view layer.
• With React & Webpack you have instant access to 1000s of open source React components and modern Javascript and CSS technologies.

Source all the data

A site's value ultimately comes from its data. Whether that's copy, images, or numerical data — if your site building tool can't get the right data in the right format into your site... then it's not very useful.

I'm working on a new data layer for Gatsby based on GraphQL. Using this and the coming plugin system, you'll be able to add "source plugins" that will let you easily pull in data from any number of sources e.g. a directory of markdown files or an external hosted CMS such as Contentful, DatoCMS, or Prismic.

The GraphQL data layer will let you treat your markdown files as a database.

Each route component can query your site's schema for just the data it needs. This gives you complete flexibility to turn your data into whatever type of web experience you'd like.

Issues

• GraphQL data layer 1.0 new GraphQL data layer #420
• Programmatic routes 1.0 Programmatic Routes #421

Current status / how to help

Note: the following three sections will be kept up to date as we move towards a 1.0.

Steps on road to 1.0

See the changelog

• 4/24 — alpha 13 is released https://github.com/gatsbyjs/gatsby/releases/tag/v1.0.0-alpha13
• 3/9 — Gatsbygram case study https://www.gatsbyjs.org/blog/gatsbygram-case-study/
• 2/20 — alpha 12 released (CHANGELOG is out of date).
  ...
• 10/07 — alpha 4 released.
• 10/05 — alpha 3 released. Extract webpack manifest for improved cachability, add extension API to programatically add components to , upgraded React Hot Loader to 3.0-beta5, bug fixes.
• 9/21 — alpha 2 released. New pattern for layouts, helper components for rendering styles/scripts in your html.js, runtime validation for user supplying code, started on new plugin system.
• 9/1 — alpha 1 released. Code/data splitting, PPRL pattern, new GraphQL layer are prototyped and more-or-less working. POC release. Check out Bricolage.io for a live site.

How you can help

Many of you have asked how to help! Here's some ideas.

• Feedback! Read through this page and other issues and ask questions, point out potential problems, bring up all your website unicorns you hope Gatsby can give you.
• Try building a site — report back what was 💯 and what's missing or awkward.
• If you're in bay area — I'd love to pair program a site — let's hang out and build a site together.
• If you're not in the bay area — I'd love for you to pay me to come fly to wherever you live and code a site together :-)
• Directly sponsor Gatsby's development — fund me or someone on your team or in the community to work on Gatsby. If you have R&D budget or open source sponsorship budget, anything would be helpful. Code ain't cheap and more people that are working on code, documentation, examples, and tutorials the faster we can move.

Many of the changes in 1.0 are intended to make it easier for people to contribute to Gatsby. The plugin system (and post-1.0, the theme system) will mean you can create and publish additional behaviors for Gatsby through plugins. Let's make the core smaller to increase the surface area where people can contribute.

How you can test

Alpha 13 is out which is kinda usable!

There's four sites I've upgraded to alpha 13 that you can clone and play with.

• My blog — https://github.com/kyleamathews/blog/tree/master
• Gatsby Starter Blog — https://github.com/gatsbyjs/gatsby-starter-blog/tree/1.0
• Gatsbygram — https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram
• gatsbyjs.org — https://github.com/gatsbyjs/gatsby/tree/1.0/www

Clone and then run npm install then run gatsby develop as normal.

Things to try:

• Poke around Graphiql: after running gatsby develop open http://localhost:8000/graphql to see the query explorer.
• Modify a pageQuery and then the corresponding view code and see how both data and view hot reload.
• look around /.intermediate-representation e.g. the child-routes.js and split-child-routes.js files and the outputted queries in the json directory.

[rossthedevigner]

@KyleAMathews This roadmap has some really great features lined up. I'm curious though how you'll handle loading critical CSS. Will it be based on routes or just the chrome of the page; header, footer, and basic site structure?

[KyleAMathews]

@rossthedevigner thanks! I discuss options for loading critical styles in the issue discussing code/data/styles splitting #431

[chiedo]

Hey @KyleAMathews,
I've been reading through issues and am not sure where to post this.

But would it be possible to have something like a .leave-these-files-alone file where we could specify files that shouldn't be put through the Gatsby build process other than copying?

For example, I have a google webmaster tools verification file called blahblah.html and I want that to simply be copied from my pages directory into my public directory in the build process instead of it being converted to a folder named blahblah with an index.html file in it and I want to add a runprettify.js file to my pages directory and have it be simply copied upon build instead of Gatsby trying to process the file resulting in freakouts from window not being available.

I hope what I'm asking is making sense. I know with a lot of these things, doing things the React way solves the issue. But it would be nice to be able to add files or directories to the .leave-these-files-alone file and have those files/directories just copied instead of being processed.

[chiedo]

I could implement if you're in favor of the idea and pull request it

[KyleAMathews]

@chiedo want to move this to a new issue? I agree this would be a good idea.

[chiedo]

Will do @KyleAMathews :) I'll work on it after I finish migrating a WordPress site over to Gatsby.

[stereobooster]

You are doing super cool project)

As of offline support: jeffposnick/create-react-pwa@starting-point...pwa

[KyleAMathews]

Alpha 2 is out! See the updated "how to help" "how to test" sections above. Also added a new CHANGELOG.md.

[KyleAMathews]

I'll be filling the "Alpha 3" column on our project roadmap in the next day or two — https://github.com/gatsbyjs/gatsby/projects/1

[KyleAMathews]

Also click the "Subscribe" button to the right if you want to get future updates :-)

[kdorsel]

I'm having some issues with Alpha5. I've tried both the updated Gravatar and Starter sites. When running gatsby develop I get the following error in both:

[ { path: '/2015-05-28-hi-folks/',
    component: '/Users/kaass/Downloads/gatsby-starter-blog-1.0/page-templates/blog-post.js' },
  { path: '/2015-05-06-my-second-post/',
    component: '/Users/kaass/Downloads/gatsby-starter-blog-1.0/page-templates/blog-post.js' },
  { path: '/2015-05-01-hello-world/',
    component: '/Users/kaass/Downloads/gatsby-starter-blog-1.0/page-templates/blog-post.js' } ]
rewrote JSON for queries for /Users/kaass/Downloads/gatsby-starter-blog-1.0/page-templates/blog-post.js
graphql query time: 8.908ms
rewrote JSON for queries for /Users/kaass/Downloads/gatsby-starter-blog-1.0/pages/index.js
graphql query time: 3.008ms
rewrote JSON for queries for /Users/kaass/Downloads/gatsby-starter-blog-1.0/page-templates/blog-post.js
graphql query time: 7.675ms
rewrote JSON for queries for /Users/kaass/Downloads/gatsby-starter-blog-1.0/pages/index.js
graphql query time: 1.125ms
There were errors with your webpack config:
[1]
resolveLoader.root.1
path.absolute , "1" "/Users/kaass/Downloads/gatsby-starter-blog-1.0/node_modules/gatsby/node_modules" should be an existing absolute path, but I found the following problems: The supplied path does not exist on the file system.