Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
JAMstack Cheatsheet
Slide 2
Slide 2 text
Pedro Duarte @PEDUARTE
Slide 3
Slide 3 text
Product Engineer Modulz
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
JAMstack is revolutionising the way we think about workflow.
Slide 11
Slide 11 text
Table of contents What is JAMstack? Meaning Benefits Best practices Workflow Timeline Getting started Development Deployment Dynamic parts CMS The “traditional” workflow
Slide 12
Slide 12 text
The “traditional” workflow
Slide 13
Slide 13 text
Monolithic architecture
Slide 14
Slide 14 text
Isomorphic rendering
Slide 15
Slide 15 text
Server side CMS
Slide 16
Slide 16 text
What is JAMstack?
Slide 17
Slide 17 text
MEANING
Slide 18
Slide 18 text
MEANING
Slide 19
Slide 19 text
Javascript MEANING
Slide 20
Slide 20 text
APIs MEANING
Slide 21
Slide 21 text
Markup MEANING
Slide 22
Slide 22 text
BENEFITS
Slide 23
Slide 23 text
Faster performance BENEFITS
Slide 24
Slide 24 text
More secure BENEFITS
Slide 25
Slide 25 text
Less expensive BENEFITS
Slide 26
Slide 26 text
Better developer experience BENEFITS
Slide 27
Slide 27 text
Scalability BENEFITS
Slide 28
Slide 28 text
BEST PRACTICES
Slide 29
Slide 29 text
Content delivery network BEST PRACTICES
Slide 30
Slide 30 text
Atomic deploys BEST PRACTICES
Slide 31
Slide 31 text
Cache invalidation BEST PRACTICES
Slide 32
Slide 32 text
Everything in Version Control BEST PRACTICES
Slide 33
Slide 33 text
Automated builds BEST PRACTICES
Slide 34
Slide 34 text
WORKFLOW
Slide 35
Slide 35 text
WORKFLOW
Slide 36
Slide 36 text
WORKFLOW
Slide 37
Slide 37 text
TIMELINE
Slide 38
Slide 38 text
TIMELINE
Slide 39
Slide 39 text
TIMELINE
Slide 40
Slide 40 text
TIMELINE
Slide 41
Slide 41 text
TIMELINE SOURCE: SNIPCART
Slide 42
Slide 42 text
Getting started
Slide 43
Slide 43 text
DEVELOPMENT
Slide 44
Slide 44 text
Hand coding DEVELOPMENT
Slide 45
Slide 45 text
Static Site Generators DEVELOPMENT
Slide 46
Slide 46 text
DEVELOPMENT
Slide 47
Slide 47 text
Frontend Frameworks DEVELOPMENT
Slide 48
Slide 48 text
DEVELOPMENT
Slide 49
Slide 49 text
DEPLOYMENT
Slide 50
Slide 50 text
DEPLOYMENT
Slide 51
Slide 51 text
DYNAMIC PARTS
Slide 52
Slide 52 text
Custom functions DYNAMIC PARTS
Slide 53
Slide 53 text
Third party APIs DYNAMIC PARTS
Slide 54
Slide 54 text
CMS DYNAMIC PARTS
Slide 55
Slide 55 text
Wrapping up
Slide 56
Slide 56 text
Dynamic WRAPPING UP
Slide 57
Slide 57 text
Not static site generators WRAPPING UP
Slide 58
Slide 58 text
Ideology WRAPPING UP
Slide 59
Slide 59 text
Flexible architecture WRAPPING UP
Slide 60
Slide 60 text
jamstack.wtf
Slide 61
Slide 61 text
Thank you PEDRO DUARTE @PEDUARTE