¿Has oído hablar del nuevo enfoque de JAMstack? La capacidad de escribir aplicaciones web en su marco favorito, administrar contenido desde el panel de administración y generar páginas HTML totalmente válidas creadas de acuerdo con las últimas recomendaciones de SEO, PWA y a11y.
Interesante? Entonces aquí hay una lista de cuestiones a considerar en este artículo:
- ¿Qué es esta nueva pila y por qué se necesita?
- ¿Cómo ejecutar una aplicación básica con Gatsby?
- Trabajando con contenido y creando la primera porción de datos
- ¿Cómo vincular Contentful y Gatsby usando GraphQL?
- Configure la implementación automática con Netlify
Jamstack
Como saben: "Todo lo nuevo se olvida hace mucho tiempo" y aquí hay otra confirmación: el mod vuelve a los sitios estáticos. ¿Qué era Internet hace diez años? Era un servidor PHP que sustituía los datos de la base de datos en plantillas HTML y los enviaba al cliente.
Este enfoque ha sido reemplazado por marcos JavaScript, que en los últimos años están representados por la santísima trinidad de la web React Angular Vue . Amén. . ¿Cuál fue la diferencia fundamental? La velocidad y la capacidad de respuesta de la interfaz, porque ahora toda la lógica del sitio estaba en el cliente, y para cualquier movimiento con el mouse puede llamar hermosas animaciones con contenido cambiante, enviando solicitudes a la API.
Que sigue JAM ofrece:
- sin representación del lado del servidor, y de hecho eliminar el servidor en sí
- sin representación del lado del cliente, abajo con
<div id=”root”></div> - compilar el sitio en código HTML normal, una vez, en el momento del cambio de contenido
- alojamiento de sitios en cualquier alojamiento de archivos
El cliente siempre recibe una página renderizada previamente con un diseño completamente válido y la cuestión del rendimiento ahora solo se refiere a la velocidad de la conexión a Internet (pero, por supuesto, no se olvide del coeficiente de directividad de las manos de los desarrolladores).
Kit de herramientas
JAM es solo un enfoque para el que ya hay suficientes fondos en el mercado, pero como saben, las uñas se pueden golpear con cualquier cosa, pero prefiero un martillo.
Lista de las mejores herramientas para 2019:
Gatsby es un generador de sitio estático de las aplicaciones React + GraphQL . ¿Por qué es una elección, y no Angular o Vue, que no puedo responder, pero lo más probable es que el punto esté en las estadísticas malvadas, que dicen que a pesar de todas las disputas, React es el marco más popular de los últimos tres años (no me arrojen piedras en los comentarios, para esta declaración, en realidad me pagó). Para una presentación más visual, create-react-app compila el código en una compilación de JavaScript, para su posterior representación cuando comienza la página, Gatsby genera páginas HTML completas con un diseño válido, que se muestran tal cual, incluso con JS desactivado.
Contentful : sistema de gestión de contenido en páginas estáticas. Esto es WordPress , que no preserva la relación entre plantillas y datos en la base de datos, sino que cambia los datos directamente en archivos HTML.
Netlify es un sistema de implementación muy fácil de usar que le permite conectar los servicios de alojamiento de archivos más populares con una aplicación JAM e incluso en el protocolo HTTPS.
De la teoría a la práctica.
Ahora que ha decidido las herramientas, puede continuar.
Contento
Creamos una cuenta y vemos que, de manera predeterminada, el servicio genera un proyecto modelo, que recomiendo eliminar de inmediato, porque en mi opinión subjetiva es más difícil que ayudar a resolverlo. Creamos un nuevo proyecto gratuito, sin generar ejemplos.
El sistema de gestión de contenido se basa en dos entidades: el modelo de Contenido , que describe la estructura y los tipos de datos, y el Contenido en sí . Primero, cree un modelo simple para nuestro blog. El modelo de contenido consta de tipos de datos, por ejemplo, para un blog, los tipos de datos son: Artículo , Persona .
Por supuesto, puede elegir cualquier nivel de abstracción que desee, por ejemplo, puede eliminar Persona y especificar información sobre el autor dentro del Artículo , como Article.author_name
La estructura de mi modelo article/ ├── title (Short text) ├── text (Long text) ├── banner (Single media) └── publishedAt (Date & Time) person/ ├── fullName (Short text) └── avatar (Single media)
Luego, usando los tipos de datos ya creados, agregue contenido, para los textos puede usar SaganIpsum para las imágenes Unsplash .
Gatsby
Abrimos la terminal y creamos un ambiente de trabajo.
## npm install --global gatsby-cli ## gatsby new personal-blog ## Hello World ## gatsby new minimal-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world ## cd personal-blog
Estructura del proyecto personal-blog/ ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── LICENSE ├── node_modules ├── package.json ├── README.md └── src ├── components │ ├── header.js │ ├── image.js │ ├── layout.css │ ├── layout.js │ └── seo.js ├── images │ ├── gatsby-astronaut.png │ └── gatsby-icon.png └── pages ├── 404.js ├── index.js └── page-2.js
## hot-reloading gatsby develop
Que paso Una aplicación React + GraphQL se crea con Gatsby , lo que significa que puede convertir cualquier proyecto antiguo que tarde mucho tiempo en traducirse a un sitio HTML estático y obtener un aumento de velocidad varias veces mayor.
Gatsby + contento
## npm install gatsby-source-contentful dotenv
Cree el archivo .env en la raíz de la aplicación con los siguientes contenidos:
/* 12- Contentful → Settings → API keys → Example key 1→ Space ID */ CONTENTFUL_SPACE_ID=xxxxxxxxxxxx /* 64- Contentful → Settings → API keys → Example key 1→ Content Delivery API - access token */ CONTENTFUL_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Extendiendo la configuración en gatsby-config.js :
if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { /* other settings */ plugins: [ /* other plugins */ { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, }, } ] }
Reiniciamos el servidor Gatsby y si la consola no muestra ningún error, se ha establecido la conexión a Contentful y puede continuar.
Gatsby + GraphQL + Contentful
Si no está familiarizado con GraphQL, no se preocupe porque es bastante simple. Nuestro sitio ahora está ubicado en:
http: // localhost: 8000 /
Pero por ahora, lo dejaremos y abriremos la segunda pestaña:
http: // localhost: 8000 / ___ graphql
Ante nosotros está el IDE para GraphQL directamente en el navegador. Con él es muy conveniente crear consultas y probarlas. Haga clic en Documentos en la esquina superior derecha para expandir la barra lateral con la documentación, pero sorprende, esta no es la documentación de GraphQL , esta es su documentación de API. Expanda la lista de consultas para ver todos los esquemas disponibles para consultas, con sus tipos de datos.
Los circuitos que nos interesan tienen aproximadamente el siguiente nombre:
YourDataType contento - una instancia
allContentful YourDataType - lista de instancias
Ejemplo de mis datos- contenido
- contentfulPerson
- allContentfulArticle
- allContentfulPerson
Usando el panel izquierdo, crearemos la consulta correcta para nuestros datos (intente autocompletar, muy conveniente).
Ejemplo que solicita una instancia del tipo Persona y una lista del Artículo { contentfulPerson { fullName avatar { file { url } } } allContentfulArticle { edges { node { title text { text } banner { file { url } } publishedAt } } } }
Lo que se puede notar de la estructura de consulta:
- para obtener la URL del archivo, debe ir a la ruta
typeName.file.url - para obtener texto del tipo Texto largo, vaya por la ruta
typeName.typeName - para obtener una lista de instancias de algún tipo, debe usar la siguiente ruta
allContentfulName.edges
Transferimos el esquema de solicitud al proyecto y lo procesamos como datos normales en una aplicación React. En general, se recomienda utilizar el <StaticQuery /> del paquete gatsby , que ya está instalado en el proyecto.
Archivo index.js de ejemplo import React from "react" import { StaticQuery, graphql } from "gatsby" import Layout from "../components/layout" import Article from "../components/article" const IndexPage = () => ( <Layout> <StaticQuery query={graphql` { allContentfulArticle { edges { node { id title text { text } banner { file { url } } publishedAt } } } } `} render={({ allContentfulArticle: { edges } }) => ( edges.map(({ node }) => ( <Article key={node.id} content={node} /> )) )} /> </Layout> ) export default IndexPage
Como funciona El esquema de query graphQL se pasa a consulta, y nuestro JSX favorito para render . Use la desestructuración para hacer que el código sea más legible.
Reestructuración por el ejemplo de components / article.js import React from "react" const Article = ({ content: { title, text, banner: { file: { url } }, publishedAt } }) => ( <div> <h2>{title}</h2> <img src={url} alt={title}/> <p> {text} </p> <h5>{publishedAt}</h5> </div> ) export default Article
Ahora que ha quedado claro cómo obtener y representar los datos, puede comenzar a desarrollar, pero dado que este artículo no trata sobre cómo hacer que un sitio reaccione, omitiremos este momento e imaginaremos que el sitio está listo.
Publicaremos nuestro proyecto en GitHub, desde donde se puede implementar en el siguiente paso.
Para los que aún no saben cómo hacerlo. ## git init ## git add . git commit -m “initial commit” ## GitHub git remote add origin git@github.com:yourname/my-repository-name.git ## git push origin master
Configurar Netlify
Creamos una cuenta utilizando el servicio en el que planea colocar proyectos. Elegí GitHub, así que después de una autorización exitosa configuraremos un nuevo proyecto, haga clic en Nuevo sitio desde Git . Conectamos nuestro repositorio y Netlify determinará automáticamente que se trata de un proyecto Gatsby y configurará todos los scripts para el ensamblaje.
Seleccionamos la rama deseada y no nos olvidamos de las variables de entorno, para esto abrimos el menú de Configuración avanzada y agregamos el contenido del archivo .env local y confirmamos la configuración.
Un par de minutos de magia y un sitio en su lugar:
https://tender-liskov-ce3ad0.netlify.com
Queda por agregar un gancho para actualizar el contenido. Ve a la configuración:
Configuración de implementación → Ganchos de compilación → Agregar gancho de compilación
Establecemos cualquier nombre descriptivo , por ejemplo, "Enlace de contenido" , seleccionamos la rama con la que construiremos y confirmaremos. El resultado es un enlace, copie y vaya al panel Contenido :
Configuración → Webhooks
Estamos buscando una plantilla para Netlify en el panel lateral derecho y en dos clics conectamos los dos sistemas. Estamos tratando de cambiar el contenido y ver cómo aparecen nuevos datos en el sitio.
Total
JAM-stack combina la solución a los problemas de enfoques anteriores y parece pretender tomar el poder y la popularidad mundial, pero ¿es esto una revolución? No hay nada nuevo y especial, pero esta es la metodología más avanzada de los últimos dos años, allí, en un país extranjero y con nosotros. Acabamos de comenzar a transferir proyectos de WordPress a React, y esto definitivamente es un progreso, pero tal vez no se quede atrás, como el legendario outsourcing indio, ¿deberíamos tomar medidas más decisivas?
Enlace al repositorio con el proyecto