An exploration in JAMstack: Building consultlowtide.ca

June 21, 2019
frontend vue JAMstack

background

What is JAMstack?

JavaScript, API & Markup. Per CEO & Co-founder of Netlify Mathias Biilmann:

"[JAMstack is] a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup."

JavaScript

Dynamic functionality is handled by JavaScript. There are no restrictions to which framework or libraries are available. In the case of this site, I've opted for Gridsome.

  • It's lightning fast and highly performant.
  • Has a great developer experience built around Vue and GraphQL.
  • Allows for easy (and free!) deployments and hosting through GitHub Pages.

APIs

Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services (like the FormSpree form on the contact section of this site!) or custom functions you deploy to Netlify Functions, AWS Lambda, or Microsoft Azure Functions. These services afford us API endpoints which invoke a JavaScript functions when called. This "serverless" architecture allows us to scale quickly without maintaining a back-end codebase!

Markup

Every page on this site is served as a static HTML file. These are generated from source files, in this case Markdown. Gridsome eats up my Markdown via GraphQL (this could easily be calling a content API like SiteLeaf) and pipes the data into our own templates. These statically generated pages can be combined with the power of Vue to bring the best parts of Single Page Applications and Server Side Rendering together at last.

What's the workflow?

  • Local development - From writing this blog post in markdown to developing the Vue components, layouts and pages, local development is friendly and approachable.
  • Version Control and Continous Deployments from GitHub - Pushes to this site's public GitHub repo trigger automated builds, generation of static assets, and deployments to GitHub Pages' CDN.
  • Highly Available, Cached CDN Hosting - GitHub Pages, Netlify, surge.sh, and others allow our sites to load lightning fast no matter the amount of (or spikes in) request traffic.

Like what you see?

Please, reach out!

Back to Blog