Remix brinda a los desarrolladores el poder de escribir su código frontend y backend en un solo lugar y en un solo lenguaje, lo cual reduce significativamente la barrera fullstack para los desarrolladores frontend y los desarrolladores más nuevos. La pieza restante, sin embargo, es la base de datos. Agrega Prisma a la mezcla y tendrás una experiencia fullstack poderosa con una curva de aprendizaje muy baja. En esta charla, echaremos un vistazo a la increíble experiencia de desarrollo que obtienes cuando combinas los dos.
Cómo Remix y Prisma convierten a los desarrolladores frontend en desarrolladores fullstack
Video Summary and Transcription
Remix y Prisma permiten a los desarrolladores frontend convertirse en desarrolladores fullstack al trabajar en diferentes partes del stack sin sumergirse en complejidades. Proporcionan un excelente marco para escribir código e interactuar con bases de datos, lo que facilita ser un desarrollador fullstack. El ORM de Prisma permite mapear modelos de bases de datos a modelos de JavaScript o JSON. Desarrollar una aplicación fullstack con Remix requiere estructurar componentes y cargadores de manera diferente, pero simplifica el desarrollo al centrarse en un solo lugar.
1. Introducción a Remix y Prisma
¡Bienvenidos a RemixConf! Hoy hablaré sobre cómo Remix y Prisma permiten a los desarrolladores front-end convertirse en desarrolladores full-stack. Estas tecnologías te permiten trabajar en diferentes partes del stack sin tener que sumergirte en todas las complejidades de la base de datos y las capas de API. Permítanme presentarme. Soy Saban Adams, un defensor del desarrollo en Prisma. No dudes en contactarme en Twitter @SabanTheDev si tienes alguna pregunta o quieres discutir sobre Remix o Prisma.
Bienvenidos a todos. Muchas gracias por unirse a mí aquí hoy en RemixConf. Estoy súper emocionado de estar hablando aquí, y sé que el programa de conferencias es súper genial y hay muchas charlas interesantes y cosas emocionantes que se están diciendo, así que realmente aprecio que se tomen el tiempo para pasar y escuchar lo que tengo que decir sobre Remix y Prisma. Es súper emocionante para mí estar hablando aquí sobre esto porque uso Remix y Prisma a diario. Tengo la oportunidad de trabajar mucho con estas dos tecnologías, y realmente lo disfruto, y he tenido muchos descubrimientos interesantes, así que estoy súper emocionado de poder hablar sobre algunas de las cosas que he estado aprendiendo hoy. Y como sugiere el título, y como probablemente hayan adivinado, lo que realmente voy a estar hablando es cómo Remix y Prisma permiten a los desarrolladores front-end convertirse en algo así como desarrolladores full-stack. Pueden trabajar en todas las diferentes partes del stack juntas sin tener que aprender todos los detalles complicados de trabajar en la capa de base de datos o la capa de API, donde tal vez estén acostumbrados a trabajar solo en la capa front-end. Remix y Prisma juntos te permiten hacer esto fácilmente y borran un poco las líneas entre los diferentes stacks, así que eso es en lo que se va a centrar esta charla. Pero antes de entrar en algunos de los detalles complicados de eso, permítanme presentarme un poco. Soy Saban Adams, soy un defensor del desarrollo en Prisma, así que tengo la oportunidad de jugar con Prisma a diario, y también he tenido la oportunidad de trabajar mucho con él usando Remix, así que he tenido la oportunidad de jugar bastante con este stack y realmente lo he disfrutado y estoy súper emocionado de compartir lo que he encontrado. Si quieres enviarme un mensaje o hacerme una pregunta sobre esta charla o sobre cualquier cosa en general, ya sea Remix o Prisma, no dudes en enviarme un mensaje a mi Twitter, en SabanTheDev. Respondo mis mensajes directos y estaré monitoreándolos de cerca.
2. La sinergia de Remix y Prisma
Remix y Prisma se centran en proporcionar una buena experiencia de desarrollo, lo que te permite comenzar a construir tu software rápidamente. En esta charla, demostraré algunos trucos y te mostraré cómo configurar un proyecto con Remix y Prisma.
3. Roles and Responsibilities
Vamos a entender los roles y responsabilidades de los desarrolladores front-end, los desarrolladores back-end y los desarrolladores de bases de datos. Los desarrolladores front-end se centran en las interacciones del usuario, la parte visual y el trabajo con las APIs. Los desarrolladores back-end se encargan de la lógica de negocio, la persistencia de datos, la seguridad y la exposición de datos a través de las APIs. Los desarrolladores de bases de datos se centran en el modelado de datos, la migración de esquemas y la optimización del rendimiento. Cada rol tiene su propio nicho y requiere un aprendizaje continuo.
4. Benefits of Remix and Prisma
Remix y Prisma facilitan ser un desarrollador full-stack al proporcionar un excelente marco de trabajo para escribir código e interactuar con bases de datos. Remix difumina las líneas entre el front-end y el back-end, permitiéndote escribir código en un solo lugar con un solo lenguaje. Prisma ofrece herramientas para gestionar bases de datos, incluyendo migraciones de esquemas, un lenguaje de modelado y un cliente de base de datos seguro. Estas tecnologías trabajan juntas de manera fluida, proporcionando un buen conjunto de herramientas para construir aplicaciones en todo el stack.
Ahora tenemos este contexto de las diferencias entre un desarrollador full-stack, un desarrollador front-end , un desarrollador back-end y un desarrollador de bases de datos. Y la conclusión a la que hemos llegado es que eso es mucho. Hay mucho por hacer. Muchas responsabilidades de las que preocuparse . Y lo que voy a mostrarte ahora es cómo Remix y Prisma realmente hacen esto un poco más fácil. Te permiten ser un desarrollador full-stack sin tener que preocuparte realmente por todas estas responsabilidades individuales. O al menos no preocuparte directamente por ellas. Así que echemos un vistazo a cómo Remix ayuda en esto. Lo que Remix te brinda es un excelente marco de trabajo para hacer el front-end y el back-end . Como mencioné antes, difumina las líneas de lo que es el front-end y el back-end incluso. Y lo hace utilizando cosas como funciones de carga y de acción, que son funciones dentro de tu página de plantilla que se empaquetan por separado utilizando esta división automática de código, que es el siguiente punto allí, a partir de tu código front-end. Y maneja estas interacciones de back-end con tu base de datos o con la forma en que estás recuperando datos. Esto es esencialmente tu código de back-end, pero está escrito en el mismo lenguaje y en el mismo lugar que tu código de front-end. Entonces, en pocas palabras, así es como Remix te ayuda a convertirte en más un desarrollador de front-end y back-end, un desarrollador full-stack. Te permite escribir este código en un solo lugar utilizando un solo lenguaje con un solo patrón de organización.
Y luego Prisma te ayuda al brindarte un conjunto de herramientas para interactuar y gestionar tu base de datos de manera fácil. Mientras que Remix se enfoca en escribir código para el front-end y el back-end y unir esas dos piezas, Prisma se enfoca realmente en facilitar tus interacciones entre el back-end y tu base de datos y incluso la gestión de tu base de datos. Lo hace permitiéndote construir fácilmente migraciones de esquemas. Entonces, si necesitas llevar tu base de datos del punto A al punto B, en cuanto a su esquema se refiere, Prisma tiene herramientas que te ayudan a hacer esto fácilmente y te avisa si algo va a salir mal o si necesitas hacer algunos cambios antes de poder aplicar este cambio en la base de datos. También te brinda un lenguaje de modelado para facilitar el modelado de datos. Te proporciona un cliente de base de datos completamente seguro para interactuar con tus datos de manera fácil dentro del código de tu aplicación. Y también te brinda un conjunto de tipos basados en el modelo de tu base de datos o en el esquema de tu base de datos. Y esto es muy útil. Este punto aquí es muy interesante porque estos tipos se basan en tu base de datos y se pueden utilizar en tu código de back-end, pero también porque estás utilizando Remix, y tu back-end y tu front-end están tan entrelazados de esta manera, estos tipos realmente se pueden utilizar en todo tu stack completo. Y esto te brinda un acceso muy fácil para construir una aplicación completamente segura en cuanto a tipos se refiere, simplemente porque estás utilizando Remix y Prisma. Entonces, no solo obtienes esta gran experiencia de desarrollo, donde pasas de un rol de front-end a un rol de full-stack cuando trabajas con Remix y Prisma, sino que también facilita hacer estas cosas porque te brinda este conjunto de herramientas y tipos agradables para trabajar en todo el stack y hacer tu vida aún más fácil. Entonces, estas dos tecnologías realmente son muy buenas entre sí. Se fusionan perfectamente, te brindan un buen conjunto de herramientas para construir tus aplicaciones, y lo que haremos a continuación es construir una aplicación y esta aplicación será muy sencilla, no será la más bonita, pero lo que quiero mostrar aquí es cómo realmente puedes utilizar estas tecnologías para trabajar en todo el stack y construir una aplicación completamente funcional
5. Setting Up Remix and Prisma
Vamos directamente a la demostración y veamos qué tenemos. Para empezar, ejecuta npx create-remix en su versión más reciente para configurar tu aplicación de Remix. Esto te proporciona una aplicación full stack lista para ejecutarse. Instala Prisma con npm i Prisma e inicialízalo con npx Prisma init, especificando SQLite como proveedor de origen de datos. Esto configura Prisma en tu aplicación y crea un archivo de esquema para modelar las tablas de tu base de datos. Cambia la URL en el archivo de esquema para que apunte a la ubicación deseada del archivo de base de datos SQLite. La aplicación mostrará una lista de usuarios en una página sin almacenar ni eliminar datos.
6. Seeding the Database and Applying the Data Model
Vamos a sembrar una base de datos con datos de usuario y aplicar el modelo de datos utilizando una migración. Esto genera un archivo SQL y un cliente Prisma para consultar la base de datos. En el archivo db.ts, importamos el constructor del cliente Prisma y declaramos una variable global para evitar crear múltiples instancias del cliente. Luego podemos sembrar la base de datos creando un archivo seed.ts.
7. Importando el Cliente Prisma y Sembrando la Base de Datos
En esta parte, importamos el cliente Prisma y creamos una función llamada main para crear algunos datos. Configuramos el script de sembrado en package.json e instalamos ts-node. Ejecutando npx prisma db seed se poblara la base de datos. Luego creamos una función de carga en Remix que devuelve JSON de la consulta Prisma, obteniendo todos los usuarios.
8. Mostrando Datos y Conclusión
Necesitamos asegurarnos de que esto sea una función asincrónica y devolverlo como JSON. Luego, queremos obtener los datos desde el backend hasta el frontend. Usamos los datos del cargador para obtener una lista de usuarios y luego construimos nuestra lista mapeando los usuarios y mostrando su nombre y apodo. Ejecutar npm run dev iniciará el servidor y mostrará los datos. Configurar una aplicación de pila completa con Remix y Prisma es simple y proporciona seguridad de tipo de extremo a extremo. ¡Gracias por acompañarme hoy!
Así que quiero agradecerles nuevamente por acompañarme hoy. Y espero que esto les haya sido útil. Y espero que les haya mostrado un poco lo fácil que es configurar esta aplicación de pila completa y trabajar en todas las áreas diferentes de la pila utilizando Remix y Prisma. Esta fue una descripción general de alto nivel. Solo se puede abarcar tanto en 20 minutos.
9. Remix y Prisma Series
Si quieres aprender más sobre cómo usar Remix y Prisma junto con MongoDB, he escrito una serie que proporciona una descripción detallada de cómo construir una aplicación completa. Echa un vistazo al enlace para más detalles. ¡Gracias por acompañarme y disfruta del resto de la conferencia!
Pero si quieres profundizar un poco más, tengo una serie que he escrito aquí que explora el uso de Remix y Prisma juntos, específicamente con MongoDB. Y esto cubrirá una descripción general detallada de cómo construir una aplicación completa utilizando Remix y Prisma. Así que si sigues este enlace aquí, te llevará a la serie que he escrito. Pero muchas gracias por acompañarme y espero que tengas un gran resto de la conferencia. Adiós. ¡Hola, cómo estás? Genial. Genial. ¿Cómo estás tú? Bien. Muchas gracias por esa charla. Fue realmente maravillosa. Primero, queremos cambiar a Slido y ver los resultados de la pregunta que hiciste. Así que dijimos, ¿has usado Prisma antes? Sí o no. Y parece que el 73% de nuestra audiencia ha usado Prisma antes. Eso es un gran número. Eso es increíble. Me encanta ver eso. Es genial. Lo sé. Me encanta ver eso también. Es realmente asombroso. Y luego tenemos una pregunta también, que hicimos a la audiencia al principio y también le hacemos a cada ponente. ¿Cuál es tu función favorita de Remix? Sí, siento que es una función muy típica que usa mi favorita, pero simplemente los cargadores y las acciones, la forma en que están ahí mismo junto a tu código. Me encanta tanto. Hace las cosas tan fáciles. Estoy completamente de acuerdo con eso también. Me encanta que también use las API de la plataforma. Así que te familiarizas más con el trabajo con la web al usar Remix, y me encantan los cargadores y las acciones por eso. Sí, absolutamente. Me recuerda a cuando desarrollaba con ColdFusion cuando estaba comenzando mi carrera, y me recuerda a eso porque todo tu código usaba estándares web y era
10. Explicación del ORM de Prisma
Un ORM es una abstracción sobre la base de datos que te permite mapear tus modelos en la base de datos a modelos JavaScript o JSON en el código de tu aplicación. Unifica la interacción con la base de datos en un solo lenguaje, como JavaScript en el caso de Prisma.
11. Integración y Beneficios de Prisma
Anteriormente he utilizado Prisma con KpopStack de Netlify, escribiendo código JavaScript sin problemas que funcionaba tanto con Supabase como con Prisma. Puedes cambiar de base de datos cambiando un indicador en el esquema. Prisma ofrece una seguridad de tipo de primera clase, generando tipos basados en la consulta real. No es necesario conocer bien las bases de datos para usar Prisma, ya que puedes construir consultas utilizando JavaScript y utilizar el registro para ver qué está sucediendo bajo el capó.
QnA
Impacto de Prisma en los Desarrolladores Backend
Puedes aprender cómo escribir consultas en la base de datos utilizando ORM y ColdFusion. Los desarrolladores backend tradicionales perciben a Prisma en Remix de manera positiva debido a la seguridad de tipo y una experiencia de desarrollo más fluida. Actualmente, Prisma no ofrece una forma de manejar actualizaciones en el modelo cuando el tipo de una columna cambia. Si bien puedes cambiar la estructura de la base de datos con Prisma, manipular datos dentro de columnas y tablas está fuera de las capacidades actuales de Prisma.
Diría que un desarrollador backend tradicional definitivamente recibiría esto de buena manera, específicamente debido a la seguridad de tipo que mencionamos y no tener que tener ese conocimiento específico sobre cada base de datos subyacente. Pero también, porque permite que todo tu proyecto tenga un poco más de sinergia cuando utilizas la herramienta de migración que Prisma ofrece cuando usas el cliente de Prisma. Cuando juntas todas estas cosas, obtienes una buena experiencia de desarrollo que en su mayor parte, es un camino tranquilo, creo. Genial. Sí, esa es una gran respuesta. De acuerdo. Vladimir pregunta, ¿Prisma ofrece una forma de manejar actualizaciones en el modelo cuando el tipo de una columna cambia y necesitas manipular esos datos que ya estaban en la columna que estás cambiando? Por ejemplo, cambiar algo de una cadena a un número y necesitar decidir cuáles serán los nuevos valores. Entiendo. Eso sería algo similar a una migración de datos. Y no, dentro del ecosistema de Prisma, en realidad no lo admitimos. Hay guías y tutoriales sobre cómo solucionarlo. Pero a medida que manejamos más de la migración de esquemas, aún no lo admitimos. Está en el plan de desarrollo. Es algo de lo que hemos hablado y estamos investigando. Pero por el momento, no puedes cambiar realmente los datos junto con tu migración. De acuerdo. Entonces, estoy tratando de entender esto. Configuras tu esquema y tienes tu estructura de datos, y en realidad no puedes cambiar eso con Prisma. ¿Es eso lo que estás diciendo? Entonces puedes cambiar el esquema. Puedes cambiar la estructura de la base de datos, las columnas, las tablas, pero los datos dentro de esas columnas y tablas,
Desarrollando una Aplicación Full Stack con Remix
Desarrollar una aplicación full stack con Remix difiere de una aplicación tradicional con front-end y back-end separados. En una aplicación tradicional, el front-end y el back-end se desarrollan por separado y se comunican entre sí. Con Remix, todo está en un solo lugar, y cada archivo o ruta de front-end tiene una ruta de API asociada. Esto requiere más consideración para estructurar componentes y cargadores. Sin embargo, simplifica el desarrollo al centrarse en un solo lugar. El sistema de enrutamiento de Remix trata cada ruta como una entidad propia, cargando su propio estado y datos específicos. Esto requiere una mentalidad diferente en comparación con las aplicaciones tradicionales.