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

A731bc19c3b04919610fcee6d0589914?s=128

Mathias Biilmann

September 11, 2017
Tweet

Transcript

  1. The JAMstack Matt Biilmann, 2017

  2. Matt Biilmann CEO, Netlify

  3. Publishing for the modern web

  4. Building thousands of websites 7 years in Spain, 2 CMSs,

    10k+ websites
  5. Building a fully hosted CMS Moved to the Bay Area,

    built a managed CMS for the legacy stack
  6. Trends: Git, MicroServices, JS Modern Javascript (ES6) Microservices Git vs

    FTP
  7. 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
  8. 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.
  9. Performance 4% of people have thrown their phone while using

    a slow mobile site
  10. Reliability

  11. 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
  12. = 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
  13. None
  14. None
  15. Wordpress Shopify Rails Kirby Magazine Shop Job Board Conference

  16. Wordpress Shopify Rails Kirby Magazine Shop Job Board Conference Memberships

    ?????
  17. Building an Open-Source Eco-System

  18. Browser Front-end Hugo + Webpack GitHub Netlify CMS A Smashing

    Architecture Micro Services
  19. None
  20. Authentication Microservice

  21. None
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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)
  27. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    ?
  28. API Authentication GET /api/v1/sites HTTP/1.1 Host: api.example.com Authorization: Bearer abcd1234

    SPA BROWSER CDN API How do we get an access token?
  29. API Authentication SPA BROWSER CDN API OAuth2 Auth flow options:

    Resource Owner Password Credentials Implicit Grant Authorization Code
  30. API Authentication SPA BROWSER CDN API Browser Server Request (Token)

    DB Lookup Session Response (JSON)
  31. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    ?
  32. Authenticating - SPA API

  33. Authenticating - JAMstack API API API API API

  34. Authenticating - JAMstack API API API API API

  35. Authenticating - JAMstack API API Auth API API API API

    • Tight Coupling • Single Point of Failure • Slow Performance
  36. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    JWT
  37. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    https://tools.ietf.org/html/rfc7519
  38. 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
  39. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    What is a JWT? Header Payload Signature
  40. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

  41. 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
  42. Authenticating - JAMstack API API Auth API API API API

  43. API API API API API Auth API JWT JWT JWT

    JW T JWT JW T
  44. JWT Authentication SPA BROWSER CDN API Browser API Request (JWT)

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

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

    API Proxy (token) Response (JSON) Verify Signature + Claims
  47. Netlify Identity

  48. Content Management

  49. None
  50. Decoupled E-commerce

  51. None
  52. Handle 200,000 comments!

  53. Building an Open-Source Eco-System

  54. None
  55. Let’s Continue The Talk! #JAMstack jamstack.org gitter.im/jamstack/community @biilmann