Full-stack JS hoy: Fastify, GraphQL y React

Rate this content
Bookmark

Primero hubo LAMP, luego MEAN y JAM. Pero ahora estamos en 2022 y los tiempos han cambiado... ¿Cómo se ve el stack completo moderno? Está construido completamente con tecnologías gratuitas y de código abierto, es escalable más allá de la imaginación, puede ejecutarse en las instalaciones o en la nube, no debe generar dependencia de proveedores y, lo más importante, debe funcionar sin problemas. Hay tantas herramientas para elegir. Elegir el stack correcto desde el primer día puede marcar la diferencia entre el éxito del proyecto y un montón de cenizas de software. Usando fastify, mercurius, urql y react, podemos construir aplicaciones full-stack de alto rendimiento utilizando todas las tecnologías de JavaScript.

FAQ

GraphQL es una tecnología para construir APIs que permite optimizar las consultas al servidor, solicitando solo los datos específicos que se necesitan. Esto ayuda a mejorar el rendimiento y la eficiencia de las aplicaciones al reducir los datos innecesarios en las respuestas del servidor.

El Principio de Prado, basado en la regla del 80-20 ideada por el economista italiano Vilfredo Pareto, sugiere que el 80% de los resultados pueden provenir del 20% de los esfuerzos. Esta idea fue utilizada para enfocarse en los aspectos más impactantes de los proyectos de desarrollo.

Cody enfatiza que el último 20% de un proyecto es crucial porque suele incluir requisitos funcionales que pueden ser más complejos y difíciles de implementar, pero son esenciales para el éxito del proyecto.

PostGrey es valorado por su compatibilidad con SQL y NoSQL, su capacidad para manejar JSON desde su versión 9 y por facilitar la escalabilidad a través de agrupamientos de conexiones, lo que lo convierte en una opción robusta para la gestión de bases de datos.

La modularidad permite que una pila tecnológica sea adaptable y escalable. Según Cody, una pila modular facilita reemplazar o modificar componentes sin afectar al resto del sistema, lo que es crucial para mantener la tecnología actualizada y eficiente frente a requisitos cambiantes.

Fastify es un servidor web para Node.js que se destaca por su rendimiento y bajo overhead. Es modular y extensible, lo que permite a los desarrolladores construir aplicaciones monolíticas o microservicios de manera eficiente.

Cody menciona la modularidad, la experiencia del desarrollador, la ejecución en cualquier lugar, el soporte de la comunidad y la transparencia como principios fundamentales para construir una pila tecnológica eficaz y sostenible.

Mercurius es un servidor de GraphQL para Fastify que ofrece características como caché, federación y suscripciones, facilitando el manejo de GraphQL con mejor rendimiento y menor complejidad en la configuración.

Cody Zuschlag
Cody Zuschlag
25 min
17 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La Charla discute la construcción de una aplicación moderna de stack completo con JavaScript y GraphQL, enfatizando la importancia de priorizar el 20% crítico de los desafíos. Destaca los beneficios de construir un stack tecnológico productivo y transparente con modularidad y herramientas amigables para los desarrolladores. Se recomienda el uso de PostGrey como base de datos relacional y Fastify como framework de servidor. La Charla también explora las ventajas de usar Mercurius y Urql para la implementación de GraphQL. Además, menciona el uso de React, SSR y Fastify Vite para SSR de stack completo y componentes modulares. La Charla concluye mencionando las ventajas de este stack para funcionalidades complejas y la posibilidad de usar Fastify en una infraestructura serverless.

1. Building a Modern Full Stack Application

Short description:

Hablaré sobre cómo construir una aplicación de pila completa moderna con JavaScript y GraphQL. Nos centraremos en el último 20% del proyecto, la parte difícil que a menudo pasamos por alto. El Principio de Prado, introducido por Vilfredo Prado, establece que el 80% de nuestros resultados provienen del 20% de los desafíos. Steve Jobs aplicó este principio en Apple, reduciendo el número de modelos de computadoras y dispositivos. Aprendamos de esto y prioricemos el 20% crítico desde el principio.

