About me

• Software Engineer
• Mostly work on the backend
  • Really enjoy automating workflows

Primarily PHP/Python

Drupal

• Least loved

• Least wanted

• Most dreaded

WTF is JAMstack?

History lesson

How did we get here?

• Static sites used to suck and be time consuming
  • Manually writing (or copy-paste) the html for each page
  • Nothing dynamic
• Sites are built using a traditional CMS (like Drupal)
  • Rendering content is slow
  • caching
  • cdn
  • $$$

What is out there?

• httrack
  • Just crawling site - nothing dynamic
• Static Site Generators (like Jekyll)
  • Now we're getting more dyamic content
• JAMStack
  • Gatsby (React)
  • Gridsome (Vue.JS)

JAM Stack

• Javascript
  • What else?
• APIs
  • Build out the content using APIs
• Markup
  • Prebuild content

Why?

• Fast
  • Serving static assets is fast. Put in a CDN to make it faster
  • Use it to bootstrap your headless Drupal for something more advanced
• Secure
  • No need to worry about server or database vulnerabilities
• Cheaper
  • Host on github or gitlab pages if you wanted!

Better dev experience

• Point to source content (db, api calls, etc)
• Focus on making a kickass frontend with new technologies

My use case

• Blog (Drupal 8)
  • Server-side rendering (and caching)
• Interested in JAMstack and heard about Gatsby
  • More interested in VueJS

• Use a source (Drupal, Markdown, DB, etc)
• Generate a GraphQL db of content
• Generate your pages using Vue
• Deploy (netflify, cdn, server, etc)

Plan

• Use Drupal as source
  • Used to it
  • Move to a pw protected domain
• Expose JSON endpoints
• Let Gridsome graphql consume data
  • Use vuejs
• Replace website!

Demo / Code walkthrough

Getting content from Drupal

• Used an existing Drupal source plugin to get content
  • https://gridsome.org/plugins/@gridsome/source-drupal
• Required JSON API
  • "One click install" in Drupal 8
• Set up gridsome.config.js and gridsome.server.js

Displaying content

• Looking at Vue
• Don't mind how terrible it looks!

Deploying

• Gitlab (with gitlab pipelines)
• Wrote Drupal module to trigger Gitlab deploy
  • Deploys to personal server

What I enjoyed

• Its really nice to be able to focus on the frontend
  • Site is fast
  • Site is secure
• For small sites this is def. a good alternative
• For large sites...story for another time :)

Next steps

• Maybe try out Netlify?
  • Netlify CMS?
• Learn more about Vue ecosystem to move forward
  • API call to create contact form
• Use Sass? Something else?

  • "I have new ways to generate everything but my sites will still look like shit"