99. JAMstack with J.A.M.

We learn all about JAMstack in real-time as Michael lowers the bar with new jokes, Allen submits a pull request, and Joe still owes us a tattoo.

If you’re reading these show notes via your podcast player, be sure to head to https://www.codingblocks.net/episode99 to find this episode’s full show notes and join in on the conversation.

Sponsors

• Datadog.com/codingblocks – Sign up today for a free 14 day trial and get a free Datadog t-shirt after creating your first dashboard.
• Clubhouse – The first project management platform for software development that brings everyone on every team together to build better products. Sign up for two free months of Clubhouse by visiting clubhouse.io/codingblocks.

Survey Says

News

• As always, we like to take a moment to thank everyone left us a review:
  • iTunes: scoobybejesus, MikeMacDev, krauseling
  • Stitcher: Mackiovello, askerov, BrickGW
  • Email: Travis T.
• The Coding Blocks crew will be at the Orlando Code Camp on March 30th, 2019. Come find us so you can kick Joe in the shins!

JAMstack

What is it?

• JavaScript + APIs (re-usable) + Markup
• “Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.” – JAMstack.org
• Pioneered by companies like Netlify, who specialize in hosting static sites and upselling optional services like authentication, forms, and serverless functions.
• There are no prescribed technologies aside from JavaScript.
  • Defined more by what it’s NOT
• Challenges include permissions, real-time persistence, user friendly admin-y things

JavaScript

• Client-Side JS focus (though the tools you use to build will likely be different).
• Framework agnostic, even works with vanilla JavaScript.
• No server side rendering, in fact no server side at all!
• Authentication is handled outside the app, like an API.

APIs

• All server-side processes or persistence are abstracted into APIs.
• All APIs are accessed over HTTPS from the JS.
• Treat your own server-side components as 3p.

Markup

• Templated markup should be prebuilt at deploy time.
  • Usually using a site generator or build tool.

Why is this a thing?

• Because static sites have gotten more powerful
• Progressive Web Apps (PWA)
  • Better front end tools/frameworks like Babel, React, or Vue.
  • More and more SAAS and Cloud components commoditizing services, such as Let’s Encrypt for SSL/TLS certificates, Stripe for payments, the various OAuth services offered by companies like Google or Facebook, and webhooks.

Why JAMStack?

• Can’t beat web performance via static files/CDN.
• Cheaper scaling and hosting because scaling and hosting equal CDNs.
  • Perfect for side projects!
• Better Developer experience.
  • Loose coupling.
  • Targeted coding and debugging.
• Simpler, less stuff to learn and maintain.
• Security
  • Compare a JAMstack security footprint to your LAMP security footprint (patches, credentials, open ports, etc.)

Best Practices:

• The app should be distributed on a CDN.
  • The more app/content on the edges, the better the UX.
• Modern Build Tools: Babel, WebPack, Gatsby, etc.
• Everything you need to run the app lives in a single git repository. Simple npm install to run the app.
• Focus on automated builds
  • There is less emphasis on persistence, so changes generally need to be deployed.
• Atomic deploys (deploy everything at once instead of file by file).
• Instant cache invalidation.
  • Use a CDN that can handle instant cache purges.
• Static doesn’t mean “no tests”.

Downsides

• Scales great for users…but how do large projects scale for devs?
• Steep learning curve for non-devs.
• Heavily dynamic pages.

Resources We Like

• JAMstack (jamstack.org)
• JAMstack Examples (jamstack.org)
• JAMstack Resources (jamstack.org)
• What is JAM Stack (dev.to)
• The Sweetness of JAMstack: JavaScript, APIs, and Markup (thenewstack.io)
• These Shocking WordPress Stats Will Actually Make Your Head Spin. (whoishostingthis.com)
• 14 Surprising Statistics About WordPress Usage (managewp.com)

Tip of the Week

• Practice all year long by solving past Advent of Code problems. (adventofcode.com)
• Find amazing local (!) deals on the Facebook Marketplace. (facebook.com)
• C# code snippets in Visual Studio. (docs.microsoft.com)

Episode source