HIX Style - The standard way

Hoy es un dia especial. Hoy he publicado la primera parte de HIX Style en el repo de HIX y para mi significa un gran paso. 

Despues de mas de un mes de trabajo finalmente se pudo crear el módulo de vistas.  Pero... ¿que es HIX Style ?

Rompiendo el aislamiento
 
Históricamente, el desarrollo web con Harbour ha estado marcado por una barrera de entrada técnica excesivamente alta. Antes de escribir una sola línea de código, el desarrollador se veía obligado a enfrentarse a la configuración de servidores Apache, la compilación de mod_harbour o el uso de herramientas como UT.
 
Una vez tenian el entorno preparado, debian programar esa terrible web cada uno como mejor entendía el problema, sin ningun patrón, metódica, camino... y esta solucion pasaba por muchos desorden y caos.
 
Una de los puntos que unen a diferentes lenguajes en la programación web, es la de seguir una metódica de trabajo y una estructura de las aplicaciones. Con ello consigues que al ver el proyecto de alguien que usa esta misma metódica o estas al frente de un programa diseñado con esta metódica, sabes exactamente donde mirar y que tocar. De alguna manera dentro del lenguaje de programación todos hablan con el mismo lenguaje y arquitectura de diseño de aplicaciones.
 
HIX nace para cambiar la manera de hacer las cosas en la web. Por un lado disponer de un servidor que desde el primer segundo funciona sin problemas e independientemente de que todos lo pueden usar como deseen sin ataduras y creo que este paso ya lo hemos conseguido, gracias a UT 💓 . Pero también la necesidad de ofrecer una arquitectura, metódica y un estilo que ayuden a higienizar y poner orden todo un proyecto a la hora de crear una aplicación.
 
HIX se ha basado en diferentes metódicas de otros lenguajes, intentando absorver lo mejor de cada uno de ellos e intenta sintetizar lo máximo posible todos los conceptos, para poder finalmente ayudar en el objetivo principal: crear aplicaciones web haciendolo fácil.
 
La idea de crear un CLI (Command Line Interface) para automatizar la creación de la estructura HIX-Style es necesaria y eliminará gran parte del error humano, reduce la fricción inicial y garantiza que todos los desarrolladores sigan el mismo estándar de carpetas y nombres.
 
La diferencia básica de usar esta metodologia con los clásicos snippets, es el alcance e integridad del proyecto. Mientras que un snippet es una ayuda de "escritura", nuestro sistema CLI es una ayuda de "arquitectura".
 
Hemos de empezar a trabajar todos en un mismo sentido, de una misma manera, esto nos ayudará mas y aumentaremos nuestra capacidad de producción. Aqui es donde entra HIX Style

Indepedientemente de que podamos usar HIX como cada uno desee, HIX Style es el objetivo final. Poder crear una manera de programar web con Harbour que todos podamos compartir. Se ha de acabar que cada uno siga su propia manera de desarrollar una aplicación. 

La web ya ha sufrido durante estos ultimos años muchos cambios en su arquitectura de programación y parece que ahora ya hay unos estándares que se han aceptado. Nosotros los debemos de aceptar, porque son maneras de programar probadas y efectivas. No hace falta reinventar la rueda.

HIX Style (The Standard Way)

Es la joya de la corona del proyecto y el núcleo de este documento. Basado en el concepto de "Convención sobre Configuración", HIX-Style busca estandarizar el desarrollo web en Harbour.

• Un lenguaje común: Al seguir una metodología unificada, inspirada en varios sistemas, cualquier programador HIX puede abrir el proyecto de otro y entenderlo al instante. Se acaba el "cada uno a su manera". Creo que este ha sido uno de los grandes males de la comunidad, que cada uno pudiera hacer sus programas sin seguir unas normas y convenciones, que de alguna manera ayudaria a “hablar” a todos de la misma manera. Ver el proyecto de otro programador y saber donde tenemos de mirar, no tiene precio y es la manera correcta de hacerlo.
• Legibilidad y Mantenibilidad: La estructura MVC bien definida asegura que el código sea limpio, escalable y profesional.
• Colaboración Comunitaria: Facilita la creación de librerías y módulos intercambiables, potenciando el crecimiento de una comunidad que comparte soluciones en lugar de reinventar la rueda.

