Presentation on Gatsby to SF Static Web Tech Meetup
-
Upload
kyle-mathews -
Category
Software
-
view
1.655 -
download
0
Transcript of Presentation on Gatsby to SF Static Web Tech Meetup
Gatsby: A React.jsStatic Site GeneratorKyle Mathews
@kylemathewsCo-founder RelateRocket(Enterprise SaaS, data science,GraphQL, Relay, React.js, React Native)Hiring 1st engineer soon!
My website development tools history… or how Gatsby came to be
2006 — Drupal2011 — Backbone2014 — Static sites + React.js/Webpack/React-Router/Hot-Loader
Love stack for building web apps but what about web sites…? Want React.js + ecosystem + simplicity of static sites.
Spark of inspiration — auto-generate React.js web app from staticMarkdown files?
Obsessed over idea for several months until I took a week off startup work and built v0.1 of Gatsby
Shockingly it worked…
Was able to glue together Webpack, React.js, React-Router, and React-Hot-Loader
gatsby(markdown) => SPA
8 months old but quite a few sites are built on it already
Here I make a case for why Gatsby is best choice in 2016 for building static websites
Gatsby has native support for Best Parts of 2016 Web Dev ecosystem
Postcss, Webpack, Components, React.js, NPM, etc.
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
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)
Gatsby User experience
* Fast!* No-reload page transitions* Easy service worker support for client
caching + offline
DEMO
The future
* Revamp data transformation* New Plugin API* Support Gatsby “apps”
extends: { require(‘gatsby-documention-app’),},plugins: [ require(‘gatsby-plugin-markdown’), require(‘gatsby-plugin-postcss’)({ modules: true, }),],// Implement Gatsby APIspostBuild: (pages) => { // Do something after site is built.}