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.
This talk has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.
FAQ
Remix es un marco de trabajo que ayuda a los desarrolladores a manejar tanto el front-end como el back-end en un solo lugar, utilizando un mismo lenguaje y patrón de organización. Facilita la conversión de un desarrollador front-end en un desarrollador full-stack al difuminar las líneas entre el front-end y el back-end.
Prisma es una herramienta que facilita la interacción y gestión de bases de datos. Ofrece un conjunto de herramientas para realizar migraciones de esquemas fácilmente, un lenguaje de modelado para diseñar esquemas de datos y un cliente de base de datos seguro. Ayuda significativamente en la seguridad de tipo y en la manipulación eficiente de los datos.
Remix y Prisma permiten a los desarrolladores trabajar en las diferentes partes del stack de desarrollo sin preocuparse por los detalles complicados de cada capa. Prisma gestiona la base de datos mientras que Remix maneja la integración del front-end y back-end, permitiendo así a los desarrolladores centrarse más en la construcción de aplicaciones.
En la charla, se demostró cómo configurar un proyecto utilizando Remix y Prisma, desde la creación de una aplicación hasta la implementación de funciones de carga y la interacción con la base de datos. Se mostró cómo estas herramientas pueden simplificar el desarrollo de aplicaciones full-stack.
Se pueden desarrollar aplicaciones full-stack que requieren una gestión de front-end y back-end integrada, junto con una interacción eficiente con la base de datos. Estas herramientas son particularmente útiles para aplicaciones que necesitan una rápida configuración y una gestión sencilla de sus esquemas de datos.
No es necesario tener conocimientos avanzados en bases de datos para usar Prisma. Esta herramienta simplifica la interacción con la base de datos mediante un lenguaje unificado, permitiendo a los desarrolladores construir y gestionar sus bases de datos con mayor facilidad y sin necesidad de aprender el lenguaje específico de cada base de datos.
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.
¡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
Short description:
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.
así que puedes esperar una respuesta de mi parte tan pronto como pueda. Pero sí, vamos a entrar directamente en ello. Lo primero que tengo aquí es una declaración muy simple, a Remix le encanta Prisma, y la declaración también es cierta en sentido contrario. Prisma ama a Remix. Nuestros dos productos se centran mucho en el mismo objetivo, que es proporcionar una buena experiencia de desarrollo. Sin eso, no tendríamos una misión. Nuestra misión es permitir a los desarrolladores sumergirse en su idea de producto y comenzar a desarrollar de inmediato sin ninguna de esas dificultades al principio, donde estás tratando de poner las cosas en marcha, configurar las cosas, entender tu modelo de datos, todas esas cosas. Nuestro objetivo como productos individuales, Remix y Prisma, es hacer que ese proceso sea muy fácil para ti y permitirte comenzar a construir tus productos, tu software lo antes posible, sin tener que preocuparte por esas cosas. Así que esos son nuestros objetivos. Remix y Prisma te permiten hacer esto, y cuando los combinas, te permiten hacer mucho más mucho más rápido. Y eso es de lo que realmente vamos a hablar hoy. Y de hecho, cerca del final de esta charla, voy a hacer una demostración donde te mostraré algunas de las cosas
3. Roles and Responsibilities
Short description:
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.
estos pequeños trucos y mostrándote cómo configurar un proyecto con Remix y Prisma. Pero antes de hacer eso, demos un paso atrás y pensemos en lo que significa ser un desarrollador front-end, lo que significa ser un desarrollador back-end, un desarrollador de database, y luego qué es un desarrollador full-stack y en qué consiste su rol y sus responsabilidades, para tener un contexto de lo que estamos tratando aquí. Así que el primero es el desarrollador front-end. Y los desarrolladores front-end, a un nivel muy alto, se centran en las interacciones del usuario. Se centran en cosas como la parte visual de tu sitio web, la experiencia del usuario mientras utiliza tu sitio web e interactúa con las APIs que tal vez haya construido un desarrollador back-end o un desarrollador full-stack que permiten obtener datos de tu database y mostrarlos en la interfaz de usuario. Y, por supuesto, cuando hablo de las diferentes responsabilidades de estos diferentes tipos de desarrolladores, estas son a un nivel muy alto. Esta no es una lista exhaustiva y no es igual en todas partes. Así que si eres un desarrollador front-end y piensas, wow, hago un poco más que eso, tal vez debería ganar más dinero. Eso es algo que definitivamente puedes hablar con tu manager, pero esta es solo una descripción general de alto nivel de en qué se centran estas posiciones. Así que este es el desarrollador front-end. Ahora veamos al desarrollador back-end. Nuevamente, a un nivel muy alto, los desarrolladores back-end se centran en construir la lógica de negocio. Se centran en construir las cosas que hacen que tu aplicación o tu software funcione como se supone funcionalmente. No se trata tanto de lo que el usuario ve, sino de lo que sucede cuando el usuario tal vez hace clic en un botón, o lo que sucede cuando un usuario guarda algo. Eso es lo que sucede y en eso trabajas como desarrollador back-end. Así que trabajas en la lógica de negocio. Trabajas en persistir datos en tu database. Dentro de la capa de la API o el back-end, recibirás algunos datos y luego deberás guardarlos, probablemente en una database. También te centras y eres responsable de la seguridad de tu aplicación. A medida que los datos fluyen dentro y fuera de tu aplicación, necesitas saber cómo hacerlo de manera segura, cómo mantener seguros los datos de tus usuarios. Y también eres responsable de exponer datos. Construyendo APIs, construyendo puntos finales, construyendo infraestructuras que permitan que algún tipo de consumidor consuma tus datos, obtenga datos de tus recursos. Así que esa es una descripción general de alto nivel de un desarrollador back-end. Y finalmente tenemos al desarrollador de bases de datos y esto puede ser un administrador de bases de datos. Puede ser una posición específica dentro de tu empresa, pero a menudo hay un desarrollador enfocado en la database. Y lo que hacen estos desarrolladores es centrarse en el modelado de datos, en crear el modelo de datos que se ajuste a las necesidades de tu negocio. Se centran en la migración de esquemas, en llevar el esquema de tu database y tu modelo de datos de un punto A a un punto B de manera fluida sin romper nada. Y también se centran en el rendimiento, en poner en marcha índices, escribir consultas de manera más eficiente, para asegurarse de que tu aplicación funcione a la mayor velocidad posible. Así que esa también es una descripción general de alto nivel de las responsabilidades de un desarrollador de bases de datos o DBA. Y si observas todo esto, es mucho trabajo para hacer. Estás abarcando muchas cosas diferentes, e incluso dentro de las secciones individuales, front-end, back-end y desarrolladores de database, hay diferentes nichos en esas secciones que realmente llevan mucho tiempo aprender, y honestamente, puedes
4. Benefits of Remix and Prisma
Short description:
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.
nunca realmente aprender todo. Hay tanto por aprender, tanto por hacer, tantas diferentes responsabilidades. Es por eso que hemos dividido estos roles en diferentes áreas. Así, las personas pueden centrarse en piezas individuales y hacer lo mejor posible en esas piezas.
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
Short description:
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.
Vamos a configurar la aplicación de Remix muy rápidamente y de manera muy sencilla. Así que vamos a pasar directamente a la demostración y veamos qué tenemos. Para empezar, lo que vamos a necesitar hacer es iniciar una aplicación de Remix. Eso es lo que vamos a hacer antes de entrar en los detalles de lo que estamos construyendo aquí. Y para hacer eso, simplemente ejecuta npx create-remix en su versión más reciente, y esto es suficiente para configurar tu aplicación de Remix. Esto te proporciona una aplicación full stack lista para ejecutarse. Solo seguiré los valores predeterminados aquí. Obtendré solo lo básico, el servidor de aplicaciones de Remix. Voy a usar TypeScript y permitiré que instale los paquetes de npm de inmediato. Luego, me moveré al directorio de mi aplicación de Remix. Esa es la aplicación que acabo de crear. Y la abriré en mi editor. Y lo que veremos aquí es una aplicación básica de Remix. Si no estás familiarizado con Remix y cómo organiza sus carpetas y archivos, no dudes en consultar la documentación. Estoy seguro de que muchas personas están hablando de ello en las diversas charlas de hoy. Así que definitivamente échales un vistazo. Pero lo primero que haremos es instalar Prisma. Así que vamos a hacer npm i Prisma. Y esto simplemente instalará la herramienta de línea de comandos de Prisma para que podamos comenzar con Prisma. Y ahora que está instalado, lo inicializaremos. Así que npx Prisma init. Y voy a decir que queremos que el proveedor de origen de datos sea SQLite. Y esto simplemente significa que queremos configurar Prisma en nuestra aplicación y que queremos usar SQLite como nuestra base de datos. Lo que hizo fue generar un archivo de esquema simple llamado schema.prisma. Aquí es donde modelaremos nuestras tablas de base de datos y las diversas piezas de nuestra base de datos. Y lo primero que haré es cambiar esta URL para que apunte al archivo dev.DB. Esto simplemente indica dónde queremos guardar nuestro archivo de base de datos SQLite. Y una vez que realmente comencemos a almacenar algunos datos y a construir nuestro modelo. Y para el modelo de base de datos en sí, lo que esta aplicación hará es simplemente mostrar una lista de usuarios en una página. Así que será muy sencillo. No vamos a almacenar ni eliminar datos.
6. Seeding the Database and Applying the Data Model
Short description:
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.
Vamos a sembrar una database con algunos data y mostrarlo en una página. Así que voy a crear un modelo y lo llamaré usuario. Y este usuario va a tener un ID que será una cadena. Y este es la clave primaria. Y luego vamos a decir que debería tener un valor predeterminado de CUID. Así que me dará un ID aleatorio cada vez que se cree un nuevo usuario. Y luego lo siguiente es simplemente un nombre. Vamos a tener un nombre. Y luego también vamos a tener un apodo aquí. Esto también será una cadena. Así que esto es nuestro modelo de datos muy simple. Vamos a tener una tabla de database llamada usuario. Y va a tener estas tres columnas en ella. Y ahora que hemos hecho eso, esto se encarga de nuestro paso de modelado de data, que era una de las cosas de las que tendrías que preocuparte si fueras un administrador de database. Lo siguiente que vamos a hacer es aplicar realmente este modelo de data a nuestra database utilizando una migración. Así que vamos a hacer mpx prisma migrate dev, y le pondremos el nombre de init a esta migración porque es la primera migración que hemos aplicado. Y lo que hace esto es que crea un archivo SQL para nosotros con nuestra migración. Así que esto crea nuestra tabla de database, y luego la aplica realmente. Y luego lo que hizo después de eso es que generó un cliente Prisma para nosotros también. Dice eso aquí. Este es el cliente de database seguro en términos de tipos que nos permite consultar realmente nuestra database desde nuestro código de aplicación. Y como hizo eso, vamos a utilizarlo realmente. Así que aquí, vamos a crear un nuevo archivo, y lo voy a hacer en la carpeta de la aplicación, y se llamará db.ts. Y en este archivo db.ts, voy a pegar un pequeño fragmento de código, y voy a explicar qué hace. Lo que estamos haciendo aquí es importar el constructor del cliente Prisma. Así que esto es para construir nuestra instancia del cliente Prisma. También estoy declarando una variable global llamada __prisma, y la razón por la que hago esto es para que cuando trabajemos en un entorno de recarga en vivo porque estamos en modo de desarrollo cuando ejecutamos esto, no va a crear nuevas instancias del cliente Prisma y agotar los recursos de nuestra database creando demasiadas conexiones. Va a decir que ya sabe que hay un Prisma, así que no va a crear uno nuevo. Así que eso es lo que estamos haciendo aquí, y lo que podemos hacer a continuación es sembrar nuestra database. Para hacer eso, voy a entrar en la carpeta de Prisma,
7. Importando el Cliente Prisma y Sembrando la Base de Datos
Short description:
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.
Crearemos un archivo llamado seed.ts. También importaré el cliente Prisma aquí. Desde Prisma/cliente, y luego en la siguiente línea, crearé una nueva constante llamada Prisma, y será igual a un nuevo cliente Prisma. Luego, agregaremos una función aquí llamada async function main. Y esta función simplemente creará algunos data para nosotros. Así que esperaremos Prisma. Veremos esta agradable autocompletación aquí. Podemos usar el usuario y vamos a crear un usuario. Y para hacer esto, queremos darle algunos data, así que le daremos un nombre. Pondré Sabin Adams y apodo. Solo pondré Sabin el mundo. Luego, copiaré esto un par de veces. Y hagamos dos y tres para que sepamos que son diferentes. No es muy creativo, pero al menos podemos mostrar que esto va a funcionar. Por último, necesitamos llamar a esto y luego podemos ir a package.json y aquí es donde vamos a configurar cómo ejecutar el script de sembrado, así que crearemos una clave Prisma aquí. Agregaremos un sembrado y luego hagamos ts-node Prisma/seed.ts. Y para hacer esto, vamos a necesitar instalar ts-node. Así que abriré una terminal y haré, veamos, npm i ts-node. Listo, ya lo hemos instalado. Ahora deberíamos poder guardar esto y ejecutar el comando npx prisma db seed. Y esto debería ejecutar nuestro script de sembrado. Y ahora tenemos data en nuestra base de datos. En este punto, podemos crear realmente una función de carga en Remix. Así que haremos una exportación const loader. Y eso va a ser una función que va a devolver algunos data. Y lo que va a devolver es un JSON de Remix run node. Y este JSON va a ser los resultados de nuestra consulta Prisma. Así que importamos nuestra instancia Prisma de nuestro archivo DB que creamos. Y vamos a decir const usuarios = await Prisma.usuario.findMany. Esto va a obtener todos los usuarios
8. Mostrando Datos y Conclusión
Short description:
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!
que tenemos. Y luego debemos asegurarnos de que esto sea una función asincrónica. Y luego lo devolveremos como JSON. Lo siguiente que queremos hacer es realmente obtener estos data. Este es el código del backend aquí, pero queremos obtenerlo en nuestro frontend. Entonces vamos a usar estos datos del cargador haciendo const data equals use loader data. Y creo que esto debería ser en realidad usuarios. Y luego, lo que esto va a ser, podemos configurar el tipo de esto y será el tipo de nuestra función de cargador. Entonces, esta función de cargador va a devolver una lista de usuarios y obtiene este tipo de usuario de Prisma. Y ahora sabemos que desde aquí, esto será en realidad, hagamos usuarios así. Sí, ahora sabemos que tenemos este objeto de usuarios y que será una lista de usuarios. Y lo último que podemos hacer para terminar esto y mostrarlo es construir nuestra lista. Entonces vamos a hacer usuarios.map y vamos a decir que vamos a obtener un usuario de cada uno de estos. Y esto simplemente será un Li. Y dentro de este etiqueta Li vamos a mostrar, hagamos el nombre. Entonces vamos a hacer user dot y puedes ver que obtenemos una buena autocompletación aquí porque obtenemos esos tipos y también haremos una etiqueta p debajo de eso con el apodo. Y creo que esto nos va a dar un error a menos que tengamos una clave. Así que también agregaré una clave. Ahí lo tienes. Si ejecuto esto, npm run dev, deberíamos ver que tenemos un servidor en ejecución en localhost. Y si muevo esto aquí, ahí lo tienes. Tenemos nuestros data. Ahora tenemos una aplicación de pila completa y fue muy fácil de configurar. Configuramos nuestra base de datos con una migración, configuramos nuestra aplicación de pila completa con nuestro código del backend. Y luego también obtuvimos nuestro código del frontend. Y como bonificación, también obtuvimos seguridad de tipo de extremo a extremo porque estamos usando Prisma y porque el código del frontend y del backend está en el mismo archivo, es muy fácil configurar esto.
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
Short description:
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
Short description:
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.
todo junto. Es simplemente muy bueno. Sí, absolutamente, y en mi introducción mencioné, ¿qué es un ORM? ¿Sabemos qué es un ORM? Y dije que es un mapeador objeto-relacional, pero no sé si eso realmente me lo explica. ¿Puedes explicar un poco mejor qué hace realmente Prisma? Sí, en sentido general, un ORM es una abstracción sobre la base de datos que te permite mapear tus modelos en la base de datos o en tu esquema a modelos JavaScript o JSON en el código de tu aplicación. Y la parte interesante es que no necesitas utilizar el lenguaje específico de la base de datos subyacente, ya que suelen ser difíciles de aprender y varían de una base de datos a otra. Unifica todo en un solo lenguaje, como JavaScript en el caso de Prisma, donde puedes interactuar con tu base de datos sin tener que conocer el lenguaje específico de esa base de datos.
11. Integración y Beneficios de Prisma
Short description:
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ó.
conocimiento. Sí, eso tiene un poco más de sentido, y eso en realidad plantea algo más que he utilizado Prisma antes cuando estaba integrado con KpopStack de Netlify, y utiliza Supabase y Prisma como una capa ORM para usar JavaScript para interactuar con la base de datos. Y luego estaba siguiendo el tutorial de chistes en el sitio de Remix y utiliza, creo, SQLite como la base de datos, y fue muy fácil para mí simplemente escribir mi código JavaScript que iba a ambas bases de datos y funcionaba, y era el mismo código exacto, lo cual fue algo loco. Sí, sí, incluso hemos visto a personas en Prisma desarrollar una aplicación con una base de datos y luego decidir mucho después, sabes qué, tal vez quiero usar SQL en lugar de Postgres o algo como MySQL, y simplemente cambian el indicador en su esquema y funciona. Así que es bueno para experimentar. Sí, eso también es sorprendente, que pueda cambiar eso. Y ¿hay algo con lo que no funcione, supongo? Bueno, sí, siempre va a haber, siempre va a haber algunas cosas específicas de la base de datos, como tipos de datos o tal vez funciones específicas que tienen dentro de cada base de datos que admitimos a través de atributos específicos en Prisma que pueden no funcionar cuando cambias el indicador. Sin embargo, la extensión de Prisma para VS Code señalará eso y no te permitirá generar Prisma hasta que soluciones esos problemas. De acuerdo. Eso responde un poco otra pregunta que tengo, como ¿qué problemas resuelve Prisma?, pero ¿hay otros beneficios de Prisma o algo más que destaque para ti como experiencia de desarrollo o algo que sea realmente una buena característica y una razón para usar Prisma? Sí, absolutamente. Creo que, como dice el sitio web, y como prácticamente cualquier persona que hable sobre Prisma dirá, la seguridad de tipo que ofrece es de primera clase. Hay muchos ORMs por ahí que ofrecen seguridad de tipo, pero no la ofrecen en el grado en que lo hacemos nosotros. Por lo general, los ORMs tienen una clase que representa cada modelo en tu base de datos. Y cuando consultas la base de datos, obtienes una representación de esa clase. Sin embargo, con Prisma, los tipos se generan en función de la consulta real que ejecutas. Entonces, sabes con certeza que el tipo se va a modelar exactamente en función de lo que obtuviste de la base de datos. Así que eso es de gran ayuda. Y hasta que realmente lo uses en una aplicación, puede ser un poco confuso. Pero una vez que realmente lo implementas en una aplicación más grande, es ridículamente útil. Creo que eso es cierto. Como la seguridad de tipo es algo bueno de tener. Y cuando está integrada y se hace por ti y de una manera realmente buena, creo que eso es genial. He tenido problemas con TypeScript antes donde tus tipos no se generan automáticamente. Y así que si puedes tener seguridad de tipo lista para usar, creo que eso es increíble. Entonces, ¿necesito conocer bien las bases de datos para adentrarme en el desarrollo full stack, volviendo a tu charla y a lo que se trata? Sí, diría que no. Creo que una buena comprensión de lo que hace una base de datos y cómo interactuar manualmente con la base de datos subyacente es algo bueno. Pero creo que especialmente cuando estás comenzando, no es necesario en absoluto si estás usando algo como Prisma. Puedes construir tus consultas utilizando el lenguaje que ya estás aprendiendo, JavaScript. Y luego, si quieres profundizar y ver qué está sucediendo bajo el capó, hay registro donde puedes imprimir las consultas y ver qué está haciendo. Así que podrías ajustar esas consultas en consultas en bruto si realmente necesitas hacerlo. Así que incluso podría ayudarte a aprender el lenguaje de la base de datos donde podrías escribir tu lenguaje que ya conoces.
QnA
Impacto de Prisma en los Desarrolladores Backend
Short description:
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.
JavaScript, y luego ver qué está escribiendo. Y puedes aprender cómo escribir la consulta en la base de datos. Sí. Sí, claro. Quiero decir, incluso con mi propia experiencia personal, así es como aprendí a trabajar con bases de datos, estaba usando ORM y ColdFusion y estaba revisando los registros y ajustando las consultas, y eso te ayuda a construir ese conocimiento inicial que necesitas comprender. Eso es genial. De acuerdo. Chris de la audiencia pregunta, en tu experiencia, ¿cómo perciben esto los desarrolladores backend más tradicionales? Teniendo Prisma en algo como Remix, donde las líneas están mucho más difuminadas.
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
Short description:
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.
eso es algo que está fuera de Prisma por ahora. De acuerdo, perfecto. Eso tiene sentido. Muy bien. Volvamos a las preguntas sobre la charla. ¿En qué se diferencia el desarrollo de una aplicación full stack con Remix de una aplicación tradicional con front-end y back-end separados? Sí, esta es una pregunta que me han hecho muchas veces y hay grandes diferencias. Creo que mucha gente que ha usado Remix lo sabe, pero para los que recién comienzan, puede ser un poco confuso. La diferencia aquí es que con una aplicación tradicional, tendrías tu front-end y tu back-end. Desarrollarías esos por separado y luego los dos se comunicarían entre sí, lo cual es genial. Eso es lo que hemos hecho durante mucho tiempo, pero con Remix, es un paradigma diferente y un cambio de mentalidad en el que todo eso está en un solo lugar, y puedes pensar en cada archivo en tu front-end o básicamente cada ruta con tu front-end también tiene una ruta de API que le acompaña. Por lo tanto, requiere que pienses un poco más en cómo estás estructurando estas cosas. Cuando tienes componentes padres con componentes hijos y tal vez cargadores en cada uno de ellos, debes pensar en cuándo se activarán esos cargadores. Por lo tanto, es un cambio de mentalidad, pero en su mayor parte es un poco más simple porque ahora te preocupas por un solo lugar. Creo que eso tiene mucho sentido debido a la forma en que Remix maneja el enrutamiento y cada ruta es algo independiente. Necesita cargar su propio estado. Necesita cargar los datos para esa ruta específicamente, y eso podría estar en una página con otras cosas, por lo que debes pensar en ello de manera un poco diferente. Sí, exacto. Sí. Muy bien. Bueno, no veo más preguntas de la audiencia y parece que estamos casi sin tiempo. Así que, gracias. Muchas gracias por acompañarnos y por responder todas estas preguntas. Fue increíble y disfruta el resto de la conferencia. Genial. Sí. Muchas gracias. Esto fue muy divertido. Sí. Gracias. Fue un gusto tenerte aquí.
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas ¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™? Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida? Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo. Puntos Cubiertos: 1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso Cómo Ayudará a los Desarrolladores: - Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello? Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React. Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
Comments