DEV Community: Rob Arroyo

¿Qué es el Jamstack?

Rob Arroyo — Sat, 23 Jan 2021 20:56:34 +0000

Si lo prefieres, puedes escuchar la versión podcast de este artículo en Vainilla Podcast

... ¿Y cómo se come?

Jamstack es lo mejor de dos mundos, el de los sitios estáticos y el de las aplicaciones web dinámicas. Cuando la web comenzó a crearse, a finales de los años 90's, la web se componía simplemente de archivos de lenguaje de marcado de texto (HTML), imágenes y hojas de estilo en cascada (CSS).

Ese enfoque de desarrollo era muy sencillo pero muy eficiente al ser consultado por el navegador. Eran simples archivos estáticos, inmutables, que se subían a través de FTP a un servicio de hospedaje web. Rápidamente las cosas empezaron a hacerse más complejas y además de la llegada de JavaScript con el navegador Netscape, también llegaron al ecosistema web otras tecnologías para desarrollar sitios web dinámicos.

Esto significaba que las páginas web que visitábamos en aquel entonces, dejaron de ser meramente informativas y comenzaron también a intercambiar información con los usuarios. Este dinamismo requería de infraestructuras más complejas detrás del cliente, pues ahora se necesitaba almacenar datos y regresar información dependiendo de la interacción con el usuario.

Han pasado más de 20 años desde entonces, y ahora tenemos un sin fin de lenguajes y enfoques para crear la web. Jamstack rescata las bondades de los sitios estáticos sin dejar de lado el dinamismo que caracteriza a web.

La palabra es un acrónimo de JavaScript APIs Markup, es una arquitectura que fue diseñada para optimizar el rendimiento, mejorar la seguridad y asegurar la escalabilidad de nuestros desarrollos web.

Hay dos principios por los que se rige el Jamstack, el pre-renderizado y el desacoplamiento, lo que nos brinda performance, flexibilidad y seguridad por estar separado del Back-end. Veamos qué significa cada concepto.

Pre-Renderizado

El proceso pre-renderizado consta de crear y entregar todas las páginas estáticas y recursos del Front-end altamente optimizados, para poder ser entregados a través de una red de distribución de contenido o CDN, lo que reduce el costo, complejidad y riesgo que representa la infraestructura de los servidores dinámicos.

Estos archivos pre-renderizados son entregados en milisegundos después de que un usuario visita el sitio web. Una vez en el sitio, el navegador va pre-cargando el código restante para seguir ofreciendo una experiencia de usuario mejorada cuando el usuario navega en el sitio web.

Desacoplamiento

El desacoplamiento es el proceso de separar los sistemas de los servicios. Esto quiere decir que un sistema puede alimentar múltiples servicios, permitiendo que existan servicios con propósitos más específicos y equipos más especializados que los mantengan.

Al hacer esta separación, también abonamos en mejorar la seguridad, pues no hay un back-end ni servidor del que dependa nuestro proyecto, sino que todo nuestro código y contenido está previamente generado como archivos de HTML, listo para mostrarse en el navegador.

¿Por qué se ha vuelto tan popular el Jamstack?

Imagen de Netlify que muestra cómo funciona la arquitectura Jamstack

Jamstack se ha vuelto muy popular principalmente por brindar una serie de beneficios en la arquitectura y el flujo de los proyectos web, muy atractivos para quien ha desarrollado web con arquitecturas más tradicionales. Algunos de estos beneficios son: mayor seguridad, escalabilidad, rendimiento, mantenibilidad, portabilidad y experiencia de desarrollo.

Seguridad

Al estar desacoplada de los sistemas, la infraestructura de los servicios está limitada a entregar las páginas estáticas y los recursos previamente pre-renderizados, mejorando la seguridad y haciendo estos servicios menos vulnerables a ataques.

Escalabilidad

Debido a su arquitectura modular, Jamstack ofrece la posibilidad de construir web apps que sean fáciles de escalar. Los archivos normalmente son almacenados en redes de distribución de contenido que se pueden conectar a nuevos servicios conforme la web app escala. Además, la comunidad de Jamstack desarrolla constantemente herramientas y plugins que son fáciles de implementar, que nos permiten escalar más rápido y de forma segura.

Rendimiento

El pre-renderizado de páginas y recursos es nuestro aliado cuando de rendimiento se trata. Esto evita enfocar nuestros esfuerzos a optimizar los tiempos de respuesta en los que debemos presentar la información a los usuarios, pues Jamstack puede cachear toda nuestra web app en una CDN que provee la información tan pronto como el navegador la solicite.

