1 of 33

Breaking Down Best Practices for JAMstack

A PRESENTATION BY JEMIMA ABU

2 of 33

Jemima Abu:

  • Frontend Developer
  • Systems Engineering student
  • Aspiring cat lady
  • Huge nerd

3 of 33

Here’s what we gon learn:

  • Importance of JAMstack best practices
  • Setting up a CDN on your JAMstack application
  • Linking your preferred version control system
  • Setting up automated builds
  • Using modern build tools
  • Invalidating cached versions of your application

4 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

5 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

6 of 33

What’s a CDN?

Content Delivery Network

Connected network of distributed servers

Stores your site’s assets on their servers

Browser requests are made to the CDN

Content is returned from the server closest to the user

7 of 33

How To Setup A Content Delivery Network

  • Register your site on chosen CDN platform.�
  • Set up pull zone where your files will be downloaded from�
  • Change the origin URL in your source code to the CDN URL

<img src=”my-url/images/img.jpg />�<img src=”cdn-url/images/img.jpg/>

​

8 of 33

Some CDN Providers

  • Akamai
  • AWS CloudFront
  • Cloudflare
  • Microsoft Azure
  • Stackpath
  • Verizon EdgeCast

9 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

10 of 33

Using Version Control

​

​

Keep track of changes made in code

Stores code in online repository for easy access

Allows for easier collaboration on projects

Can have multiple branches of code

11 of 33

Using Version Control

​

​

12 of 33

Linking Version Control to Deployment Platform

  • Create a repository on your version control system�
  • Push code to the repository�
  • Google `how to deploy from ${versionControl} to ${deploymentPlatform}`

​

13 of 33

Some Version Control Systems

  • Bitbucket
  • Github
  • Gitlab
  • Microsoft Team Foundation Server

14 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

15 of 33

Automated Builds

Build - a whole bunch of processes at the final stage of an app

running tests, compiling files, updating databases etc

server is notified when a new build is required

server builds the project, updates the CDNs and the site is live

16 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

17 of 33

Build Tools

automation of repetitive tasks

converting and compiling stylesheets

minifying stylesheets and scripts

bundling modules

18 of 33

Using Modern Build Tools

  • Use standard versions�
  • Minimize your build tools�
  • Choose the tool best suited to your purpose

19 of 33

Using Modern Build Tools

  • Webpack - reloading changes made to JavaScript or CSS.
  • Grunt - configuring independent tasks requiring different files.
  • Gulp - repetitive work on Node streams.
  • Browserify - packaging node.js modules for browsers.
  • Brunch - setting up new large projects from scratch
  • Yeoman - remaking a basic setup

Source: https://hackernoon.com/javascript-build-tools-and-automation-systems-9589c5c91ebe

20 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

21 of 33

Atomic Deploy

Atomicity - either completely executed or not executed at all

​

Update live server only after successful deployment

Rolls back to previous release on failed deployment

So, like, no downtime between releases

22 of 33

Setting Up Atomic Deployment

  • Use a provider that offers atomic deployment.
  • That’s it. That’s the easiest way.
  • I mean, you could create your own releases, shared and current directories.
  • Configure your application web root to target the release in current.
  • Store constant resources inside the shared directory and previous releases in the releases dir.
  • Write a script so that when a new release is deployed the codebase will be checked out into a new, timestamped directory within releases.
  • Finally, once the new release is ready, update the current symlink target and restart the web server in order for the release to go live.

23 of 33

But why would you want to do a thing like that?!

24 of 33

Atomic Deployment Providers

  • Buddy
  • DeployBot
  • DeployHQ
  • Netlify

25 of 33

Best Practices

Content delivery network

Everything in version control

Automated builds

Modern Build Tools

Atomic deploys

Cache invalidation

26 of 33

Cache Invalidation

removing or replacing content stored in cache

​

purge - remove content from caching proxy immediately

refresh - fetches requested content directly from the app

ban - reference to cached content is added to ban list

27 of 33

“ There are only two hard things in Computer Science: cache invalidation and naming things. ”

​

— PHIL KARLTON

​

28 of 33

How Exactly Do We Invalidate Cache?

29 of 33

Alternatives to Cache Invalidation

Set cached content to expire quickly by reducing time-to-live

​

validate the freshness of cached content at every request

don’t cache content at all

30 of 33

Basically

​

​

Source: https://www.netlify.com/blog/2015/09/11/instant-cache-invalidation

31 of 33

Demo…?

32 of 33

Resources

  • https://css-tricks.com/adding-a-cdn-to-your-website/
  • https://hackernoon.com/javascript-build-tools-and-automation-systems-9589c5c91ebe
  • https://stevegrunwell.com/blog/atomic-deployments-from-scratch/

​

33 of 33

That’s All Folks!

www.jemimaabu.com�Website

@jemimaabu�Everywhere else