El caso de Prisma en el Jamstack

 

 

 

  • SmashingConf Friburgo 2024
  • Patrones de diseño para interfaces de IA, con Vitaly Friedman

  • Índice
    1. Los casos de uso de Prisma
    2. Alternativas a Prisma
      1. Bases de datos/servicios en la nube
      2. Escribir SQL puro
      3. Otros ORM
    3. Usando Prisma en proyectos Jamstack
      1. Siguiente.js
      2. Secoya
      3. Trabajadores de la tarifa en la nube
    4. Conclusión
      1. Lecturas adicionales sobre la revista Smashing

    Jamstack ha ganado popularidad en los últimos años como método para crear sitios web. A medida que los desarrolladores crean sitios Jamstack, encontrar un método bien integrado para interactuar con una base de datos puede ser un obstáculo importante. En este artículo, Sam Poder explora cómo Prisma se integra con Jamstack y por qué es una gran solución para bases de datos sin servidor en proyectos basados ​​en JavaScript o TypeScript.

     

    El enfoque Jamstack se originó a partir de un discurso pronunciado por el CEO de Netlify, Matt Biilmann, en la Smashing Conf de Smashing Magazine en 2016.

    Los sitios Jamstack ofrecen contenido estático pre-renderizado a través de una CDN y generan contenido dinámico a través de microservicios, API y funciones sin servidor. Por lo general, se crean utilizando marcos de JavaScript, como Next.js o Gatsby, y generadores de sitios estáticos, como Hugo o Jekyll, por ejemplo. Los sitios Jamstack suelen utilizar un flujo de trabajo de implementación basado en Git a través de herramientas como Vercel y Netlify. Estos servicios de implementación se pueden utilizar en conjunto con un CMS sin cabeza, como Strapi.

    El objetivo de utilizar Jamstack para crear un sitio es crear un sitio que tenga un alto rendimiento y un funcionamiento económico. Estos sitios logran altas velocidades renderizando previamente la mayor cantidad de contenido posible y almacenando en caché las respuestas en “el borde” (también conocido como ejecución en servidores lo más cerca posible del usuario, por ejemplo, sirviendo a un usuario de Mumbai desde un servidor en Singapur en lugar de San Francisco).

     

    Los sitios Jamstack son más económicos de ejecutar, ya que no requieren el uso de un servidor dedicado como host. En su lugar, pueden aprovisionar el uso de servicios en la nube (PAAS)/hosts/CDN por un precio más bajo. Estos servicios también están configurados para escalar de manera rentable, sin que los desarrolladores cambien su infraestructura ni reduzcan su carga de trabajo.

    La otra herramienta que forma esta combinación es Prisma, un ORM (mapeo relacional de objetos) de código abierto creado para TypeScript y JavaScript.

    Prisma es una herramienta JavaScript/TypeScript que interpreta un esquema escrito en los estándares de Prisma y genera un módulo de tipo seguro que proporciona métodos para crear registros, leer registros, actualizar registros y eliminar registros (CRUD).

    Prisma maneja las conexiones a la base de datos (incluida la agrupación) y las migraciones de la base de datos. Puede conectarse con bases de datos que utilizan PostgreSQL, MySQL, SQL Server o SQLite (además, la compatibilidad con MongoDB está en versión preliminar).

    Para ayudarle a tener una idea de Prisma, aquí tiene un código de ejemplo básico para manejar el CRUD de los usuarios:

    import { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()const user = await prisma.user.create({ data: { name: Sam, email: '[email protected]', },})const users = await prisma.user.findMany()const updateUser = await prisma.user.update({ where: { email: '[email protected]', }, data: { email: '[email protected]', },})const deleteUser = await prisma.user.delete({ where: { email: '[email protected]', },})

    El esquema Prisma del proyecto asociado se vería así:

    datasource db { url = env("DATABASE_URL") provider = "postgresql"}generator client { provider = "prisma-client-js"}model User { id Int @id @default(autoincrement()) email String @unique name String?}

    Los casos de uso de Prisma

    Armados con un conocimiento de cómo opera Prisma, exploremos ahora dónde podemos usarlo dentro de los proyectos Jamstack. Los datos son importantes en dos aspectos de Jamstack: mientras se preprocesan páginas estáticas y en rutas API. Estas son tareas que a menudo se logran utilizando herramientas de JavaScript, como Next.js para páginas estáticas y Cloudfare Workers para rutas API. Es cierto que esto no siempre se logra con JavaScript: ¡Jekyll, por ejemplo, usa Ruby! Entonces, tal vez debería modificar el título para el caso de Prisma en Jamstack basado en JavaScript. En fin, ¡adelante!

    Un caso de uso muy común para Jamstack es un blog, donde Prisma será útil para que un blog cree un sistema de reacciones. Lo usaría en rutas API con una que buscaría y devolvería el recuento de reacciones y otra que podría registrar una nueva reacción. Para lograr esto, puedes usar los métodos createy findManyde Prisma.

     

    Otro caso de uso común para Jamstack es una página de destino, ¡y no hay nada mejor que una página de destino con estadísticas increíbles! En Jamstack, podemos prerenderizar estas páginas con estadísticas extraídas de nuestras bases de datos que podemos lograr utilizando los métodos de lectura de Prisma.

    A veces, sin embargo, Prisma puede resultar un poco excesivo para determinadas tareas. Recomendaría evitar el uso de Prisma y bases de datos relacionales en general para soluciones que necesitan solo una única tabla de base de datos, ya que agrega complejidad de desarrollo adicional y a menudo innecesaria en estos casos. Por ejemplo, sería excesivo usar Prisma para un cuadro de suscripción a un boletín informativo por correo electrónico o un formulario de contacto.

    Alternativas a Prisma

    Entonces, podríamos usar Prisma para estas tareas, pero podríamos usar una gran cantidad de otras herramientas para lograrlas. Entonces, ¿por qué Prisma? Repasemos tres alternativas de Prisma e intentaré convencerlo de que Prisma es preferible.

    Bases de datos/servicios en la nube

    Servicios como Airtable son increíblemente populares en el espacio Jamstack (yo mismo lo he usado muchísimo), le brindan una base de datos (como una plataforma) a la que puede acceder a través de una API REST. Es muy divertido usarlos y crear prototipos; sin embargo, Prisma es posiblemente una mejor opción para proyectos Jamstack.

    En primer lugar, dado que el costo es un factor importante en el atractivo de Jamstack, es posible que desees evitar algunos de estos servicios. Por ejemplo, en Hack Club, gastamos $671,54 en una suscripción a Airtable Pro el mes pasado para nuestro pequeño equipo (¡ay!).

    Por otro lado, alojar una base de datos PostgreSQL equivalente en la plataforma de Heroku cuesta 9 dólares al mes. Ciertamente hay un argumento a favor de estos servicios en la nube basados ​​en su interfaz de usuario y API, pero respondería señalándole Prisma's Studio y el cliente JavaScript/TypeScript antes mencionado.

    Los servicios en la nube también sufren un problema de rendimiento, especialmente teniendo en cuenta que usted, como usuario, no tiene la capacidad de cambiar o mejorar el rendimiento. Los servicios en la nube que proporcionan la base de datos colocan un intermediario entre su programa y la base de datos que están utilizando, lo que ralentiza la velocidad de acceso a la base de datos. Sin embargo, con Prisma estás realizando llamadas directas a tu base de datos desde tu programa, lo que reduce el tiempo para consultar/modificar la base de datos. Pescados, mariscos, conservas y todo sobre el mar

    Escribir SQL puro

    Entonces, si vamos a acceder a nuestra base de datos PostgreSQL directamente, ¿por qué no usar el módulo node-postgres o, para muchas otras bases de datos, sus controladores equivalentes? Yo diría que la experiencia del desarrollador al usar el cliente de Prisma hace que valga la pena aumentar ligeramente la carga.

    Donde Prisma brilla es en sus mecanografías. El módulo generado para usted por Prisma es totalmente seguro para escribir (interpreta los tipos de su esquema Prisma), lo que le ayuda a evitar errores tipográficos en su base de datos. Además, para proyectos que utilizan TypeScript, Prisma genera automáticamente definiciones de tipo que reflejan la estructura de su modelo. Prisma utiliza estos tipos para validar consultas de bases de datos en tiempo de compilación para garantizar que sean seguras.

     

    Incluso si no está utilizando TypeScript, Prisma también ofrece autocompletar/Intelli-sense, linting y formato a través de su extensión Visual Studio Code. También hay complementos creados/mantenidos por la comunidad para Emacs (emacs-prisma-mode), neovim (coc-prisma), Jetbrains IDE (Prisma Support) y nova (el complemento Prisma) que implementan Prisma Language Server para lograr la validación del código. El resaltado de sintaxis también está disponible para una amplia gama de editores a través de complementos.

    Otros ORM

    Prisma no es, por supuesto, el único ORM disponible para JavaScript/TypeScript. Por ejemplo, TypeORM es otro ORM de alta calidad para proyectos de JavaScript. Y en este caso, todo se reducirá a tus preferencias personales, y te animo a que pruebes una variedad de ORM para encontrar tu favorito. Personalmente elijo Prisma para usar en mi proyecto por tres razones: la extensa documentación (especialmente esta página CRUD , que es un salvavidas), las herramientas adicionales dentro del ecosistema Prisma (por ejemplo, Prisma Migrate y Prisma Studio) y la comunidad activa en torno al herramienta (por ejemplo, Prisma Day y Prisma Slack).

    Usando Prisma en proyectos Jamstack

    Entonces, si quiero usar Prisma en un proyecto Jamstack, ¿cómo lo hago?

    Siguiente.js

    Next.js se está convirtiendo en un marco muy popular en el espacio Jamstack, y Prisma encaja perfectamente en él. Los siguientes ejemplos servirán como ejemplos bastante estándar que puede transferir a otros proyectos utilizando diferentes herramientas JavaScript/TypeScript Jamstack.

    La regla principal para usar Prisma dentro de Next.js es que debe usarse en una configuración del lado del servidor, esto significa que se puede usar en getStaticProps, getServerSidePropsy en rutas API (por ejemplo api/emojis.js, ).

    En código, se ve así ( ejemplo tomado de una aplicación de demostración que creé para una charla en Prisma Day 2021, que era una pared de pegatinas virtual):

    import prisma from '../../../lib/prisma'import { getSession } from 'next-auth/client'function getRandomNum(min, max) { return Math.random() * (max - min) + min}export async function getRedemptions(username) { let allRedemptions = await prisma.user.findMany({ where: { name: username, }, select: { Redemptions: { select: { id: true, Stickers: { select: { nickname: true, imageurl: true, infourl: true }, }, }, distinct: ['stickerId'], }, }, }) allRedemptions = allRedemptions[0].Redemptions.map(x = ({ number: getRandomNum(-30, 30), ...x.Stickers, })) return allRedemptions}export default async function RedeemCodeReq(req, res) { let data = await getRedemptions(req.query.username) res.send(data)}

    Como puede ver, se integra muy bien en un proyecto Next.js. Pero quizás notes algo interesante: '../../../lib/prisma'. Anteriormente, importamos Prisma así:

     

    import { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()

    Desafortunadamente, esto se debe a una peculiaridad en el sistema de actualización en vivo de Next.js. Por lo tanto, Prisma recomienda pegar este fragmento de código en un archivo e importar el código en cada archivo.

    Secoya

    Redwood es una especie de anomalía en esta sección, ya que no es necesariamente un marco Jamstack. Comenzó bajo el lema de llevar el stack completo a Jamstack, pero pasó a inspirarse en Jamstack. Sin embargo, he decidido incluirlo aquí porque requiere un enfoque interesante al incluir Prisma dentro del marco.

    Comienza, como siempre, con la creación de un esquema Prisma, esta vez en api/db/schema.prisma(Redwood agrega esto a cada nuevo proyecto). Sin embargo, para consultar y modificar la base de datos, no utiliza el cliente predeterminado de Prisma. En cambio, en Redwood, se utilizan mutaciones y consultas GraphQL. Por ejemplo, en la aplicación de tareas pendientes de ejemplo de Redwood, esta es la mutación GraphQL utilizada para crear una nueva tarea pendiente:

    const CREATE_TODO = gql` mutation AddTodo_CreateTodo($body: String!) { createTodo(body: $body) { id __typename body status } }`

    Y en este caso, el modelo de Prisma para una tarea pendiente es:

    model Todo { id Int @id @default(autoincrement()) body String status String @default("off")}

    Para activar la mutación GraphQL, utilizamos la useMutationfunción que se basa en el cliente GraphQL de Apollo importado de @redwoodjs/web:

    const [createTodo] = useMutation(CREATE_TODO, { // Updates Apollo's cache, re-rendering affected components update: (cache, { data: { createTodo } }) = { const { todos } = cache.readQuery({ query: TODOS }) cache.writeQuery({ query: TODOS, data: { todos: todos.concat([createTodo]) }, }) }, }) const submitTodo = (body) = { createTodo({ variables: { body }, optimisticResponse: { __typename: 'Mutation', createTodo: { __typename: 'Todo', id: 0, body, status: 'loading' }, }, }) }

    Con Redwood, no necesita preocuparse por configurar el esquema GraphQL/SDL después de crear su esquema Prisma, ya que puede usar el scaffoldcomando de Redwood para convertir el esquema Prisma en servicios y SDL GraphQL yarn rw g sdl Todo, por ejemplo.

    Trabajadores de la tarifa en la nube

    Cloudfare Workers es una plataforma popular para alojar API de Jamstack, ya que coloca su código en el "borde". Sin embargo, la plataforma tiene sus limitaciones, incluida la falta de soporte TCP, que utiliza el cliente Prisma tradicional. Aunque ahora, a través de Prisma Data Proxy, es posible.

    Para usarlo, necesitará una cuenta Prisma Cloud Platform , que actualmente es gratuita. Una vez que haya seguido el proceso de configuración (asegúrese de habilitar Prisma Data Proxy), se le proporcionará una cadena de conexión que comienza con prisma://. Puede utilizar esa cadena de conexión de Prisma en su .envarchivo en lugar de la URL de la base de datos tradicional:

    DATABASE_URL="prisma://aws-us-east-1.prisma-data.com/?api_key=•••••••••••••••••"

    Y luego, en lugar de usar npx prisma generate, use este comando para generar un cliente Prisma:

    PRISMA_CLIENT_ENGINE_TYPE=dataproxy npx prisma generate

    Sus solicitudes de base de datos se enviarán mediante proxy y podrá utilizar Prisma Client como de costumbre. No es una configuración perfecta, pero para quienes buscan conexiones de bases de datos en Cloudfare Workers, es una solución relativamente buena.

    Conclusión

    Para concluir, si está buscando una manera de conectar aplicaciones Jamstack con una base de datos, no buscaría más que Prisma. Su experiencia de desarrollador, amplias herramientas y rendimiento lo convierten en la elección perfecta. Next.js, Redwood y Cloudfare Workers: cada uno de ellos tiene una forma única de usar Prisma, pero aún así funciona muy bien en todos ellos.

    Espero que hayas disfrutado explorando Prisma conmigo. ¡Gracias!

    Lecturas adicionales sobre la revista Smashing

    • “ Patrones de renderizado de Jamstack: la evolución ”, Ekene Eze
    • “ Herramientas de aprendizaje interactivas para desarrolladores front-end ”, Louis Lazaris
    • " Jamstack CMS: el pasado, el presente y el futuro ", Mike Neumegen
    • “ Smashing Podcast Episodio 29 con Leslie Cohn-Wein: ¿Cómo funciona Netlify Dogfood The Jamstack? ”, Drew McLellan

    (vf, yk, il)Explora más en

    • pila de mermelada
    • javascript
    • Sin servidor
    • Siguiente.js





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    El caso de Prisma en el Jamstack

    El caso de Prisma en el Jamstack

    SmashingConf Friburgo 2024 Patrones de diseño para interfaces de IA, con Vitaly Friedman Índice Los caso

    programar

    es

    https://aprendeprogramando.es/static/images/programar-el-caso-de-prisma-en-el-jamstack-1146-0.jpg

    2024-04-04

     

    El caso de Prisma en el Jamstack
    El caso de Prisma en el Jamstack

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20