Café con Tech

¿Por qué JamStack es tan cool?

April 12, 2021 Matias Hernández Season 2 Episode 7
Café con Tech
¿Por qué JamStack es tan cool?
Chapters
Café con Tech
¿Por qué JamStack es tan cool?
Apr 12, 2021 Season 2 Episode 7
Matias Hernández

En este breve episodio revisamos un poco más sobre JamStack.
¿Qué es lo que hace que esta arquitectura sea tan utilizada?
¿Por qué puede adaptarse a cualquier caso de uso?

Revisamos algunas ideas tras las decisiones de arquitectura y algunos mitos a los que esta idea se enfrenta a diario.

Links
    - covidtracking.com
    - código de covidTracking en github

Generadores y frameworks
    - Nextjs
    - Gatsby
    - Nuxt y Gridsome son la misma idea pero para trabajar con Vue
    - Svelkit  y Elder.js para Svelte
    - Scully para Angular
    - Hugo escrito en Go
    - Cobalt escrito en Rust
CMS y Databases
    -
Airtable
    - Wordpress
    - Contextful
    - Strapi
    - Sanity
    - Prisma
    - Upstash



Únete al newsletter Micro-Bytes. micro cursos de desarrollo web directamente en tu correo
Apoya mi trabajo invitándome un café en
buymeacoffe.com/matiasfha

Music Credits


Auth0
Auth0 es una plataforma de autenticación y autorización lista para usar en tu app!

Cloudinary
Distribuye tus experiencias digitales de forma rápida y sencilla.

