What the JAMstack?

9f4dcab6a0fc5889de79521bf35e49c4?s=47 Frontend NE
January 03, 2019

What the JAMstack?

This talk will covers the basics of JAMstack i.e. what it is, why it’s becoming so popular and also some of the potential drawbacks with using JAMstack.

It will then follow up with a short demonstration of a project using Gatsby and showcase how this fits into the JAMstack and why it is proving to be a success.

9f4dcab6a0fc5889de79521bf35e49c4?s=128

Frontend NE

January 03, 2019
Tweet

Transcript

  1. What the JAMstack? Jamie Bradley @jamiebradley234 @hello_endeavour

  2. None
  3. Founded in 2017 Javascript Contractor/ Freelancer Sky, DWP, ZeroLight, Increment

    By One, PrimitiveSense, Layers & More! React, WordPress, Shopify, UI Frameworks, JAMstack(2019) Moved into Boho5 February 2018 https://endeavour-digital.com
  4. What is JAMstack?

  5. None
  6. Static Website Architecture

  7. I PROMISE I’M NOT SPONSORED I JUST ❤ NETLIFY

  8. – jamstack.org “Modern web development architecture based on client-side JavaScript,

    reusable APIs, and prebuilt Markup”
  9. Any dynamic programming during the request/ response cycle should be

    handled by JavaScript, which only runs on the client. This includes the use of a JavaScript framework/ library or vanilla JS. JavaScript
  10. Server-side processes or database actions should be abstracted into reusable

    APIs. APIs are accessed over HTTPS with JavaScript. This includes third party APIs such as Stripe or Contentful and custom-built APIs. APIs
  11. Markup should be templated and pre-built at deploy time. We

    can achieve this with Static Site Generators (such as Jekyll, Hugo, Gatsby etc) or a Build Tool such as Webpack or Gulp. Markup
  12. https://www.staticgen.com/

  13. When is my site NOT built with JAMStack?

  14. DB Server Web Server API " # Data fetched with

    Client Side JavaScript e.g. Instagram Posts HTML, CSS, JS Query DB for Content Return Content to Web Server GET https://my-site.com High Level Example: Website Built with Server Side CMS (LAMP)
  15. When is my site NOT built with JAMstack? • A

    site purely built with a server-side CMS e.g. Craft CMS etc • A single page app that uses isomorphic rendering to build views on the server at runtime. • A monolithic server-run web app that relies on Ruby, Node, or another backend language.
  16. Content API API " # Change to website pushed to

    GIT by developers or content change made by content team Instruction sent to Netlify (via a web hook) to trigger a build/deploy Data requested from Content API Data returned to Netlify CDN CI GET https://my-site.com HTML, CSS, JS Data fetched with Client Side JavaScript e.g. Instagram Posts JAMstack Site Built with Headless CMS
  17. WHY?

  18. Security %&

  19. • No direct interaction with Database, your website is just

    static HTML. Reduced Attack Vectors. • Think of a Bridge [Reminder for Jamie ] • Leverage domain expertise of specialist third-party services. %&
  20. JAMstack does indeed move complexity elsewhere. It moves it out

    of the critical path at request time. It moves it out of your area of responsibility. And it moves it over to domain experts who offer specialised services as commodities. It is perfectly possible that complexity still exists. but we don’t need to shoulder that burden. In the same way as wireless routers depend on wires. And serverless functions run on servers. Somewhere. But not in my house :) Phil Hawksworth https://medium.com/@philhawksworth/jamstack-does-indeed-move-complexity- elsewhere-e34b62bd66df %&
  21. Cheaper Hosting!

  22. • Affordable services. • Cheaper to scale. • Simpler site,

    more secure, easier to maintain. • Less unpredictable expenses.
  23. Better Performance ⚡

  24. • Serve pre-built Markup. • Atomic Deployments - reduced downtime

    • Instant Cache Invalidation • Hosted on a CDN • Smashing Magazine noted a 10x boost in Performance ⚡
  25. Your Sanity

  26. • Everything lives in Git. • More flexibility with Technical

    Decisions • Build with whatever you like
  27. TRADE OFFS?

  28. None
  29. Global ADN Automated Deployments Works with GIT GitLab/Github/Bitbucket HTTPS is

    Automatic Lambda Functions Identity API Forms API
  30. None