Estoy muy contento de estar aquí. Gracias a todos. Hablaré sobre cómo construir una aplicación de pila completa moderna con JavaScript y, como pequeño adelanto, hablaremos sobre GraphQL, todo de código abierto, porque eso es lo que amamos. Mi nombre es Cody, trabajo en NearForm, enseño un curso de desarrollo web en la universidad local donde vivo en Francia, pero dejemos de hablar de mí. Lo que realmente quiero hacer es desafiar a todos aquí, hacer un pequeño ejercicio conmigo.

Cierra los ojos e imagina tu próximo proyecto. Tienes todos los requisitos de tus interesados, sabes lo que quieres construir, ¿y qué vas a hacer cuando cierres los ojos? Vas a empezar a pensar en esas herramientas y esos frameworks a los que vas a recurrir. Cuando hago esto y empiezo a pensar en esas herramientas y frameworks, me digo a mí mismo que esta vez será diferente. Esta vez será correcto, esta vez habrá arcoíris y esta vez habrá unicornios.

Creo que todos hacemos eso porque queremos utilizar nuevas tecnologías que nos ayuden, que resuelvan todos esos problemas que tuvimos en nuestro último proyecto. Sin embargo, creo que la trampa está en que podemos llegar al 80% de nuestro proyecto. Cuando llegamos a ese 80%, de repente algo sucede. Esas necesidades no funcionales del mundo real afectan ese último 20%, y ese último 20% es realmente difícil. ¿Dónde nos encontramos? Estamos pensando en arcoíris y unicornios, terminamos con algo como esto. No sé cuántas veces he estado así, tratando de solucionar problemas reales en una aplicación en producción. Tenemos tuberías de CI complejas, tenemos problemas de escalabilidad, tenemos problemas de rendimiento, de seguridad, cosas en las que no pensamos al principio, autorización, autenticación, así que siento que hay una brecha enorme entre lo que imaginamos y la realidad, porque todos somos personas del mundo real solucionando problemas del mundo real. Somos desarrolladores, estamos tratando de hacer lo mejor que podemos, y creo que lo que quiero desafiar hoy es que nos centremos en ese último 20%, en ese difícil 20% que no siempre pensamos al principio.

Así que quiero hablar de este tipo. Este tipo, su nombre es Vilfredo Prado. Lo llamamos el Principio de Prado. Sé que no puedes leer ese texto, pero lo harás en un segundo. Vilfredo Prado, este economista italiano, ideó la regla del 80-20. Sigo hablando de estos porcentajes y él dijo que tal vez solo el 80% de nuestros resultados en nuestros proyectos provengan del 20% de los desafíos, de los requisitos. Eso es lo que quiero desafiarnos a hacer hoy. Pensemos en ese 20% desde el principio. Así es el Principio de Prado en su totalidad. Y creo que Steve Jobs lo sabía. Cuando regresó a Apple en 1996, tenían como 15 modelos de computadoras de escritorio, los redujo a uno. Tenían un montón de dispositivos portátiles, creo que los llamaban laptops en 1996, los redujo a uno. Periféricos, impresoras, los eliminó todos.

2. Building a Productive and Transparent Tech Stack

Short description:

Quiero centrarme en el difícil 20% que puede llevar a un aumento del 80% en la productividad. Construir una pila tecnológica con modularidad nos permite adaptarnos a los requisitos cambiantes. La experiencia del desarrollador es crucial, con herramientas que guían en lugar de obstaculizar. Es importante ejecutar aplicaciones en cualquier lugar, sin depender de servicios en la nube. Los proyectos de código abierto respaldados por la comunidad brindan seguridad y transparencia.

Después de deshacernos de todos ellos. Él quería centrarse en ese último 20 por ciento, ese último 20 por ciento que realmente importaba. Así que hoy, en lo que quiero centrarme, en lo que quiero desafiarnos a centrarnos es en ese difícil 20 por ciento. Y tal vez, solo tal vez, podamos obtener un 80 por ciento en nuestra productividad.

