Plataformas de Implementación JAM Stack y Comparación de Rendimiento

Rate this content
Bookmark

Nuestra aplicación web finalmente está lista para ser lanzada, pero ¿qué herramienta de implementación deberíamos usar? Con el auge de JAMstack, tenemos una multitud de opciones, desde Vercel, Netlify, hasta Firebase. Sin duda, el rendimiento es clave para nosotros, por lo que queremos saber cuál es el más rápido. En esta charla, haremos una prueba de rendimiento en el mundo real comparando las opciones de implementación de JAMstack más conocidas y discutiremos sus ventajas y desventajas.

8 min
01 Jul, 2021

Video Summary and Transcription

Esta es una introducción al proyecto Jamstack Deploy, que mide y prueba proveedores de nube populares para la arquitectura Jamstack. El proyecto se enfoca en el rendimiento y utiliza Checkly como herramienta de monitoreo. El orador planea agregar más estadísticas y herramientas para la comparación e invita a los usuarios a contribuir al proyecto.

Available in English

1. Introducción a Jamstack Deploy

Short description:

Esta es una introducción a un proyecto en el que estuve trabajando en las últimas semanas, donde intenté medir y probar los proveedores de nube más populares para Jamstack. Jamstack es una arquitectura diseñada para hacer que la web sea más rápida, segura y fácil de usar. Ofrece un mejor rendimiento, seguridad y escalabilidad. Los generadores de sitios como Next, Hugo y Nuxt se utilizan comúnmente para crear aplicaciones Jamstack. El proceso de implementación requiere proveedores que ofrezcan soporte SSL.

Hola a todos, bienvenidos a mi charla. Esto es Jamstack Deploy, y es una introducción a un proyecto en el que estuve trabajando en las últimas semanas, donde intenté medir y probar los proveedores de nube más populares para Jamstack. Así que mi nombre es Nacho Anasha, soy de Argentina, aquí tienen mi nombre de usuario de Twitter. Trabajo como Ingeniero Líder de Código Abierto en la República Checa. Soy parte de los equipos externalizados. Este es un aviso legal para la charla, es un proyecto en una etapa temprana, por lo que las cosas podrían cambiar en el futuro, pero espero que puedan tener una idea y puedan comenzar a usarlo como un recurso útil, cada vez que deseen probar un proveedor Jamstack. Así que comencemos hablando sobre Jamstack. Comenzando con lo nuevo, esto es probablemente algo que han escuchado mucho en los últimos meses sobre las API y el marcado de JavaScript, que básicamente son las cosas principales sobre Jamstack. Jamstack no es un marco de trabajo, Jamstack es una arquitectura diseñada para hacer que la web sea más rápida, segura y fácil de usar. Y, por supuesto, también más fácil de escalar. Pueden ir a Jamstack.com para obtener más información. Pero básicamente, las principales características de Jamstack son que se obtiene un mejor rendimiento, principalmente porque construimos todo en tiempo de implementación, no en tiempo real. Por lo tanto, el usuario no necesita esperar el contenido. El contenido ya está ahí. Luego utilizamos servidores web, enviamos todo a través de CDNs. Por lo tanto, todo es estático. Es más seguro porque es una especie de enfoque de microservicio y también puedes confiar en API de terceros. Entonces, si no tienes los recursos para ocuparte de la seguridad, puedes delegar en algo como Auth0. También es más económico y más fácil de escalar porque la forma de escalar es enviar partes del mundo, como replicar tus archivos o servir archivos estáticos en más lugares. Estas son las cosas principales sobre Jamstack. Luego tienes generadores de sitios o generadores de sitios estáticos como Next, Hugo, Nuxt. Esas son las principales herramientas que usas todos los días para crear aplicaciones Jamstack. Y este es el tipo de arquitectura donde comparamos la estructura clásica de una aplicación web con la aplicación web Jamstack. Pueden ver a la derecha que Jamstack es bastante sencillo. Es solo un cliente, una CDN donde enviamos los archivos y microservicios que son como cajas de seguridad. Como desarrolladores, realmente no nos importa lo que hacen o cómo lo hacen, solo necesitamos implementarlos. Por lo tanto, es una estructura fácil para los desarrolladores de Jamstack.

Entonces es hora de implementar. Nos gustaría implementar nuestra aplicación en cualquier tipo de proveedor. Entonces, ¿qué busco en estos proveedores? Lo primero es que me gustaría tener SSL.

2. Medición de rendimiento y proceso del proyecto

Short description:

Me gusta tener soporte de Git como PR o integraciones previas. La infraestructura como código es una buena característica. Un proceso de configuración agradable, algo simple y rápido. El rendimiento es el enfoque de este proyecto. El proceso involucró crear una aplicación ficticia y desplegarla en diferentes proveedores. Se utilizó Checkly como herramienta de monitoreo para medir el rendimiento. Las comprobaciones se ejecutaron en diferentes regiones de AWS para obtener información de todo el mundo. El tiempo de primer byte se utilizó como unidad de medida. El proyecto Jamstack deploy está en la etapa beta temprana.