No solo los usuarios gozan de esta mejora en el rendimiento, también nuestras analíticas de SEO al proveer las páginas HTML que son pre-renderizadas durante el despliegue y que son entregadas por el CDN sin retrasos relacionados con la carga de interfaces o el back-end.

Mantenibilidad

Los sitios Jamstack pueden mantenerse más fácilmente que otras arquitecturas, pues solo basta contar con un servicio de hospedaje web que pueda entregar nuestro sitio estático. Hay servicios como Netlify que además tienen la posibilidad de conectar nuestro proyecto a un repositorio de Github, facilitando el despliegue cada vez que mandamos nuevos cambios de código a la rama conectada.

En estos servicios, también existen webhooks que se pueden conectar con un administrador de contenidos, en caso de que exista uno, para que cada vez que alguna página sea creada o actualizada, el servicio active el proceso de despliegue construyendo de nuevo el código de la web app con la información actualizada.

Portabilidad

La característica de tener sitios pre-renderizados nos permite que podamos trabajar con una amplia gama de servicios de hospedaje. Solo basta elegir un servicio de alojamiento web estático para poder montar nuestro sitio Jamstack.

Esto quiere decir que si queremos mover nuestro sitio de un servicio a otro, podemos hacerlo muy fácilmente. Podemos incluso solo subir la carpeta que contiene todos nuestros archivos estáticos y nuestro sitio estaría disponible sin más configuración.

La ventaja de los servicios de alojamiento especializados para Jamstack es que proveen de herramientas de despliegue contínuo, pero creo que otros servicios irán adaptándose a esta tendencia y cada vez este tipo de herramientas serán más populares.

Experiencia de Desarrollo

Jamstack promete una experiencia de desarrollo mejorada al no encasillarse con tecnologías específicas o frameworks exclusivos. En lugar de esto, se construye a partir de diferentes herramientas y convenciones, de manera que se ajusta a las habilidades de los desarrolladores.

Puedes desarrollar un sitio web Jamstack con React, con Vuejs, con Angular, con Svelte o con Vainilla JavaScript. Existen muchos frameworks para optimizar los recursos de un sitio web y crear páginas estáticas, éstos son mejor conocidos como Generadores de sitios estáticos.

Generadores de sitios estáticos

Imagen de Netlify que representa cómo funcionan los generadores de sitios web estáticos

Regresa el término "estático" a la web moderna. Recordemos que los sitios estáticos son simplemente archivos de HTML, CSS, imágenes y muy probablemente JavaScript. No requieren de un servidor que interprete el código, sino que estos archivos ya están generados y listos para mostrarse en el navegador.

Los generadores de sitios web estáticos son herramientas de desarrollo que nos permiten tomar todos nuestros recursos junto con nuestro código y nuestro contenido, para distribuirlo por una CDN en forma de archivos estáticos.

Los sitios estáticos también pueden ser dinámicos. JavaScript y los servicios que incorporamos a través de APIs nos permiten ofrecer las experiencias dinámicas a las que estamos acostumbrados, ya sea acceder a contenido exclusivo detrás de un paywall, filtrar contenido desde un motor de búsqueda, hasta crear comercio electrónico, solo por mencionar algunas de estas experiencias.

Como somos desarrolladores JavaScript, los generadores que nos competen están enfocados a los frameworks más populares como React, Vue, Angular y Svelte; sin embargo puedes encontrar generadores de sitios web estáticos para muchos de los lenguajes de desarrollo web.

Los generadores para React más populares son Next y Gatsby, en Vue encontramos Nuxt y VuePress, en Svelte podemos usar Sapper, y por último en Angular está Scully.

El Contenido es el Rey

Los generadores de sitios estáticos nos proveen de comandos para indicar cuál será la fuente de nuestro contenido y cómo será procesado.

Hay distintas maneras en las que podemos manejar el contenido para un sitio Jamstack. La forma más sencilla es escribiendo Markdown, que es un lenguaje de marcado que nos permite crear documentos con formato desde un editor de texto. Estos archivos son procesados por el generador de sitios estáticos desde el sistema de archivos de nuestro sistema operativo.

Otras formas de consumir contenido son desde archivos JSON que son proveídos por alguna API, desde una base de datos, desde un Administrador de contenidos o desde GraphQL.

¿Cuándo usar Jamstack?

En realidad cuando tú quieras, Jamstack es bastante versátil. Debido a su excelente performance y la seguridad que provee, se ha utilizado tanto para blogs pequeños, como para web apps bastante más complejas.