Support the show (https://www.buymeacoffee.com/matiasfha)

Show Notes Transcript

En este breve episodio revisamos un poco más sobre JamStack.
¿Qué es lo que hace que esta arquitectura sea tan utilizada?
¿Por qué puede adaptarse a cualquier caso de uso?

Revisamos algunas ideas tras las decisiones de arquitectura y algunos mitos a los que esta idea se enfrenta a diario.

Links
    - covidtracking.com
    - código de covidTracking en github

Generadores y frameworks
    - Nextjs
    - Gatsby
    - Nuxt y Gridsome son la misma idea pero para trabajar con Vue
    - Svelkit  y Elder.js para Svelte
    - Scully para Angular
    - Hugo escrito en Go
    - Cobalt escrito en Rust
CMS y Databases
    -
Airtable
    - Wordpress
    - Contextful
    - Strapi
    - Sanity
    - Prisma
    - Upstash



Únete al newsletter Micro-Bytes. micro cursos de desarrollo web directamente en tu correo
Apoya mi trabajo invitándome un café en
buymeacoffe.com/matiasfha

Music Credits


Auth0
Auth0 es una plataforma de autenticación y autorización lista para usar en tu app!

Cloudinary
Distribuye tus experiencias digitales de forma rápida y sencilla.

Support the show (https://www.buymeacoffee.com/matiasfha)

Matias 1:02 
El mundo del desarrollo web cambia constantemente, tanto que intentamos clasificar cada etapa o época para darle un poco de sentido a la constante e incluso azarosa evolución de la tecnología y nuestros trabajos.

Matias 0:14
Y esto no deja de ser cierto cuando comenzamos un nuevo proyecto y debemos tomar decisiones de arquitectura del software. Muchos hemos pasado horas de nuestra vida trabajando hasta tarde, mejorando o reparando código, fines de semana en que “producción se cayó”, y cientos de horas en reuniones que intentan buscar el problema o peor aún, apuntar culpables. Pero la gran mayoría de las veces estos problemas no viene causados por un simple bug, si no más bien por decisiones de arquitectura que no fueron adecuadas o se convirtieron en algo tan complejo que es casi imposible cambiarlas, mejorarlas o incluso entenderlas.

Matias 01:44
JamStack es una arquitectura, un concepto que engloba decisiones sobre como un app será construida. Incluso podríamos ir más allá y decir que JamStack es una filosofía o modelo que busca drásticamente eliminar la complejidad de nuestros sistemas buscando como objetivo final el poder crear y distribuir mejores aplicaciones en menos tiempo.

Matias 02:02
Mucho hemos escuchado (y algunos incluso predicado) “Move fast break things”, pero que tan cierto es? Que tan rápido puedes moverte cuando la aplicación en la que trabajas a crecido a pasos agigantados creando más complejidad e incluso burocracia para poder desarrollar nuevos features?. Como puedes moverte rápido cuando pasas el 80% de tu tiempo resolviendo errores?.

Matias 02:24
Un problema común es que las aplicaciones comienzan a crecer, por lo que mantener un modelo mental de todo lo que la aplicación hacer se vuelve imposible o al menos difícil para muchos en el equipo. Los equipos cambian, crecen o disminuyen y quienes tomaron las primeras decisiones quizá ya no están. Entonces la aplicación se vuelve una gran carga en donde agregar nuevas cosas se vuelve un juego de malabarismo que muchas veces termina en decidir no cambiar ni eliminar solo agregar cosas desde el código.

Matias 02:53
Si queremos movernos rápido es necesario hacer menos cosas.

Matias 02:57
Jamstack es un diseño de arquitectura pensando para evitar la complejidad para poder así, moverse más rápido.

Matias 03:03
Un app JamStack es básicamente un frontend con “assets” estáticos que se comunica con una o más fuentes de datos, es decir, es un frontend simplificado, atómico y escalable, pero sobre todo simple.

Matias 03:18
Es común que cuando dices “JamStack” son archivos estáticos, el sólo uso de la palabra estático levanta alarmas en los oídos de los no iniciados, llevándoos a pensar que Jamstack es una especie de locura que imposibilita tener dinamismo en sus aplicaciones o sitios web, pero no pueden estar más errados.

Matias 03:38
Archivos o “assets" estáticos no es lo mismo que sitios estáticos.

Matias 03:35
Tus archivos javascript, css e imágenes  son archivos estáticos, son almacenados en el sistema de archivo y no son “regenerados” cada vez que visitas un sitio web. Pero javascript permite dar dinamismo al contenido de tu sitio web, permitiéndote obtener datos cuando es necesario, tener Code Splitting, mostrar o esconder contenido, es decir, tener contenido que no es nada similar a ser estático.

Matias 04:10
Otro problema común cuando llega la hora de decidir si usar o no una arquitectura JamStack es la idea de que no es posible manejar grandes sitios web o aplicaciones,  que el tiempo de compilación será demasiado alto y que no valdrá la pena. Y esto guarda cierto grado de verdad.

Matias 04:30
Una arquitectura JamStack se basa en dos principales ideas:

- Frontend y backend desacomplados

- Compilación del frontend para generar archivo estáticos

Matias 04:39
Y es esta fase de compilación la que puede crear situaciones de largas esperas cuando hablamos de cientos de miles de archivos.                   

Matias 04:46
La idea aquí es que el proceso de construcción del sitio lee cada uno de los archivos o datos necesarios para ir generando archivos html (y sus otros assets asociados), y esto puede tomar mucho tiempo entre obtener los datos y crear los archivos. Pero siguiendo la idea de buscar la simplicidad en nuestras soluciones, como reza el principio de la Navaja de Ockham podemos diseñar una solución a este problema.

Matias 05:10
Una gran aplicación o sitio web se compone de varias instancias o contextos, por lo que es posible dividir el sitio en esos diversos contextos creando así sitios más pequeños - Divide y Vencerás -. Estos sitios a su vez pueden volver a sud-dividirse y así consecutivamente hasta cuando haga sentido. Ahora, construir estos pequeños sitios es rápido e incluso paralelizable, por lo que el problema del tiempo de compilación queda resuelto. Sólo nos queda diseñar como se unirán estos sitios para recrear el sitio final lo que normalmente incluye configuraciones en el dominio y/o proxies en el servidor o mejor aún, configuraciones en el CDN.

Matias 05:39                                       
¿Y que tal la escalbilidad?

Este es otro tema que genera cierto grado de discusión, por alguna razón los detractores u objetores de esta arquitectura pregonan que no tiene una gran escalabilidad, pero, considera esto: Desde el punto de vista del deployment, un sitio Jamstack no es más que una colección de directorios y archivos estáticos que pueden ser fácilmente servidor por un CDN, es decir, la arquitectura is inherentemente escalable - y de bajo costo - Un gran ejemplo es covidtracking.com sitio web creado con una arquitectura JAMstack, puedes ver su código en github en donde verás varios repositorios que dividen contextos y responsabilidades. Este sitio escalo de la noche a la mañana para recibir más de 2 millones de requests al día y sin siquiera sonrojarse.

Matias 06:35
Por cierto, el sitio web es un sitio Gatsby que consume datos de diversas fuentes.

Matias 06:42
Finalmente la arquitectura JamStack es una forma de definir la arquitectura de tu sitio de forma simple y sencilla - que no es lo mismo que fácil.  La complejidad constituye de forma 
subyacente un bug que vendrá a morderte tarde o temprano

Matias 06:57
Ahora, que opciones tienes para construir tu sitio jamstack?. Bueno, hay muchas, quizá las más conocidas hoy son generar tu sitio con Next.js, Gatsby o Nuxt. La verdad es que la decisión de que herramienta usarás no es más que una cuestión de gustos o de que alguna u otra característica te gusta  más o tu equipo la conoce de mejor manera.

Matias 7:16
Gatsby y Next son frameworks para crear aplicaciones que utilizan React para definir su interfaz y otro variopinto conjunto de decisiones y opciones para ayudarte a construir una aplicación simple, efectiva y escalable.

- Nuxt y Grindsome son la misma idea pero para trabajar con Vue

- Svelkit  y Elder.js para Svelte

- Scully para Angular

- Hugo escrito en Go

- Cobalt escrito en Rust

- y así muchos más.

Matias 07:45
También existen muchas soluciones para administrar tus datos desde opciones NoCode como Airtable o CMS más complejos como el mismísimo Wordpress o Contextfull, Strapi, Sanity, etc o incluso directamente trabajar con bases de datos como Prisma o Upstash.

Matias 08:08
El número de opciones es grande y las posibilidades son tremendas, en mi opinión no existe aplicación, sitio web o equipo que no se beneficie de este patrón de diseño.