De Clipper a la Web: Por qué el estilo Harbourino es el puente

Diferencias entre Clipper y PHP/HTML/JS – y cómo un estilo estructurado puede cerrar la brecha

🟠 Pregunta 1: ¿Cuál es la diferencia clave entre la sintaxis de Clipper y PHP/HTML/JS en la práctica?

La sintaxis de Clipper (y en general Xbase/Harbour) suele ser más concisa, eficiente y centrada en la aplicación. PHP/HTML/JS requieren una separación más compleja entre lógica, estructura y comportamiento en diferentes niveles.

🔹 1. Unidad vs. Fragmentación

Clipper / Xbase	PHP / HTML / JS
Un solo lenguaje, un solo flujo	Tres o más sintaxis diferentes
Lógica, datos y UI en un solo archivo	Separación entre backend, estructura, comportamiento

🔹 2. Proximidad de comandos a la aplicación

@ 1,1 SAY "Nombre:" GET cNombre
BROWSE
USE clientes INDEX nombre
IF SEEK("Muñoz")
   ? clientes->direccion
ENDIF

Lo mismo en PHP/HTML/JS:

// PHP
$result = $db->query("SELECT * FROM clientes WHERE nombre LIKE 'Muñoz%'");
$row = $result->fetch();

// HTML
<label for="nombre">Nombre:</label><input id="nombre" type="text">

// JS
document.getElementById("nombre").addEventListener("change", function() {
  fetch("buscar.php?nombre=" + this.value).then(...)
});

🔹 3. Interactividad y UI

Clipper trabaja por campos y líneas. HTML/JS es más flexible, pero también más complejo y fragmentado.

🔹 4. Control y flujo

DO WHILE .NOT. EOF()
   IF estado == "abierto"
      DO procesar()
   ENDIF
   SKIP
ENDDO

Las aplicaciones web son sin estado y dirigidas por eventos. El control se reparte en múltiples manejadores.

🔹 5. Velocidad de desarrollo

En Clipper bastan unas pocas líneas. En la web se necesita HTML + JS + PHP para lo mismo.

Resumen:

Aspecto	Clipper / Xbase	PHP / HTML / JS
Lenguaje unificado	✅	❌
Conciso y claro	✅	❌
Integración GUI	✅	❌
Preparado para la Web	❌	✅
Interactividad	❌	✅

🟠 Pregunta 2: ¿Qué me aporta concretamente el Harbourino-Patcher?

⚙️ Reducir la complejidad web al nivel Clipper
🧱 Bloques lógicos reutilizables y plantillas
🔁 Targets intercambiables (HTML, JS, PHP)
🛡️ Menos errores, mayor estructura
🧠 Pensamiento Clipper, código moderno

💪 Ejemplo: De entrada Harbourino a formulario web generado

Entrada:

//-- HARBOURINO EDIT_CUSTOMER_FORM --//
-> FORM_START

-> FORM_FIELD
FIELD: NAME
LABEL: Nombre
TYPE: text
REQUIRED: true

-> FORM_FIELD
FIELD: EMAIL
LABEL: Correo
TYPE: email
REQUIRED: true

-> FORM_FIELD
FIELD: NACIMIENTO
LABEL: Fecha de nacimiento
TYPE: date

-> FORM_END

Salida:

<form id="editForm" class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="name" class="form-label">Nombre</label>
    <input type="text" class="form-control" id="name" name="NAME" required>
    <div class="invalid-feedback">Por favor, introduce un nombre.</div>
  </div>
  ... (más campos) ...
  <button type="submit" class="btn btn-primary">Guardar</button>
</form>

<script>
document.getElementById("editForm").addEventListener("submit", function(event) {
  event.preventDefault();
  if (!this.checkValidity()) {
    this.classList.add("was-validated");
    return;
  }

  const data = {
    NAME: this.NAME.value,
    EMAIL: this.EMAIL.value,
    NACIMIENTO: this.NACIMIENTO.value
  };

  fetch("save_customer.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  })
  .then(r => r.json())
  .then(result => alert("Guardado!"))
  .catch(error => alert("Error al guardar!"));
});
</script>

🟩 Conclusión

El estilo Harbourino no es un lenguaje – es una forma de pensar como Clipper y generar código web moderno y mantenible.

Tú defines la lógica – el patcher genera la estructura y la salida.

🔗 More:

Why Now Is the Perfect Time for HARBOURINO