Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Introducción al JAMStack - JS Ourense

346 visualizaciones

Publicado el

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.

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Introducción al JAMStack - JS Ourense

  1. 1. Introducción al JAM Stack @carlosazaustre Frontend Developer April 2019
  2. 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. 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. 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. 5. What is JAM? J A M
  6. 6. What is JAM? JavaScript A M
  7. 7. What is JAM? JavaScript API M
  8. 8. What is JAM? JavaScript API Markdown
  9. 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. 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. 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. 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. 13. Examples More on staticgen.com
  14. 14. Examples More on staticgen.com
  15. 15. Examples More on staticgen.com
  16. 16. Examples More on staticgen.com
  17. 17. Examples More on staticgen.com
  18. 18. Examples More on staticgen.com
  19. 19. Why? ● SEO ● Performance ● Deployment ○ Atomic Deploys ○ Automated builds ● Serverless Services
  20. 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. 21. More Headless CMS ● No Front-End ● REST API Based ● Git Based ● Full CMS functionality headlesscms.org
  22. 22. More Headless CMS ● No Front-End ● REST API Based ● Git Based ● Full CMS functionality headlesscms.org
  23. 23. More Headless CMS ● No Front-End ● REST API Based ● Git Based ● Full CMS functionality headlesscms.org
  24. 24. Developer Experience Local Cloud Build Static Server GIT Build CDN
  25. 25. Headless Content Local Cloud Build Static Server GIT Build CDN Content APIs
  26. 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. 27. Thanks! @carlosazaustre https://carlosazaustre.es https://youtube.com/carlosazaustre https://twitch.tv/carlosazaustre

×