Muchas agencias de Marketing están buscando sacar provecho de el rendimiento que provee la arquitectura Jamstack, y están migrando a enfoques de desarrollo que les permitan implementarlo, aumentando así la efectividad de su trabajo de SEO y el impacto que tiene en sus conversiones por la mejora en velocidades de carga. Sitios para promocionar un producto o servicio y Landing Pages, son el ejemplo perfecto de uso en Marketing.

También se ha vuelto popular su uso para crear documentación. Algunas personas que crean contenido en el mundo del desarrollo, han adoptado esta arquitectura por lo simple que puede llegar a ser crear contenido con este enfoque. La manera más común es aprovechando las ventajas del lenguaje de marcado Markdown, que permite incrustar bloques de código, publicándolo tal y como desean mostrarlo. Las ventajas aquí son que uno controla todos los aspectos visuales del contenido y no hay que estar dependiendo de un servicio que puede tener limitantes.

También hay desarrollos más robustos, y para ejemplificarlo un poco más a detalle, enseguida te contaré de un nuevo término muy popular en el ecosistema Jamstack.

Headless CMS

Imagen de Contentful que ilustra cómo funciona un Headless CMS

Quizá has escuchado hablar de "Headless CMS". En español este término no tiene mucho sentido al traducirlo, pero básicamente consiste en un Administrador de Contenido que solo cumple la función de back-end, dejando la presentación visual en manos de una arquitectura front-end independiente; sí, adivinaste, un sitio Jamstack.

Un enfoque popular para un Headless CMS es con WordPress y Gatsby. En este caso, WordPress hace la función de administrador de contenido y Gatsby consume la información a través de la API de WordPress. Al final, lo que genera Gatsby son archivos HTML estáticos, disponibles a través de una CDN por la que entrega el contenido y los recursos del CMS.

WordPress, en este ejemplo, puede estar hospedado en un servidor con una infraestructura con los requerimientos mínimos para que pueda funcionar. Recordemos que WordPress no se encargará de mostrar el contenido, por lo que es necesario que este servidor no tenga acceso público y el sitio de WordPress no sea indexable.

Por el otro lado, Gatsby puede estar en otro servicio de hospedaje totalmente diferente. Incluso podría vivir en GutHub Pages. El objetivo de este enfoque es desacoplar el back-end para que esté más seguro, de manera que el front-end sea independiente y brinde un mejor rendimiento. Gatsby cuenta con su propio servicio en la nube para alojar sitios estáticos, además provee de funciones que facilitan y optimizan el despliegue del código.

Existen otros CMSs que cumplen este propósito de ser headless. Contentful es uno de ellos, está diseñado especialmente para distribuir contenido para distintos servicios con propósitos específicos. También encontramos a Prismic, un CMS bastante sencillo de usar que permite crear distintos tipos de contenido que permiten clasificarlo, campos personalizados para cada uno de estos tipos de contenido, y también provee una API por la que se puede consumir la información.

Shopify es otra popular plataforma de eCommerce sobre la que se están desarrollando sitios Jamstack. Este enfoque permite al los desarrolladores de Shopify aprovechar todas las bondades de las tecnologías web modernas sin abandonar su plataforma de comercio electrónico favorita.

Conclusiones

Jamstack es una arquitectura muy divertida en el desarrollo web moderno. Es tan simple, como poderosa. Como casi todo en nuestra industria, el límite es nuestra creatividad.

Si lo que buscas es desarrollar una habilidad que te permita llevar al siguiente nivel el rendimiento y seguridad de tus desarrollos web, Jamstack es una buena opción. Si es la primera vez que escuchas acerca de este concepto, te invito a que profundices más desde el Sitio Oficial de Jamstack. También, te recomiendo el libro The Jamstack Handbook, que contiene información muy valiosa para entender mejor esta arquitectura.

¿Ya has desarrollado un sitio Jamstack? Comparte tu experiencia en los comentarios. El sitio con este enfoque que te voy a recomendar que visites y lo tengas en tus bookmarks es el de mi podcast, vainillapodcast.fm.

Cómo ser mejor Front-end en 2021

Rob Arroyo — Tue, 15 Dec 2020 02:36:27 +0000

El 2020 fue un año cargado de muchos retos, sorpresas y momentos difíciles. La pandemia ha cambiado nuestras vidas, pero no todos han tenido la misma suerte. Muchas personas que trabajamos en TI tenemos la fortuna de seguir trabajando y creciendo. No sabemos lo que nos deparará el 2021, pero sí sabemos que la recta final de este año marcará la tendencia del siguiente. Te comparto aquellas cosas que creo que necesitamos seguir para ser mejores Desarrolladores Frontend este 2021.

