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.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

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
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
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.
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
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
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
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
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
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
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
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

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.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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.