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
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
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
20. Authentication Microservice
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
50. Decoupled E-commerce
52. Handle 200,000 comments!
53. Building an Open-Source Eco-System
55. Let’s Continue The Talk! #JAMstack jamstack.org gitter.im/jamstack/community @biilmann