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. The JAMstack
    Matt Biilmann, 2017

    View Slide

  2. Matt Biilmann
    CEO, Netlify

    View Slide

  3. Publishing for the modern web

    View Slide

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

    View Slide

  5. Building a fully hosted CMS
    Moved to the Bay Area, built a managed CMS for the legacy stack

    View Slide

  6. Trends: Git, MicroServices, JS
    Modern Javascript (ES6)
    Microservices
    Git vs FTP

    View Slide

  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

    View Slide

  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.

    View Slide

  9. Performance
    4% of people have thrown their phone while using
    a slow mobile site

    View Slide

  10. Reliability

    View Slide

  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

    View Slide

  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

    View Slide

  13. View Slide

  14. View Slide

  15. Wordpress
    Shopify
    Rails
    Kirby
    Magazine
    Shop
    Job Board
    Conference

    View Slide

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

    View Slide

  17. Building an Open-Source Eco-System

    View Slide

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

    View Slide

  19. View Slide

  20. Authentication Microservice

    View Slide

  21. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  27. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    ?

    View Slide

  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?

    View Slide

  29. API Authentication
    SPA
    BROWSER
    CDN API
    OAuth2
    Auth flow options:
    Resource Owner Password Credentials
    Implicit Grant
    Authorization Code

    View Slide

  30. API Authentication
    SPA
    BROWSER
    CDN API
    Browser Server
    Request (Token)
    DB
    Lookup Session
    Response (JSON)

    View Slide

  31. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    ?

    View Slide

  32. Authenticating - SPA
    API

    View Slide

  33. Authenticating - JAMstack
    API
    API
    API
    API
    API

    View Slide

  34. Authenticating - JAMstack
    API
    API
    API
    API
    API

    View Slide

  35. Authenticating - JAMstack
    API
    API
    Auth API
    API
    API API
    • Tight Coupling
    • Single Point of Failure
    • Slow Performance

    View Slide

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

    View Slide

  37. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    https://tools.ietf.org/html/rfc7519

    View Slide

  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

    View Slide

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

    View Slide

  40. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES

    View Slide

  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

    View Slide

  42. Authenticating - JAMstack
    API
    API
    Auth API
    API
    API API

    View Slide

  43. API
    API
    API
    API
    API
    Auth API
    JWT
    JWT
    JWT
    JW
    T
    JWT
    JW
    T

    View Slide

  44. JWT Authentication
    SPA
    BROWSER
    CDN API
    Browser API
    Request (JWT)
    Response (JSON)
    Verify Signature + Claims

    View Slide

  45. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    API Gateways
    Kong
    Gotiator
    AWS API Gateway
    Netlify Microservice Gateway

    View Slide

  46. API Authentication
    SPA
    BROWSER
    CDN API
    Browser Gateway
    Request (JWT)
    API
    Proxy (token)
    Response (JSON)
    Verify Signature +
    Claims

    View Slide

  47. Netlify Identity

    View Slide

  48. Content Management

    View Slide

  49. View Slide

  50. Decoupled E-commerce

    View Slide

  51. View Slide

  52. Handle 200,000 comments!

    View Slide

  53. Building an Open-Source Eco-System

    View Slide

  54. View Slide

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

    View Slide