Oscar Barajas TavaresFrontend & Foundation Layer at Platzi

gndx.dev un blog creado con Svelte + Sapper

Desde hace más de nueve meses que estoy aprendiendo Svelte, mi forma de aprender es documentarme en sitios como DEV.to o Medium y luego dedicarle tiempo a la documentación, este último paso es el más importante, ya que recorro cada parte de la documentación, la etapa final es crear un proyecto que me permita poner en practica lo aprendido, de esta forma me permite reafirmar mi aprendizaje.

Existe un "Pero..." No tengo ningún proyecto que valga la pena, todos son bloques de código que me permitieron entender cómo funciona el framework, pero nada que me permitiera decir que he trabajado en un proyecto que lleve a producción y funciona.

El Reto
Desde hace un mes vengo trabajando en su totalidad en crear un nuevo blog donde recopilare los videos de mis conferencias y una serie de artículos técnicos sobre JavaScript.

La idea original era crear un proyecto con Ghost JS y desplegarlo en Heroku, luego pensé por que no hacer lo mismo con mi blog "Arepa.dev" Si tengo otro blog... Pero al final tome la decisión. Si estoy evangelizando el uso de Svelte debería de tener un proyecto en producción para demostrar el por qué deben de aprenderlo o tenerlo en cuenta en sus proyectos.

El Nacimiento
Tome la decisión de comprar el dominio gndx.dev e iniciar este proyecto y utilizar Svelte + Sapper. No había vuelta atrás.

¿Por que Svelte + Sapper?
Inicialmente para tener un proyecto que me permitiera demostrar la gran utilidad de Svelte, No había utilizado ni creado ningún proyecto con Sapper, así que era un buen motivo para aprenderlo y crear un sitio web que cumpliera los mejores estándares.

¿Que es Sapper?
Sapper es un Framework para crear aplicaciones web con Svelte, nos permite tener una experiencia de desarrollo inigualable, incorpora un manejador de rutas basado en archivos, incorpora un manejo de server side render mucho mas amigable, implementar un mejor SEO, así como una gran cantidad de utilidades que permiten lograr un gran rendimiento en un sitio web.

Resolviendo problemas...
Crear todo sin ninguna utilidad mágica (Ghost/Gatsby/Wordpress). Manos a la obra...

Sapper nos presenta un proyecto inicial el cual puedes encontrar en "sapper.svelte.dev" su proyecto ejemplo es un sitio web con un blog y varias rutas, lo cual te permite entender a primera vista como trabaja Svelte junto a Sapper.

La documentación de Sapper es muy simple, si ya has trabajado con Svelte, no tienes problemas en entender el proyecto y tomarlo como referencia.

Este sitio lo llamo la obra de arte, me toco crear el diseño, actualizar las rutas para adaptarlo a un blog, crear un script en NodeJS para consumir una API (También he creado mi propio backend) que funcione antes de preparar el compilado del proyecto.

Otros de los retos que me encontré es añadir soporte para RSS, para este reto se debe de contar con un archivo XML para exponer el contenido del blog en el formato RSS valido.  Desde un script que consume una API donde se encuentran los posts, puedo generar el archivo XML necesario para distribuir mi contenido en formato RSS.

Para que google indexe tu contenido debes de crear un sitemap así que utilizando lo aprendido para manipular documentos XML con un estándar establecido fue fácil crear otro documento XML para crear el sitemap.

Pero no es todo, también me toco crear y adaptar la estructura para el manejo correcto del SEO del sitio, así como crear la estructura necesaria para implementar open graph en el sitio.

Desplegando...
Esta es la mejor parte, gracias a Netlify es que envío a producción cada que se detecta un nuevo cambio en el repositorio de este proyecto. Esto me permite despreocuparme por crear un script para enviarlo a producción.

Rendimiento.
Lo que mas me encanta es el rendimiento obtenido

Blog Arepa.dev con React + Gatsby JS.

enter image description here

Blog gndx.dev con Svelte + Sapper

enter image description here

Conclusiones
Te enamoras de la simpleza...