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

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