Qué es GATSBY, Next, Svelte y Eleventy y su comparación con WordPress
Gatsby
y Next
representan lo mejor del desarrollo web moderno junto con otras opciones como Svelte
o Eleventy
, y parecen estar a años luz de WordPress
Gatsby y Next
Qué es Gatsby
Gatsby es un framework (gatsbyjs.org) y también una empresa dedicada al hosting (que compartan dominio es ciertamente polémico)
Gatsby
se construye sobre React
y se orienta hacia el desarrollo web por lo que da una serie de herramientas para hacerte la vida más fácil
Lo mejor y lo peor de Gatsby se resume en esta frase:
- Gatsby está diseñado para compilarse una vez y presentar una web estática encapsulada dentro de
React
Es decir, Gatsby
te permite construir una web aprovechando todo lo que te ofrece React
(que es mucho)
Pero al mismo tiempo te da una web estática que va encapsulada con React
, con lo que necesita que el navegador construya la web interpretando javascript
y no a partir de los clásicos html
y css
-
Lo mejor de Gatsby es sin duda React, desarrollar webs con
React
es tremendamente potente y agradable -
Lo peor de Gatsby es que al darte esa web embadurnada de React, el navegador necesita interpretar React, y eso conlleva una penalización de rendimiento que Google ya la está subrayando en sus métricas de LightHouse (algo que cuenta para el SEO)
Qué es Next
Next
es lo mismo que Gatsby (un framework nextjs.org) pero que también incluye la posibilidad de tener un backend
con NodeJS
La experiencia de desarrollo de Next es muy parecida a la de Gatsby, Next
es mucho menos exigente a la hora de pedirte ciertos requerimientos como pasa con Gatsby y GraphQL
, pero por otro lado también tiene un ecosistema de plugins más pobre que Gatsby
Aparte de esto tiene las mismas ventajas e inconvenientes que Gatsby, es decir, React
La gran ventaja de utilizar Gatsby o Next para generar sitios estáticos
Gatsby por defecto, y Next de forma opcional, ambos permiten generar sitios estáticos que se resumen en html
, css
y javascript
en forma de React
Plantear una web sin backend
presenta un gran beneficio:
- Hay varias opciones de hostings gratuitos de primer nivel y con la máxima velocidad
Esto no lo encuentras en WordPress
ni en NextJS
cuando quieres utilizar su backend
La gran desventaja de utilizar Gatsby o Next versus WordPress
Gastby y Next permiten desarrollar en React
, y en mi opinión la experiencia del desarrollador está bastantes niveles por encima de lo que te ofrece WordPress y su php
Sin embargo, es perfectamente posible utilizar WordPress
como implementador o como usuario (avanzado o no tan avanzado)
Utilizar Gatsby o Next como implementador o usuario, esto yo lo veo totalmente imposible y es ciertamente una limitación si quieres desarrollar webs para terceros
Qué aporta WordPress a 2021
WordPress es un elefante antiguo con todo lo que eso conlleva, aunque su movimiento de introducir React
en su editor Gutenberg
fue una gran noticia
Con el tiempo es muy posible que termine eliminando php
y abrazando React para todo el ciclo (o quizá creando un WordPress paralelo durante un tiempo de transición), pero aunque no lo haga, WordPress sigue siendo un actor muy potente en el ecosistema del desarrollo web, básicamente por lo siguiente:
-
Hay infinidad de hostings preparados para ofrecer WordPress, muy baratos e incluso algunos gratuitos
-
Hay infinidad de plugins
-
Hay un ecosistema gigante
Con estas credenciales no hay ninguna duda de que WordPress
tiene una larga vida por delante
WordPress y la velocidad
Una crítica recurrente con WordPress es que su velocidad es lenta si lo comparamos con cualquier sitio web estático
Eso es discutible, pero si es cierto que todo lo que implique el uso de un servidor va a requerir que ese servidor sea rápido, y eso al final depende de lo que nos gastemos con el servicio de hosting
Con Gatsby o Next, utilizando servicios como Netlify, la velocidad cuesta 0 y está garantizada
Sin embargo WordPress puede ejecutarse de muchas maneras, y si construyes una web que no tenga React en el frontend sus métricas posiblemente puedan competir con los números de Gatsby o Next
Esto no quita lo siguiente, que es que con WordPress puedes hacer desarrollos muy lentos, algo que con Gatsby y Next simplemente es más complicado porque de serie ya viene todo pensado y orientado para ofrecer velocidad
Eleventy y Svelte
Eleventy
(o 11ty
) y Svelte
son dos desarrollos que han ganado tracción en los últimos tiempos
Los dos buscan solucionar el problema de React
, esto es, que es lento para ordenadores antiguos (o móviles)
El problema de descartar React es que descartas su magnífica experiencia de desarrollador, y descartas su tremendo ecosistema
Con Svelte
svelte.dev tienes que aprender una alternativa a React
, lo cual es un esfuerzo que no es menor, pero a cambio tienes una manera de organizar un useState
que parece más lógica y mucho más liviana que lo que ofrece React
Con 11ty
11ty.dev tienes muchos lenguajes para desarrollar la web, y en ningún caso añaden javascript
Puedes añadir todo el javascript que quieras, pero será de forma independiente a 11ty
(y nada te impide añadirle React
)
El gran què de 11ty
es que puedes desarrollar la web con React y con styled-components
, o más específicamente con todo lo que no es javascript
de ejecución (o runtime
), lo que en la práctica quiere decir no poder utilizar un useState
o useEffect
, o tener que utilizar styled-components
con un estilo parecido al que utiliza linaria
Traducido, esto quiere decir preservar gran parte de la excelente experiencia de desarrollo de React y conseguir métricas de 100 en LightHouse
, y esta combinación perfecta (en mi opinión) la encuentras en 11ty
Si te interesa, de momento tengo un curso de Gatsby básico, un curso de bloques de Gutenberg para WordPress, y otro curso de curso de themes con WordPress, Gutenberg y React