Pump up the JAM
with GATSBY

Stefan Adolf

Developer Ambassador

@TurbineKreuzberg

"I take care of developers."

follow me as @stadolf everywhere. 

A little history

of CMS

CMS

• Wordpress
• Typo3
• Drupal
• Silverstripe
• October

"do it yourself desaster"

Look Ma, I got my own LAMP server

Great! Oh look, someone broke into it
because you forgot to update it.

CMS as a service

• Wordpress.com
• Wix, Jimdo
• Squarespace
• (Shopify)

"SaaS homepage toolkits"

Look Ma, I got my own blog!

Great! Oh, can you just add Plugin XYZ
and change the reading direction to RTL?

Meh.

The JAM Stack

Javascript
API
Markup

https://jamstack.org/

https://www.staticgen.com/

https://headlesscms.org/

https://www.netlify.com/blog/2017/05/25/top-ten-static-site-generators-of-2017/

Static site Generators

"prebuild all the things"

• Jekyll (Ruby)
• Metalsmith (JS) 
• Punch.js (JS)
• Hexo (JS)
• Kirby (PHP)
• Hugo (Go)
• Pelican (Python)

Look Ma, I did not even install PHP on the server!

Great! Can you please add this
dynamic fancy calendar widget on every page?

DOH!

Static site Generators

how they all work.

• Create layout in <template-lang>
• Create content in <markdown-flavor>
• Create assets in <css-renderer>
• Commit everything in git.

• $ npm run <build-cmd>
• => static site content is generated in /<public-dir>

• <upload-tool> them to <static-web-space>
• profit.

Nextgen
App generators

• Next.js (React)
• Nuxt (Vue)
• Gatsby (React)

Static!

Components!

CSSinJS!

Complex Content!

Prefetching!

CSS Inlining!

Asset pipelining!

Progressive!

One cannot put security issues

into plain html files

Gatsby

• ReactJS ftw!
• GraphQL ftw!

• Serverside rendering API
• Many starter templates 
• CSSinJS as a default (Scss still possible!)
• Plays nicely with Headless CMS (Contentful)
• complex client routing and "logged in" experiences 

https://www.gatsbyjs.org/features/

Gatsby

just the highlights

Building blocks

• layouts define wrapper components for pages
• templates used to generate pages out of queries on build time
• pages can be created
  • manually as React component in pages
  • by the gatsby/createPages API
• data sources are queried by GraphQL
  • markdown, json, contentful, netlify CMS, strapi
  • only on pages & layouts, not in components
• assets by default are built by  webpack 
• picks up environment variables, e.g. for staging envs
• support for SSR and API proxying

pick your source(s)

• filesystem
• contentful
• wordpress
• drupal
• hacker-news
• medium
• mongodb
• prismic.io
• strapi
• google sheets
• pocket
• twitter
• apiserver
• ...

Developers First!

• "zero conf" approach, everything works after
  • gatsby new project <starter-tpl>
• no React surprises
• HMR activated out of the box
• opinionated prod optimizations in place
• 4 entry points to add hooks and plugins
• asset pipeline picks up your assets

  • import 'font-awesome/css/font-awesome.css'

• encourages you to use CSSinJS (unicorns!)

Generate them all

• there are no "Ajax" queries that fetch data (!)
• transformations are executed on build time
• client-only-routes (the frontend still is React!)

✔ 15:17:48 devday.io [master ✔] $ gatsby build
success delete html and css files from previous builds — 0.057 s
success open and validate gatsby-config — 0.007 s
success copy gatsby files — 0.016 s
success onPreBootstrap — 0.337 s
⠁ Starting to fetch data from Contentful
Fetching default locale
⠄ source and transform nodesdefault local is : de
⠠ source and transform nodescontentTypes fetched 1
Updated entries  2
Deleted entries  0
Updated assets  0
Deleted assets  0
Fetch Contentful data: 283.941ms
success source and transform nodes — 0.345 s
success building schema — 0.171 s
success createLayouts — 0.009 s
success createPages — 0.001 s
success createPagesStatefully — 0.014 s
success onPreExtractQueries — 0.002 s
success update schema — 0.097 s
success extract queries from components — 0.052 s
success run graphql queries — 0.105 s
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 2.911 s

success Building CSS — 6.289 s
success Building production JavaScript bundles — 11.470 s
success Building static HTML for pages — 3.894 s
info Done building in 24.567 sec
✔ 15:18:18 devday.io [master ✔] $ gatsby serve
┌───────────────────────────────────────────────────┐
│                                                   │   
│   Serving!                                        │   
│                                                   │   
│   - Local:            http://localhost:9000       │   
│   - On Your Network:  http://192.168.60.99:9000   │   
│                                                   │   
│   Copied local address to clipboard!              │   
│                                                   │   
└───────────────────────────────────────────────────┘

GraphQL

https://www.howtographql.com/

GraphQL in gatsby

• everyhting outside Gatsby is considered "data"
• Gatsby queries all data using GraphQL
• query results are automatically injected in components
• GraphiQL built in! (http://localhost:8000/___graphql) 

GraphQL: first class

import React from 'react'
import Link from 'gatsby-link'
import { Container, Title, Hero, HeroBody } from 'bloomer'
import MasterTeaser from '../components/MasterTeaser';


const IndexPage = ({data}) => {
  return <div>
    <MasterTeaser content={data.masterTeaser.html}/>
    </div>;
}

export default IndexPage

export const query = graphql`
  query IndexQuery {
    
    masterTeaser: markdownRemark(id: {regex: "/masterTeaser/"}) {
      ...MasterTeaser
    }

    talks: allContentfulTalk {
      edges {
        node {
          id
          title
          slotTime
          location
          speakerName
          speakerPosition
          createdAt
        }
      }
    }
}
`

Deployment

The "server" in serverless

"Deployment" means

Copy all the files.

Some Options

• Zeit.co Now
• Netlify
• Github Pages
• S3
• Surge
• pancake.io, paperplane.io
• (heroku)

Github
Contentful
Netlify

Contentful

Headless CMS

• declare content types ("schema")
• add constraints and validators
• frontends are automatically created 
• let your users edit content
   
• add webhooks to notify systems when content has changed
• (you could also use plain old REST APIs :) )
• (don't like this vendor? use https://strapi.io/)

Netlify

CI, CDN, static sites
& Serverless services.

• simple build pipeline with autodetection
• massive support for hooks
• web server configuration possible (headers)
  
  Services you might love:
• Netlify Serverless (0 conf AWS Lambda)
• Netlify Forms
• Netlify CMS
• Netlify ID (login)

Flows

• push sources to github
  (or modify master directly :D )
• create netlify app, connect it to github repo
• if master has changed, deployment starts

• publish contentful content
• webhook pings netlify
• netlify redeploys site

• notify Slack :)