El proyecto es un tamburete con varias patas, no puede fallar ninguna sino todo tambaleará, pero hoy quiero hablar de la que ya está disponible y que es la parte de las view, el motor que nos ayudará a programar mas facilmente estas vistas y nos ayudará  a poner lógica a nuestras vistas y ayudar fácilmente a estructura bien una vista. 

Básicamente, y asi iremos haciéndolo, hemos entre otras cosas de aprender a separar la lógica de nuestras aplicaciones de las vistas. Por un lado la lógica se basará en la ejecucion de un proceso que lo realizaremos con Harbour y es allá donde la mayoria se desenvuelve perfectamente. Una vez hemos conseguido el objetivo en ese controlador, simplemente enviaremos el resultado a las vistas para que "pinten" estos datos.

Separando la logica de la vista tendremos 2 entornos separados, cada uno hace lo suyo y nos ayudará perfectamente a integrarlo a nuestras IA. No deseo que una IA de momento toque mi logica (de momento) mas bien pintar esos resultados. Y es aqui donde le diremos, modifica, crea, cambia,... el fichero de la vista. Yo te pasaré los datos y tu espabila, solo te  dejo tocar el fichero resultado. No nos podrá tocar la logica para nada en principio, asi que por este lado de momento estaremos cubiertos de que no nos altere nada 😀.

Para llega a este punto hemos de empezar a trabajar en seste sentido. 1 fichero de logica, 1 fichero de vista.

Basicamente HIX tendrá la funcion UView( <cFile>, ... ) que es la que construirá nuestra vista. Llanaremos a un fichero <cFile> y le pasaremos tantos parámetros como necesitemos. 

He puesto en la wiki todo lo relativo a este punto de las vistas y allá se ira publicando poco a poco los demas avances. 

https://github.com/carles9000/hix/wiki/readme 

Un fichero de vista ahora en HIX podria tener una vista parecida a esta:

@args aItems

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test HixStyle</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <div class="container py-5"> <div class="text-center mb-5"> <h1 class="display-6 fw-semibold text-secondary">Popular places this holiday</h1> <p class="lead text-muted">Example of handling view directives with HIX</p> </div> @foreach oItem in aItems @if oItem[2] <div class="alert alert-success" role="alert"> <b>{{ oItem[1]}}</b><br> Popular {{ Stars( oItem[3] ) }} </div> @else <div class="alert alert-dark" role="alert"> <b>{{ oItem[1]}}</b><br> Popular {{ Stars( oItem[3] ) }} </div> @endif @endforeach <hr> </div> @prg function Stars( n ) // Your proc... retu Replicate( '⭐', n ) @endprg </head> </html>

Podeis observar como mezclamos directivas en clave Harbour que fácilmente podemos entender y que nos ayuda a manejar el flujo de pintar la pantalla.

Técnicamente ha sido un reto crear el método de las views, ya  que se trata de varios procesos  que se trabajan para poder obtener una view: parsear unas directivas, scopes, transpilación, compilación. El resultado un fichero hrb que estará listo para ejecutar  en la siguiente llamada. Con lo facil que era llamar un simple html... 😅.

Quizás cuando se termine este proyecto podamos compartir toda la parte de técnica, realmente compleja, pero de momento hemos de concentrarnos en encajar bien todas las piezas del puzle, de momento una de las mas duras ya esta funcionando y muy bien, por esto he empezado diciendo que hoy es un  dia especial, porque esta parte compleja ya es una realidad.

De momento ya esta disponible y quien quiera ya empezar a abordar esta parte, la tiene a su disposicion para poder practicar. Esta parte formará del proceso final de ensamblado correcto de nuestra aplicación. La ayuda de la IA para que nos ayude a crear las vistas siguiendo nuestras directivas va a ser muy mágico, ya vereis... 😉.

HIX Style ya está aqui 

Seguimos! 

C.