Parte 1: El futuro es hoy, creando aplicación web con Next.js, Supabase y TinaCMS

En la actualidad, las tecnologías para el desarrollo web son fascinantes, en esta serie de artículos te ayudaré a construir una app de forma sencilla, utilizando las mejores prácticas en la industria. Para la creación de esta app he optado por tecnologías que a mi criterio y al de muchos son excepcionales, así que, manos a la obra.

Antes de comenzar, explicaré el trasfondo de estas tecnologías, para que tengas noción de su funcionalidad y el porqué son grandiosas.

Next.js el framework de react para producción

Si te encuentras en el mundo del desarrollo web, sabrás que react es la librería de javascript más utilizada en el desarrollo frontend, esto no solo lo digo yo, lo dicen las estadísticas.

Fuente: State of JS 2020 - Front-end Frameworks

React como librería es potente, con la adición de los hooks en React 16.8 los componentes funcionales han pasado a primera plana y esto ha hecho que la comprensión del API por parte del desarrollador sea mejor en comparación a versiones anteriores. Ahora bien, si deseamos llevar react a otro nivel, debemos utilizar un marco de trabajo(framework) es allí donde entra Next.js para salvarnos el día.

Next.js te ofrece la mejor experiencia de desarrollado con todas las funciones que necesitas para el ambiente de producción: renderizado híbrido, estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, búsqueda previa de rutas y más. No se necesita configuración, todo esta listo para su uso (out of the box).

En los últimos años el interés, la satisfacción y el uso de este framework por parte de los desarrolladores ha crecido, lo podemos ver en la siguiente gráfica:

Fuente: State of JS 2020 - Back-end Frameworks

Next.js además de ser uno de los mejores frameworks, posee una plataforma para desplegar nuestra aplicación de forma sencilla, su nombre es Vercel, que además de combinar la mejor experiencia de desarrollado con un enfoque obsesivo en el rendimiento del usuario final, permite a los equipos frontend, hacer mejor su trabajo.

Supabase la alternativa open source a Firebase

Ya tenemos listo el frontend de nuestra app, al menos en papel 😅, ahora hablemos del backend, Supabase permite crear nuestro backend en menos de 2 minutos, con una base de datos Postgres, autenticación, API instantáneas, suscripciones en tiempo real y almacenamiento.

¿Esto es cierto 😱 ? Pues déjame decirte que sí, en ocasiones como desarrolladores intentamos reinventar la rueda, cosa que no esta del todo mal si deseamos aprender algo desde sus raíces, pero mi pensar es que, utilizando servicios como este, podemos enfocarnos en lo que importa, el desarrollo frontend, sin tener las preocupaciones originadas por la gestión y desarrollo del backend.

¿Cómo funciona? ¿Es magia? En esencia, Supabase es un conjunto de herramientas de código abierto, unidas para crear una experiencia de desarrollo perfecta:

• PostgreSQL es un sistema de base de datos relacional de objetos con más de 30 años de desarrollo activo que se ha ganado una sólida reputación por su confiabilidad, solidez de funciones y rendimiento.
• Realtime es un servidor Elixir que permite escuchar inserciones, actualizaciones y eliminaciones de PostgreSQL mediante websockets. Supabase escucha la funcionalidad de replicación incorporada de Postgres, convierte el flujo de bytes de replicación en JSON y luego transmite el JSON a través de websockets.
• PostgREST es un servidor web que convierte su base de datos PostgreSQL directamente en una API RESTful.
• postgres-meta es una API RESTful para administrar su Postgres, lo que le permite buscar tablas, agregar roles y ejecutar consultas, etc.
• GoTrue es una API basada en SWT para administrar usuarios y la emisión de tokens SWT.
• Kong es una puerta de enlace API nativa de la nube.

Fuente: Supabase Docs

TinaCMS el editor de código abierto para sitios Jamstack

Ya tenemos el frontend y el backend solventados, ahora llega el momento para la edición de nuestro contenido y nada mejor que TinaCMS para este trabajo.

TinaCMS es un conjunto de herramientas para crear edición visual en nuestro sitio. Al crear una experiencia de edición personalizada con Tina en lugar de optar por un CMS convencional, los desarrolladores pueden brindar a sus equipos una experiencia de edición contextual e intuitiva sin sacrificar la calidad del código.

¿No lo crees aún? Puedes probar su demo y comprender lo potente que puede llegar a ser la edición de contenido desde este CMS.

Luego de explicar el trasfondo de las tecnologías que utilizaremos para crear nuestra app, pienso que ya estamos listos para comenzar a escribir código en nuestro editor de texto favorito.

Nos vemos en la parte 2 👋