Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The JAMstack - Smashing Conf Freiburg 2017

The JAMstack - Smashing Conf Freiburg 2017

The emergence of Git centered workflows, around modern build tools, static site generators and modern browsers, have changed the way most front-enders work.

In this talk Matt does a deep dive into the JAMstack and walks through several of the open-source tools built during the production of the next version of Smashing Magazine

Mathias Biilmann

September 11, 2017
Tweet

More Decks by Mathias Biilmann

Other Decks in Programming

Transcript

  1. Building a fully hosted CMS Moved to the Bay Area,

    built a managed CMS for the legacy stack
  2. For the last 15 years the web has been built

    on the fly, causing ever increasing issue with: Security 7% of all legacy sites hacked Performance Single origin, builds for every visitor, low conversion Scalability Infrastructure needs scaling up front The Web Needs a Paradigm Shift
  3. Security In February, 1.5 million web pages across about 40,000

    websites got defaced on a single day. In April a separate attack left 120,000 sites vulnerable. Last month, a vulnerability in a plugin left more than 300,000 legacy sites open to attacks.
  4. The Evolution of the Web Unix Model Legacy Web (The

    site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES
  5. = A New Stack Decoupled Architecture Git Centric Workflow A

    Better Web + 10x Faster No more malware Infinitely scalable Browser Client Build Tool Services Git Continuous Delivery CDN
  6. The Evolution of the Web Unix Model Legacy Web (The

    site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES
  7. Authenticating - Client <-> Server Unix Model Legacy Web (The

    site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES Stateful Protocol
  8. Authenticating - Client <-> Server Unix Model Legacy Web (The

    site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES Client Server user/pw Session
  9. Authenticating - Web Monolith Legacy Web (The site needs to

    be built EVERY time it’s served) Modern Web ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT CDN SERVICES HTTP - Stateless Protocol
  10. Authenticating - Web Monolith Legacy Web (The site needs to

    be built EVERY time it’s served) Modern Web ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT CDN SERVICES Browser Server user/pw Request (Cookie) DB User Lookup Create Session Session ID (Set-Cookie) Lookup Session Response (HTML)
  11. API Authentication SPA BROWSER CDN API OAuth2 Auth flow options:

    Resource Owner Password Credentials Implicit Grant Authorization Code
  12. Authenticating - JAMstack API API Auth API API API API

    • Tight Coupling • Single Point of Failure • Slow Performance
  13. Authenticating - JWTs t Modern Web CLIENT CDN SERVICES What

    is a JWT? •A JWT is just string •It has 3 parts: header.payload.signature •It is signed with a secret and can be verified
  14. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    What is a JWT? •Token identifies user (“sub” claim) •Token can authorize the user (“trust”) •Token can include display data
  15. JWT Authentication SPA BROWSER CDN API Browser API Request (JWT)

    Response (JSON) Verify Signature + Claims
  16. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    API Gateways Kong Gotiator AWS API Gateway Netlify Microservice Gateway
  17. API Authentication SPA BROWSER CDN API Browser Gateway Request (JWT)

    API Proxy (token) Response (JSON) Verify Signature + Claims