Entonces, ¿cómo podemos construir esta pila tecnológica, esta pila tecnológica mágica, que se va a centrar en ese difícil 20 por ciento, ese 20 por ciento de requisitos no funcionales, ayudarnos a obtener velocidad de entrega y asegurarnos de que nuestra aplicación de calidad de producción funcione de la manera que queremos, que podamos solucionar problemas mientras está en producción? Para hacer eso, quiero establecer algunos principios cuando vaya a construir mi pila tecnológica. Estos son los principios en los que voy a pensar. El primero va a ser la modularidad. Y creo que uno de los desafíos, las trampas en las que podemos caer, es que vamos a buscar ese marco de trabajo que dice que lo hace todo, y pensamos que lo hará todo, pero tal vez no lo haga todo. ¿Qué sucede cuando llegamos a ese momento en el que no hace algo que queremos y tenemos que recurrir a algo más, o desechar el marco de trabajo y comenzar desde el principio? Entonces, si podemos construir una pila tecnológica en la que podamos reemplazar capas de la pila cuando algo no funcione, hemos ganado algo, ¿verdad? Como si nuestra pila de repente se volviera modular y pudiéramos adaptarnos a la situación, a los requisitos a medida que evolucionan.

El siguiente principio en nuestra lista es la experiencia del desarrollador. Por eso estamos aquí. Todos somos desarrolladores. Todos estamos solucionando problemas reales. Quiero herramientas que me ayuden, que me guíen, que no me obstaculicen, ¿verdad? Y quiero poder ejecutar mi aplicación en cualquier lugar. Quiero poder ejecutarla en mi computadora portátil mientras estoy en el tren, cuando no tengo Wi-Fi o en el avión, como si necesitara ejecutarse localmente o en la nube, en el sitio, en Docker, lo que sea. Eso también es muy importante para mí. No quiero depender de algunos servicios en la nube y no poder ejecutar mis pruebas de extremo a extremo en mi máquina porque dependo de esa conexión a Internet que no existe en el hotel. Basado en mis principios, la comunidad es lo primero. Estoy hablando de proyectos de código abierto. Apoyados por la comunidad. Idealmente, serán más seguros, ¿verdad? Porque más personas, más ojos están mirando el código. Los errores se corregirán. Las cosas no se ocultan de ti. Creo que eso es realmente importante cuando se trata de una pila tecnológica. Estoy hablando de un 100% de código abierto. No solo ese 80% y el 20% de la fórmula mágica secreta se ejecuta en un servicio en la nube que nadie puede ver. Quiero ver un 100% de código abierto. Mi último y último principio será la transparencia. Esto está relacionado con el código abierto y esa idea de un proyecto respaldado por la comunidad.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
¿Cansado de reconstruir tu marco de trabajo web basado en React desde cero para cada nuevo proyecto? ¡Estás de suerte! RedwoodJS es un marco de aplicación web de pila completa (piensa en Rails pero para desarrolladores JS/TS) basado en React, Apollo GraphQL y Prisma 2. Nosotros hacemos el trabajo de integración pesada para que tú no tengas que hacerlo. También integramos de manera hermosa Jest y Storybook, y ofrecemos soluciones incorporadas para la obtención de datos declarativa, autenticación, pre-renderizado, registro, a11y y mucho más. Despliega en Netlify, Vercel, o vuelve a la vieja escuela en AWS o metal desnudo. En esta charla aprenderás sobre la arquitectura de RedwoodJS, verás las características principales en acción, y te irás con una sensación de asombro y admiración en tu corazón.
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
¿Sabes qué está pasando realmente en tu carpeta node_modules? Los ataques a la cadena de suministro de software han explotado en los últimos 12 meses y solo están acelerándose en 2022 y más allá. Profundizaremos en ejemplos de recientes ataques a la cadena de suministro y qué pasos concretos puedes tomar para proteger a tu equipo de esta amenaza emergente.
Puedes consultar las diapositivas de la charla de Feross aquí.
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Node Congress 2022Node Congress 2022
34 min
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Top Content
Puedes revisar las diapositivas de la charla de James aquí.

Workshops on related topic

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
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.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
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
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Modelado de Bases de Datos Relacionales para GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Modelado de Bases de Datos Relacionales para GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1      a. Modelado de Datos de Bases de Datos Relacionales      b. Comparando Bases de Datos Relacionales y NoSQL      c. GraphQL con la Base de Datos en menteParte 2 - Hora 2      a. Diseño de Modelos de Datos Relacionales      b. Relación, Construcción de Tablas Multijoin      c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos      a. Herramienta de modelado de datos. El formador utilizará dbdiagram      b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos      c. Hasura