JAM Stack: Creando sitios con Gatsby.js

Workshop práctico sobre JAMstack y Gatsby.js presentado en Codemotion 2021. La sesión introduce la evolución de la arquitectura web tradicional hacia sitios pregenerados y desacoplados, explicando cómo JAMstack busca mejorar rendimiento, seguridad, escalabilidad, portabilidad y mantenibilidad.

A partir de estos principios, el workshop introduce Gatsby.js como framework frontend basado en React y Redux, analiza sus ventajas y limitaciones y muestra cómo utilizarlo para construir sitios rápidos siguiendo la filosofía JAMstack. La sesión combina fundamentos arquitectónicos, Gatsby.js y práctica, con especial atención a reducir la complejidad de la infraestructura web.

References:
https://events.codemotion.com/conferences/online/2021/online-tech-conference-spanish-edition-spring%23tickets/speakers

Transcript

1. https://youtu.be/ARruPpHJIvw
2. JAM stack Creando sitios con Gatsby.js
3. 3 Hello! I am Manuel de Paz I am here because I love avoid complexity, and also work as Cloud Practitioner at
4. 4 “ “It would seem that you have no useful skill or talent whatsoever," he said. "Have you thought of going into teaching?” ― Sir Terry Pratchett, Mort
5. 5 What's going to happen here today? JAM Stack Workshop Gatsby.js
6. 6 The 80-20 rule Content about JAM philosophy Content about Gatsby.js Practice
7. 7 A little bit of history... HTML was born in 1990 ➜ CSS in 1994 ➜ JavaScript in 1995 ➜ ➜ The early CMS appears in 2000’s Sources: opensource.com & Wikipedia
8. 8 Source: Desktop vs Mobile vs Tablet vs Console Market Share Worldwide
9. 9 BOUNCE RATE VS LOADING TIME Source: Website Load Time Statistics: Why Speed Matters in 2021
10. Want big impact? Use big image. 10 We really live in a frenetic pace
12. 12 Then... Do you really need a database? Your website is as slow as the total number of interactions that take place from the time the user makes the request until the complete response is received.
14. 1. About Let’s start with the first part of theory
15. 15 Main benefits of using JAMStack in our sites
16. 16 Which are the two approaches? Static generators: is essentially a set of tools for building static websites based on a set of input files. These can be viewed as a ready-made web design, used to mass-produce "cookie-cutter" websites for rapid deployment. They also commonly include themes in place of CSS styles. In general, the template language is used only with the editor's software. Headless CMS: A headless content management system, or headless CMS, is a back-end only content management system that acts primarily as a content repository. A headless CMS makes content accessible via an API for display on any device, without a built-in front-end or presentation layer.
17. 17 Why Jamstack? According L-USERS Security Scale Performance The Jamstack removes multiple moving parts and systems from the hosting infrastructure resulting in fewer servers and systems to harden against attack. Popular architectures deal with heavy traffic loads by adding logic to cache popular views and resources. The Jamstack provides this by default. Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build. L-user = Local User 😊
18. 18 Why Jamstack? According DEVs Maintainability Portability Dev Experience When hosting complexity is reduced, so are maintenance tasks. The work was done during the build. Jamstack sites are pregenerated, so any simple static hosting solution should be able to serve a Jamstack site. Jamstack sites can be built with a wide variety of tools. They do not depend on the proprietary technologies.
19. 19 How can we implement all this? Or of course with... Another similar technologic stack as long as it ensures the pre-rendering and the decoupling.
20. 2. About Gatsby.js Tell me more
21. 21 What is Gatsby.js? An open-source frontend framework Based on React & Redux • Under JAMStack philosophy • Design for creating integrated, blazing fast websites and apps.
22. 22 Gatsby.js is a kind of... monolith! 🤯 but on the client-side
23. 23 Gatsby.js swot analysis STRENGTHS WEAKNESSES Easy to use, easy to extend and with a large community. @latest versions sometimes... are a bit immature. Combining the advantages of a static generator with a SPA. We must be cautious with versions and dependencies, and build very frequently. OPPORTUNITIES THREATS
24. 3. Workshop Okay let's play a little!
25. 25 Roadmap The departure The Initiation The dark and blessing 1 3 5 2 4 6 The dark night The inner guidance The return
26. 26 ways to integrate a ML model on client-side Using a Pre-Trained Model Depending on the problem you are trying to solve, there might be a model already trained. Transfer Learning Defining, running, and using your own model Transfer learning is the ability to combine a pre-trained model with custom training data. The last feature is to define, train and run a model entirely in the browser. Source: Machine Learning For Front-End Developers With Tensorflow.js — Smashing Magazine
27. WE ARE HIRING! Trabaja en Keepler en Madrid o en remoto desde cualquier lugar de España. WHAT? Para conocer quiénes somos www.keepler.io Cloud Computing Para descubrir nuestras vacantes de empleo www.keepler.io/#empleo Big Data Para saber cómo es la vida en Keepler www.keepler.io/citizenk Artificial Intelligence HOW? TRANSFORMACIÓN AGILE METODOLOGÍA / FRAMEWORK DEVOPS ENFOQUE DATA PRODUCT EXCELENCIA TÉCNICA WHERE?
28. 28 Thanks! Any further questions? You can find me at: @manueldepaz manuel.depaz@keepler.io manueldepaz.medium.com linkedin.com/in/manueleusebiodepazcarmona github.com/Pelirrojo
29. 29 Credits Presentation Template: Slides Carnival Photo by Edwin Andrade on Unsplash Photo by Garett Mizunaka on Unsplash Content Structure: Cinco W (Wikipedia) Practice Guidance: El viaje del héroe: mi camino hacia el propósito y la libertad Photo by Markus Winkler on Unsplash Stranger Things Intro Creator DevOps, DevApps and the Death of Infrastructure – The New Stack