Una introducción al nuevo stack para generación de sitios estáticos JAM (JavaScript, API y Markdown). Como funciona, ejemplos de usos y por qués.

1. Introducción al
JAM Stack
@carlosazaustre
Frontend Developer
April 2019

2. /Me
Dad
BSc. Telematic Engineering
@ UC3M
Frontend Engineer
@ IBM Research
#JavaScript #Vue #Node #WebComponents
Co-Organizer of
Cloud Developer Community Madrid
NodeSchool Madrid
MadridTech Alliance
#EStreamerCoders

3. What is a Stack?
A tech stack is a combination of software
products and programming languages used
to create a web or mobile application.
“

4. What is a Stack?
A tech stack is a combination of software
products and programming languages used
to create a web or mobile application.
“LAMP
Linux
Apache
MySQL
PHP
MEAN
Mongo
Express
Angular
Node
MERN
Mongo
Express
React
Node
VENoM
Vue
Express
Node
Mongo

5. What is JAM?
J
A
M

6. What is JAM?
JavaScript
A
M

7. What is JAM?
JavaScript
API
M

8. What is JAM?
JavaScript
API
Markdown

9. How works?
JavaScript API Markdown
Reactive Web
Page
Data Source /
User Interaction /
Third party API
Source:
https://www.youtube.com/watch?v=Y8PXMbr0Kqo
Content

10. How works?
JavaScript API Markdown
Reactive Web
Page
Data Source /
User Interaction /
Third party API
Source:
https://www.youtube.com/watch?v=Y8PXMbr0Kqo
Content
SPA - Fetch data at
runtime
- Store data
Pull
Content

11. How works?
JavaScript API Markdown
Reactive Web
Page
Data Source /
User Interaction /
Third party API
Source:
https://www.youtube.com/watch?v=Y8PXMbr0Kqo
Content
SPA - Fetch data at
runtime
- Store data
Pull
Content

12. How works?
JavaScript API Markdown
Reactive Web
Page
Data Source /
User Interaction /
Third party API
Source:
https://www.youtube.com/watch?v=Y8PXMbr0Kqo
Content
SPA - Fetch data at
runtime
- Store data
Pull
Content
Static
Page
GeneratorStatically Generated Webpage
Generate
static HTML
Turns into
SPA
after
initial
load

13. Examples
More on staticgen.com

14. Examples
More on staticgen.com

15. Examples
More on staticgen.com

16. Examples
More on staticgen.com

17. Examples
More on staticgen.com

18. Examples
More on staticgen.com

19. Why?
● SEO
● Performance
● Deployment
○ Atomic Deploys
○ Automated builds
● Serverless Services

20. Why?
Source: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Server-Side Rendering
(SSR)
Client-Side Rendering
(SPA)
Static Rendering

21. More
Headless CMS
● No Front-End
● REST API Based
● Git Based
● Full CMS functionality
headlesscms.org

22. More
Headless CMS
● No Front-End
● REST API Based
● Git Based
● Full CMS functionality
headlesscms.org

23. More
Headless CMS
● No Front-End
● REST API Based
● Git Based
● Full CMS functionality
headlesscms.org

24. Developer Experience
Local Cloud
Build
Static
Server
GIT Build CDN

25. Headless Content
Local Cloud
Build
Static
Server
GIT Build CDN
Content APIs

26. More Resources
What is JAMStack:
https://www.youtube.com/watch?v=Y8PXMbr0Kqo
JAMStack: New kid on the block
https://www.youtube.com/watch?v=PzXpCNBcofw
JAMStack HTTP 203
https://www.youtube.com/watch?v=QXsWaA3HTHA
JAMStack the total victory of JavaScript
https://www.youtube.com/watch?v=vOUcPI2mljU&t=823s
jamstack.org

27. Thanks!
@carlosazaustre
https://carlosazaustre.es
https://youtube.com/carlosazaustre
https://twitch.tv/carlosazaustre