Así es el desarrollo de Hispagold
En la primera entrada di un resumen general de lo que es Hispagold como proyecto, los motivos detrás del mismo y su objetivo. La misma recibió respuestas de personas que tenían curiosidad sobre el aspecto técnico, así que decidí hacer esta entrada.
Esta vez voy a profundizar un poco mas y hablaré de Hispagold con un enfoque mas técnico, para ser específico, voy a hablar un poco de la estructura del proyecto, las tecnologías que usamos, y cómo es el proceso de desarrollo. Aunque intentaré explicar un poco algunos términos, está de mas decir que esta entrada está dirigida a aquellos con conocimiento del tema, así que no te preocupes si no entiendes nada.
A diferencia de Kusaba X, que reune todo en una misma base de código, Hispagold está dividido en 2 componentes distintos: El backend y el frontend. Esta división es muy común hoy en día, ya que simplifica mucho el proceso de desarrollo en general.
El backend es la parte encargada de realizar consultas a la base de datos, procesar la información, almacenar los archivos y en general todo lo que se ejecuta en el servidor. Es completamente independiente del frontend.
El frontend es la parte que se ejecuta en el navegador. Poniendolo de forma sencilla, la interfaz gráfica (HTML, CSS) y la lógica de la misma (JS). El frontend se comunica con el backend a través de una API, la cual hace posible acceder a la información en un formato estándar fácil de procesar, facilitando en un futuro la creación de nuevos proyectos sobre la plataforma de Hispagold (como el multiuploader, Hispachan Files o incluso, una aplicación móvil)
El backend está hecho completamente en Node.js, usando RethinkDB para la base de datos (en un futuro explicaré la razón detrás de esta decisión) y Express para manejar las consultas a la API.
Hispagold, por diseño, es completamente modular, de manera que absolutamente todas las funciones (incluyendo el posteo) están divididas en módulos, los cuales son completamente independientes y pueden ser desactivados y modificados individualmente. Kusaba X también seguía este principio, pero lo implementaba a medias, por lo que añadir nuevas funciones muchas veces requería editar distintos archivos ajenos a los módulos.
En el frontend, estoy usando Nuxt.js, el cual combina Vue.js, Vuex, y varios proyectos mas. Vue.js es similar a React o Angular, pero mucho mas sencillo de aprender y también ligero en recursos.
Toda la interfaz gráfica está dividida en componentes, cada uno de ellos es reutilizable y cumple una función específica, lo cual reduce la complejidad del código.
Para ilustrar un poco por qué esto es beneficioso, tomaré como ejemplo la ventana de respuesta rápida, la cual es básicamente el formulario de posteo, pero en una ventana flotante:
En lugar de copiar y pegar el código del formulario dentro de la QR o recurrir a JavaScript para clonarlo (como se hace actualmente en hispa), simplemente puedo referenciar el formulario dentro del código de la QR:
De esta manera, si modifico el componente del formulario de posteo, el cambio se verá inmediatamente reflejado tanto en el tablón como en la ventana de respuesta rápida, ahorrandome esfuerzo y resultando en un código mas limpio. Lo mismo sucede con otros componentes que son reutilizados a lo largo del sitio.
Otra ventaja de Vue es el hot reload, el cual me permite ver los cambios que realizo instantáneamente tanto en mi navegador como en mi móvil, sin necesidad de recargar la página.
Una de las mayores desventajas es el hecho de que Vue requiere JavaScript en el navegador para funcionar, sin embargo, Nuxt.js ofrece una solución a dicho problema ya que hace uso de la función SSR de Vue, la cual básicamente genera una versión estática de cada página en el servidor, permitiendo que la funcionalidad básica siga estando presente incluso sin JavaScript
De momento no se me ocurre nada mas para añadir, así que dejaré esta entrada hasta aquí. Espero haber resuelto las dudas de aquellos interesados en el aspecto técnico del proyecto.