soporte de Git de forma nativa. Me gusta tener soporte de Git como PR o integraciones previas. CLI, amo la terminal, me gustaría hacer todo a través de mi terminal. Pero también me gustaría tener una interfaz de usuario agradable donde no tenga mi computadora o algo así, ya sabes, donde pueda escribir código para poder ir a la interfaz de usuario y hacer cosas rápidas. La infraestructura como código es una buena característica porque te permite crear o crear infraestructura utilizando XAML, JSON o incluso código y no todo va a la interfaz de usuario. Un proceso de configuración agradable, algo simple y rápido. Dominios. Siempre necesito un dominio personalizado para mis sitios, a un precio lo más bajo posible. Rendimiento y cola de aprendizaje. Rendimiento es el enfoque de este proyecto y la cola de aprendizaje futura también lo será porque intentaré tener tutoriales o cosas que intenten mostrar cómo usar esos proveedores.

Entonces, ¿cómo fue el proceso de este proyecto? Lo primero que hice fue crear una aplicación ficticia. Es una aplicación Nuxt en el sitio estático. Así que creé exactamente la misma aplicación y la desplegué en diferentes proveedores. Comencé con Verzol, Medlify, Firebase, Render, GitHub, Pages y Search. Una vez que desplegué exactamente la misma aplicación en ellos, fui a Checkly. Checkly es una herramienta de monitoreo. Es básicamente el pilar de este proyecto. Es lo que estoy usando para medir los diferentes proveedores. Y con Checkly puedo crear comprobaciones. Básicamente, una comprobación es una especie de solicitud donde intento medir el rendimiento y obtener estadísticas de esta comprobación donde puedo ver el tiempo de respuesta, el tiempo de primer byte, etc. Y lo que hice con estas comprobaciones utilizando Checkly fue intentar ejecutar todas ellas en diferentes regiones de AWS, en todas las regiones posibles, para obtener diferentes perspectivas de diferentes partes del mundo. No es lo mismo si soy de Argentina, si soy de Estados Unidos o si soy de Sudáfrica. Y junté todas estas piezas utilizando JavaScript y decidí utilizar el tiempo de primer byte como unidad de medida para el proyecto. Y según Google, 200 milisegundos es un buen número para eso. Así que me gusta mantenerme con ese número. Así que junté todo con JavaScript, Vue.js y la API pública de Checkly para poder mostrar toda la información al público sin tener que usar o pasar por la interfaz de usuario de Checkly. Así que puedes ir a esa URL, también puedes ir al repositorio y encontrarás algo como esto.

El proyecto de implementación de Jamstack está en una etapa temprana, realmente beta ahora, pero probablemente sea el comienzo de algo más grande. Puedes elegir tu proveedor, verás que hay más proveedores que llegarán pronto. Entonces, si haces clic en un proveedor como Rocell o Netlify, verás algo como esto.

3. Introducción al Mapa de Rendimiento y Planes Futuros

Short description:

Esta parte presenta un mapa que muestra el rendimiento de una aplicación Next.js desplegada en modo estático en diferentes proveedores. El mapa muestra las regiones donde se realizaron comprobaciones de rendimiento, con verde indicando por debajo de 200 milisegundos, amarillo entre 200 y 500 milisegundos, y rojo para valores más altos. También se encuentra disponible una lista de los tiempos más rápidos. El orador planea agregar más estadísticas y herramientas para comparación y pruebas A/B. Invita a los usuarios a visitar jumpstartdeploy.com, contribuir al proyecto y comunicarse en Twitter para preguntas.

Esto. Un bonito mapa donde puedes ver todas las regiones que ejecutan comprobaciones en este despliegue del sitio. Recuerda que es una aplicación Next.js desplegada en modo estático en diferentes proveedores. La misma aplicación, para poder ver cómo se desempeña esta aplicación en las diferentes regiones. Si solicito o intento medir el rendimiento desde Estados Unidos, desde Australia, desde Japón, desde cualquier parte del mundo, obtendré el mapa con los diferentes puntos. Todo lo verde está por debajo de 200 milisegundos. Entre 200 y 500 verás amarillo y más grande que eso verás rojo. Así que, también tienes una lista donde puedes obtener el tiempo más rápido, siempre hablando del primer byte. Pero en el futuro agregaré más estadísticas y herramientas donde puedas compararlos e incluso hacer una prueba A, B. Así que, puedes ir a jumpstartdeploy.com y comenzar y por supuesto, se aceptan PR. Mi lista de tareas pendientes es tratar de brindar una mejor experiencia de usuario en A versus B, como Netlify versus Bercel o Netlify versus Render o cualquier otro, y más tutoriales donde pueda mostrarte cómo usarlos y cuáles son las principales características de esos proveedores y por supuesto, más proveedores como AWS, Cloudflare, Microsoft Azure y otros más. Eso es todo. Muchas gracias. Si tienes preguntas, puedes contactarme en Twitter. Cualquier comentario también es bienvenido, así que espero que disfrutes el resto de la conferencia.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion