1.0 roadmap
KyleAMathews opened this issue · 36 comments
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 #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
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
- 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 developopenhttp://localhost:8000/graphqlto see the query explorer. - Modify a
pageQueryand then the corresponding view code and see how both data and view hot reload. - look around
/.intermediate-representatione.g. thechild-routes.jsandsplit-child-routes.jsfiles and the outputted queries in thejsondirectory.
@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?
@rossthedevigner thanks! I discuss options for loading critical styles in the issue discussing code/data/styles splitting #431
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.
I could implement if you're in favor of the idea and pull request it
@chiedo want to move this to a new issue? I agree this would be a good idea.
Will do @KyleAMathews :) I'll work on it after I finish migrating a WordPress site over to Gatsby.
You are doing super cool project)
As of offline support: jeffposnick/create-react-pwa@starting-point...pwa
Alpha 2 is out! See the updated "how to help" "how to test" sections above. Also added a new CHANGELOG.md.
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
Also click the "Subscribe" button to the right if you want to get future updates :-)
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.
@kdorsel hmmm yeah, I saw that last Friday too — as a workaround, you can just create an empty directory at node_modules/gatsby/node_modules. I added this resolveLoader to get my local environment working while developing Gatsby with npm link but it clearly shouldn't be there in production so let me see if there's another workaround for local dev or just remove it when publishing.
Also, feel free everyone to create 1.0 specific issues! Just prefix the title with [1.0].
Love this direction!
I was working on a static site generator (metalpress) as well that I planned on integrating with React at some point. There's also a CLI which will soon be using yarn, ava, and coverage with codecov. I'd love to see if there's a way to integrate some of the design/features with Gatsby.
Love the idea of using GraphQL and potentially accessibility features that support bundle splitting, offline caching. A CLI would be a great add-on to get up and running quickly. The metalpress-cli is modeled off of the redux-cli which could also be super powerful to blend in and try to have a fully static web app with state and routing built in!
@cameronroe hey! Thanks for the thoughts! Gatsby has a CLI already with a few of the features from redux-cli e.g. it lets you create new sites from "starters" — https://github.com/gatsbyjs/gatsby#gatsby-starters
There's plans afoot to support much more powerful "themes" in the future #447
Would love to make themes/starters/plugins/etc searchable/installable from the CLI see #56 and https://github.com/drjekyllthemes/drjekyll
Would love your and @SpencerCDixon's help here!
How exactly can I help? do you want an integration with redux-cli or your own version of it built into gatsby? (btw redux-cli needs a name change it really has nothing to do with redux)
How would an integration with redux-cli work? I think it should "just work" with Gatsby as you can add Redux to Gatsby if you want.
The main way I see you could help is exploring what ways that generators, installers, theme searching, etc. would work with the Gatsby CLI and eventually helping design/build them (if this is of interest to you).
I just built a quick demo from the gatsby-starter-default and took a closer look at the gatsby docs. Here are a few thoughts:
/pages - All pages go here." <- This is Monolithic. I think there should be some structure to a project. I actually have a pretty nice one with metalpress here. Disregard the liquid templates. The idea is that most projects (using local files) will have some sort of assets (img, sass/less, fonts) along with site-related data/collections (projects, authors, etc.) and text-based files (pages, posts). If there are local files in a gatsby project, ideally it would be organized in a familiar structure. This could also be completely avoided with services like Contentful. If that is the case, there should be some way to manage the content/data that's exposed to the gatsby site in order to assign it to the correct components/etc.- Overall, there doesn't seem to be an API to gatsby yet. Thoughts on extending redux to create a high-level wrapper similar to the duck pattern. That way you could group everything (actions, reducers, component, markdown).
Hey folks — just put up an example site built with 1.0.0-alpha11
https://gatsbygram.netlify.com/
source code: https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram
This site and the in-progress GatsbyJS website (https://gatsbyjs.netlify.com/) are rebuilt on every push to the 1.0 branch! Nice high-level integration tests. The idea is we'll use every core plugin in one of the sites so regressions will be quickly caught.
@jdsimcoe yup! @SachaG added it on our logo/branding thread #408 (comment)
Been really happy with it.
re: design feel — we've been going for art deco but art nouveau is close enough! ;-)
Hey folks, just published a blog post on 1.0. A case study on building Gatsbygram. Lots of details on the new stuff in 1.0 — check it out! Please share!
Feel free to retweet https://twitter.com/kylemathews/status/839930180353196032
I gave a talk last week on Gatsby and what's coming in v1 https://www.youtube.com/watch?v=hbjR5N6IhDU&list=PLHSBYD3ClyvN-eN1X8q7tdbY5K6b5236l&index=3
Alpha 13 is out https://github.com/gatsbyjs/gatsby/releases/tag/v1.0.0-alpha13
Storybooks is using gatsby in our docs: storybooks.js.org
We would like to migrate to 1.0 and help you out by testing, but we could use some help migrating.
Could someone give us some assistance?
@ndelangen maybe me and @shilman could help with this? I haven't tried 1.0 yet but it's on my to-do list anyway :)
@ndelangen @SachaG @shilman awesome! Excited to help you migrate and looking forward to your help. It's past time to get an upgrade guide started so lemme get a quick version of that up to get things going.
Also there's three open source docs sites (that I know of) built with 1.0 that you could look at: Gatsby's website, Expo, and Keystone.
@KyleAMathews Nice! Let me know when there's a quickie upgrade guide and I'll give it a whirl and rope @SachaG in if he's interested 😸
@shilman yeah didn't quite get to it today :-) will start it first thing in my morning here in London (~9 hours)
@shilman @SachaG @ndelangen PR with upgrade guide is up! #1032
I'll be giving it another look over a bit later than merging it. It's pretty rough and I'm sure is missing things so please point out areas that are confusing and I'll update them post-haste.
Hi
I have started a project in Gatsby. I want to pass dynamic parameters in url for a particular page like
localhost:8000/docs/param1, localhost:8000/docs/param2
where docs is a folder in pages folder and param1, param2 are the dynamic parameters.
I want to send these dynamic parameter to a index.md file created and called as default while calling above url. but these urls are not working as according to Gatsby these parameters should be pages in docs folder. So, is there any way to modify routing or sending parameters to a common page in Gatsby.
Please help me.
Thanks
We shipped v1!