Si lo prefieres, escucha la versión audio en Vainilla Podcast.

Características de CSS

Subgrid

CSS grid ha sido una de las características de CSS que más impacto ha tenido en los últimos dos años. Grid nos permite diseñar nuestras interfaces con mayor flexibilidad y agilidad.

La adopción de Grid ha crecido considerablemente este año y era de esperarse que este crecimiento se viera reflejado también en Subgrid. Ésta última, si bien todavía no está en la especificación, es la característica de CSS que debemos dominar este 2021.

Container Queries

Esta nueva y emocionante característica permite dar estilos a nuestros elementos a partir del tamaño del contenedor, de la misma manera como funcionan los @media queries en relación con el viewport.

Esto nos abre un mundo nuevo de posibilidades para controlar nuestras interfaces cuando estamos diseñando layouts responsivos.

Aspect Ratio

Esta otra característica nos permite manipular el aspecto de las imágenes, ya es totalmente soportada por Chrome. Firefox por su parte, la soporta parcialmente.

Sin duda otra opción muy interesante con la que podemos empezar a experimentar para tener más control en nuestro diseño.

CSS Houdini

CSS Houdini es una serie de APIs que nos permiten extender CSS y que nos dan acceso directo al CSS Object Model (CSSOM), permitiéndonos escribir código que el navegador puede interpretar como CSS sin que este sea incluso soportado por el navegador. Esto nos permite experimentar con nuevas características que no están incluidas en la especificación, pero que ayudarán a facilitar el proceso de estandarización.

Aprende más sobre Houdini.

Otras características

También, te dejo una pequeña lista de aquellas características que no tienen mucho soporte o aún no han sido adoptadas por la comunidad de desarrolladores, pero que son muy prometedoras:

Frameworks

No está de más recomendarte que elijas aprender uno o dos de los frameworks más populares, como React (librería), Vue.js, Angular o incluso Svelte; pero no me detendré mucho en contarte acerca de ellos. Lo qué sí voy a hacer es brindarte un poco de información acerca del panorama de los frameworks de JavaScript para que tú decidas cuál de ellos agrega más valor a tu carrera profesional.

En primer lugar tenemos a React que sigue a la cabeza en esta carrera de popularidad. Si lo que buscas es oportunidades de trabajo, React es una buena opción.

Angular sigue en la batalla en el segundo lugar de popularidad. También hay muchas oportunidades de trabajo con este framework, pero en lo personal, creo que es un poco más complejo posicionarte como un nuevo desarrollador de Angular ya que hay varias versiones y dominar todas quizá implique una curva de aprendizaje más larga. No es que las tengas que dominar todas, pero no todas las oportunidades de trabajo se presentarán en la versión que elijas.

El que sigue creciendo año con año es Vue y sin duda creo que es una excelente opción para tener en tu stack. Actualmente se encuentra en su versión 2, pero ya se ha liberado la versión 3, con la que puedes empezar a experimentar. Si vas a empezar a aprender este framework, te recomiendo que lo hagas en su versión 2, pues está más consolidada, hay más recursos alrededor de ella y por supuesto más empleos.

Svelte se ha vuelto muy popular, aunque fue apenas este 2020 cuando lanzaron su primer versión estable. Sin duda es una de mis opciones para aprender este 2021.

JAMStack

Ahora quiero hablarte del JAMStack y por qué creo que es importante tenerlo en nuestra lista de habilidades técnicas. La palabra es un acrónimo de JavaScript APIs Markup, es una arquitectura que fue diseñada para crear sitios web rápidos, seguros y fáciles de escalar.

Front-end Pre-Interpretado

Con JAMStack, el front-end de nuestros sitios es pre-interpretado en páginas estáticas y recursos altamente optimizados. Este proceso resulta en sitios que son entregados desde un CDN, reduciendo el costo de los recursos, aumentando la seguridad y mejorando increíblemente el rendimiento.

Sitios Web estáticos

Lo que te acabo de contar es prácticamente lo mismo que un sitio web estático y para poder lograrlo hacemos uso de algunas de las herramientas más populares como lo son Gatsby (para React), NextJs (para React), NuxtJs (para Vue), Sapper (para Svelte), entre otros.

Estas herramientas son mejor conocidas como generadores de sitios web estáticos.

APIs

Las APIs que consumimos en la arquitectura JAM, pueden ser servicios de terceros que accesamos a través de HTTPS o pueden ser servicios propios. Estas APIs nos proveen los datos que mostraremos en nuestros sitios web estáticos.

