Problemas difíciles de GraphQL en Shopify

Rate this content
Bookmark

En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.

FAQ

El problema Nplusone ocurre cuando se solicita una lista de objetos y cada objeto requiere una consulta separada para obtener información adicional, lo que lleva a un número creciente de consultas y afecta el rendimiento. Shopify soluciona este problema mediante técnicas como la precarga de registros y la carga por lotes, optimizando así las consultas y mejorando la eficiencia.

GraphQL Batch es una biblioteca de código abierto desarrollada por Shopify que utiliza la ejecución perezosa de resolutores y la carga por lotes para optimizar el rendimiento de las consultas GraphQL. Permite que las consultas sean más eficientes agrupando y resolviendo dependencias de datos en una sola operación, lo que minimiza el número de accesos a la base de datos.

Shopify maneja las versiones de su API GraphQL mediante un sistema que permite versiones trimestrales y usa un enfoque que alerta a los desarrolladores sobre campos obsoletos y cambios inminentes. Esto asegura que los desarrolladores tengan tiempo para ajustar sus aplicaciones antes de que se realicen cambios que puedan afectar sus operaciones.

Shopify optimiza el rendimiento de GraphQL en dispositivos móviles a través de estrategias como la paginación inteligente, la consulta paralela y el ajuste fino de la caché. Estas técnicas ayudan a manejar redes más lentas e inestables, y permiten que las aplicaciones móviles sean más rápidas y eficientes.

Shopify utiliza varias herramientas y técnicas para asegurar la calidad y consistencia de su API GraphQL, incluyendo linters personalizados, revisiones de código automatizadas, y un enfoque sistemático para manejar versiones del esquema y campos obsoletos. Además, promueven las mejores prácticas y patrones de diseño mediante la educación y la documentación continua para los desarrolladores.

Rebecca Friedman
Rebecca Friedman
Jonathan Baker
Jonathan Baker
Alex Ackerman
Alex Ackerman
Théo Ben Hassen
Théo Ben Hassen
 Greg MacWilliam
Greg MacWilliam
164 min
01 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass cubrió varios temas relacionados con GraphQL en Shopify, incluyendo el problema Nplusone, carga en lote con resolutores perezosos, contextualización de APIs de GraphQL con directivas, optimización de GraphQL para dispositivos móviles, gestión de APIs de GraphQL grandes y manejo de campos y nulabilidad obsoletos. Los oradores compartieron ideas y soluciones a estos desafíos, como el uso de Active Record Preloading, la biblioteca GraphQL Batch y directivas personalizadas. También discutieron la importancia de medir el rendimiento, el diseño de paginación y las consultas paralelas para la optimización móvil. En general, el masterclass proporcionó información valiosa sobre cómo mejorar el rendimiento de GraphQL, el diseño de APIs y las estrategias de versionado.

Available in English: Hard GraphQL Problems at Shopify

1. Introducción al Masterclass

Short description:

Gracias a todos por unirse a nosotros en el masterclass. Durante las próximas tres horas, cinco oradores diferentes discutirán los problemas que han abordado con GraphQL en Shopify. Cada sesión tendrá una duración de 20 minutos, seguida de un breve descanso y una sesión de preguntas y respuestas de una hora. Siéntanse libres de hacer preguntas en el chat durante todo el masterclass.

Entonces, una vez más, gracias a todos los que han podido unirse a nosotros aquí. Aprecio sinceramente su tiempo. Todos nosotros, todos nuestros oradores, todos en Shopify. Muchas gracias por estar allí y unirse a nosotros en el masterclass.

Así es como se verán las próximas tres horas. Será un poco diferente a lo que estamos acostumbrados, pero espero que sea un cambio positivo. Espero que también puedan compartir sus comentarios con nosotros al final de esto, pero vamos a tener cinco sesiones diferentes con cinco oradores diferentes. Todos ellos son ingenieros aquí en Shopify. Y todas estas sesiones hablarán sobre los problemas que hemos tenido que abordar con GraphQL aquí en Shopify. Esperamos que eso arroje algo de luz y obtengan una idea de cómo los equipos pudieron analizar los problemas y las diferentes metodologías que utilizaron para abordar el problema.

Cada sesión o charla tendrá una duración de 20 minutos. Y al final de eso, tendremos un descanso, un descanso corto de 10 minutos y luego tendremos una hora de horario de oficina, o una sesión de correo, si así lo desean. Entonces, si tienen preguntas, simplemente sigan haciéndolas aquí en el chat, nos aseguraremos de tomar nota de ellas. Y al final de eso, durante la última hora durante el horario de oficina, vamos a responder sus preguntas. Pero también, si tienen una pregunta muy específica sobre alguna de las sesiones a medida que se desarrollan, están pregrabadas, pero nuestros oradores están aquí en vivo, definitivamente pueden hacer sus preguntas en el chat, y ellos se encargarán de eso. Así que espero que esté bien. Suena bien y tiene sentido.

2. Introducción a la sesión de Jonathan

Short description:

Nuestra primera sesión es de Jonathan, un desarrollador de personal en Shopify, enfocándose en aplicaciones de escaparate para clientes. Jonathan está aquí para aclarar cualquier pregunta durante la sesión pregrabada. ¡Comencemos!

Entonces, sin más preámbulos, creo que nuestra primera sesión es de Jonathan. Jonathan está aquí. Jonathan, no sé si quieres tomarte un momento para saludar a las personas que se están uniendo antes de comenzar la sesión. ¡Hola a todos! Soy Jonathan, como verán en la charla, soy un desarrollador de personal aquí en Shopify, enfocándome en nuestras aplicaciones de escaparate para clientes. Desde el punto de vista de GraphQL, se trata de la API de escaparate, que es una de nuestras dos API públicas de GraphQL. Bienvenidos.

Fantástico. Cuéntanos algo sobre ti que probablemente no sepamos, déjame acercarlo más a casa, ¿cuál es tu lectura favorita actual o tu blog o boletín favorito en este momento? El blog de ingeniería de Shopify. Muy bien, muchas gracias, Jonathan. Jonathan es nuestro primer orador, como mencioné, todas nuestras sesiones están pregrabadas, pero siéntanse libres de hacer sus preguntas mientras se desarrolla la sesión. Jonathan está aquí para ayudar a aclarar cualquier cosa en caso de que sea necesario. Así que déjenme ver. Voy a compartir mi pantalla aquí, también compartiré el sonido. Muy bien, fantástico. Déjenme ver. Denme un pulgar hacia arriba si pueden escuchar el sonido aquí.

QnA

Watch more workshops on 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
React a Escala con Nx
React Summit 2023React Summit 2023
145 min
React a Escala con Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación.
Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes
Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido
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

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!
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.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
26 min
Principios para Escalar el Desarrollo de Aplicaciones Frontend
Top Content
Después de pasar más de una década en Google, y ahora como el CTO de Vercel, Malte Ubl no es ajeno a ser responsable de la infraestructura de software de un equipo. Sin embargo, estar a cargo de definir cómo las personas escriben software, y a su vez, construir la infraestructura que están utilizando para escribir dicho software, presenta desafíos significativos. Esta presentación de Malte Ubl revelará los principios guía para liderar una gran infraestructura de software.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.