Vibe Coding Forem

CodingBlocks

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

Anonymous Vote
Sign in with Wordpress
What do you think of JAMStack?
  • It's like, the future, yo.
  • Eh, I'll let this front-end fad pass and maybe grab on to the next one.
  • You can pry the back-end from my cold dead hands.
vote

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

Tip of the Week

Episode source