Hay diferentes enfoques, los más comunes son consumir datos desde:

APIs con GraphQL
Sistema de archivos (Filesystem)
Desde Administradores de Contenido (CMS)
JSON o YAML
Bases de datos

Los generadores de sitios estáticos como Gatsby, cuentan con plugins que nos ayudan a abastecer de datos nuestro sitio web con cualquiera de los enfoques mencionados.

Automatización

Otra característica del JAMStack es que puedes automatizar el proceso de creación del código, así como el despliegue en tu servidor. Esto lo puedes hacer con servicios como Netlify, que te permiten crear hooks para que cuando mandes un cambio a la rama principal de tu proyecto, este servicio active la construcción y despliegue de tu código.

Aunque esta solución es bastante práctica y barata, también es posible hacer este proceso llamado despliegue continuo con Github y cPanel.

Si quieres aprender más acerca de esta arquitectura, visita el sitio oficial de JAMStack.

TypeScript

Creado por Microsoft, TypeScript es una variante de JavaScript, con la diferencia que es de tipado fuerte. Esto quiere decir que los tipos primitivos de JavaScript como string, number y object deben ser correctamente asignados y TypeScript se asegura que así sea.

Algunas de las ventajas que nos brinda Typescript son que funciona con nuestro código existente de JavaScript, nos ayuda a prevenir errores y potenciales comportamientos indeseados en nuestro código.

TypeScript funciona con la mayoría de los frameworks más populares, así que si ya dominas JavaScript, no te costará mucho empezar a usarlo y hacer el cambio definitivo. Inténtalo ahora.

GraphQL

Por mucho tiempo, REST ha dominado el campo de la creación de APIs. Si bien GraphQL puede ser una alternativa para crear APIs, también puede funcionar consumiendo REST APIs. Esta tecnología fue creada por Facebook para contrarrestar algunos problemas que enfrentan los desarrolladores al lidiar con RESTful APIs.

A diferencia de las REST APIs, donde los desarrolladores consultan múltiples endpoints con propósitos específicos, GraphQL nos da la posibilidad de consultar un solo endpoint que nos provee toda la información que necesitamos. Esto lo hacemos a través de una petición en donde le especificamos al servidor los datos requeridos.

Algunas de las ventajas de GraphQL son que utiliza un sistema de tipado fuerte y que los esquemas definidos en el servidor quedan documentados para poder ser consultados y usados correctamente por el front-end, evitando potenciales errores en nuestras consultas.

GraphQL no solo está disponible para JavaScript, también es soportado en otros lenguajes como Phyton, PHP, Ruby, Go, entre otros. Existen varios clientes y herramientas que nos permiten usar GraphQL en el front-end, pero la más popular es Apollo Client diseñado para trabajar con React, React Native, Angular 2, o Vanilla JavaScript.

En lo personal lo he utilizado para React con Gatsby y para React Native con Apollo Client y Expo consumiendo la API de un sitio web de WordPress. Si estás interesado en cómo construí una app con WordPress, React Native y GraphQL déjalo en los comentarios, si hay suficiente interés, podré hacer una publicación al respecto.

Testing

Es muy importante hacer pruebas de nuestro código antes de que salga a producción. Hay diferentes tipos de testing:

Unit testing

Son los que hacen pruebas de un solo componente o función fuera del contexto de la aplicación.

Integration tests

Son las pruebas que se hacen entre componentes de una aplicación.

End-to-end tests

Son las pruebas de los flujos completos en nuestra aplicación.

Hay más tipos de testing, pero estos enfoques son los que quiero destacar en este artículo y los que creo que te ayudarán a ser mejor front-end.

Habilidades Blandas

Por último pero no menos importante, quiero hablarte de las habilidades blandas que debes empezar a desarrollar o seguir mejorando este 2021. Muchas veces las subestimamos, pero son igual de importantes que todas nuestras habilidades técnicas. Si lo que quieres es crear una carrera en esta industria, te recomiendo que trabajes en las siguientes habilidades:

Empatía
Trabajo en equipo
Comunicación
Responsabilidad
Disposición a escuchar retroalimentación
Dar retroalimentación positiva
Creatividad para resolver problemas
Manejo del tiempo
Paciencia
Respeto
Autoeducación
e Inglés

Si quieres dar el siguiente paso en tu carrera profesional, aprende a entablar una conversación escrita y oral en Inglés. La suma de todas tus habilidades técnicas, más las habilidades blandas, te van a llevar lejos en tu carrera como front-end, pero además hablar Inglés te ayudará a consolidar el impacto de tu trabajo.