Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Presentation on Gatsby to SF Static Web Tech Meetup

3,077 views

Published on

Presentation on Gatsby, a React.js Static Site Generator

Published in: Software
  • Be the first to comment

Presentation on Gatsby to SF Static Web Tech Meetup

  1. 1. Gatsby: A React.js Static Site Generator Kyle Mathews
  2. 2. @kylemathews Co-founder RelateRocket (Enterprise SaaS, data science, GraphQL, Relay, React.js, React Native) Hiring 1st engineer soon!
  3. 3. My website development tools history… or how Gatsby came to be
  4. 4. 2006 — Drupal 2011 — Backbone 2014 — Static sites + React.js/Webpack/React- Router/Hot-Loader
  5. 5. Love stack for building web apps but what about web sites…? Want React.js + ecosystem + simplicity of static sites.
  6. 6. Spark of inspiration — auto- generate React.js web app from static Markdown files?
  7. 7. Obsessed over idea for several months until I took a week off startup work and built v0.1 of Gatsby
  8. 8. Shockingly it worked…
  9. 9. Was able to glue together Webpack, React.js, React- Router, and React-Hot-Loader
  10. 10. gatsby(markdown) => SPA
  11. 11. 8 months old but quite a few sites are built on it already
  12. 12. Here I make a case for why Gatsby is best choice in 2016 for building static websites
  13. 13. Gatsby has native support for Best Parts of 2016 Web Dev ecosystem Postcss, Webpack, Components, React.js, NPM, etc.
  14. 14. Comparing static site generators with Gatsby * Markdown — same * HTML/Templates — same-ish * CSS — more or less same, most support Sass/Less/Postcss, etc. * Javascript — many… awkward jQuery enhancement level, Gatsby very easy * Components — Gatsby pretty unique here w/ 1st class support
  15. 15. Gatsby Developer experience * Batteries included * Boilerplate + Gatsby “apps” (tentative names) * Hot reloading * Feel very natural to React dev * Entire React ecosystem available to static sites (npm install my-favorite-component)
  16. 16. Gatsby User experience * Fast! * No-reload page transitions * Easy service worker support for client caching + offline
  17. 17. DEMO
  18. 18. The future * Revamp data transformation * New Plugin API * Support Gatsby “apps”
  19. 19. extends: { require(‘gatsby-documention-app’), }, plugins: [ require(‘gatsby-plugin-markdown’), require(‘gatsby-plugin-postcss’)({ modules: true, }), ], // Implement Gatsby APIs postBuild: (pages) => { // Do something after site is built. }

×