From Clipper to the Web: Why the Harbourino Style is the Missing Link

Differences between Clipper and PHP/HTML/JS – and how a structured style can bridge the gap

🟠 Question 1: What is the fundamental difference between Clipper syntax and PHP/HTML/JS in practice?

Clipper syntax (and generally Xbase/Harbour) is often more concise, economical, and closely tied to real-world application logic. PHP/HTML/JS, on the other hand, require a more complex separation of concerns across multiple languages and layers.

🔹 1. Unity vs. Fragmentation

🔹 2. Command proximity to application logic

@ 1,1 SAY "Name:" GET cName
BROWSE
USE kunden INDEX name
IF SEEK("Müller")
   ? kunden->adresse
ENDIF

Equivalent in PHP/HTML/JS:

// PHP
$result = $db->query("SELECT * FROM kunden WHERE name LIKE 'Müller%'");
$row = $result->fetch();

// HTML
<label for="name">Name:</label><input id="name" type="text">

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

🔹 3. UI and interaction

Clipper is field- and line-based. HTML/JS offers more flexibility, but at the cost of complexity.

🔹 4. Control and flow

DO WHILE .NOT. EOF()
   IF status == "open"
      DO process()
   ENDIF
   SKIP
ENDDO

Web applications are stateless and event-driven. Control is split across callbacks and page loads.

🔹 5. Development speed

Clipper: One line does a lot. Web: You write boilerplate.

Summary:

🟠 Question 2: What exactly does the Harbourino Patcher give me?

• 🔨 Reduce web code to Clipper-style structures
• ⚙ Reusable logic blocks & templates
• 🧱 Clipper-like logic with modern features
• 🔁 Swappable targets
• 🛡 Less error-prone, more structure
• 🧠 Think Clipper, deploy modern

💪 Example: From Harbourino Input to Generated Web Form

Input:

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

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

-> FORM_FIELD
FIELD: EMAIL
LABEL: E-Mail
TYPE: email
REQUIRED: true

-> FORM_FIELD
FIELD: GEBURTSTAG
LABEL: Birthdate
TYPE: date

-> FORM_END

Output:

<form id="editForm" class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" name="NAME" required>
    <div class="invalid-feedback">Please enter a name.</div>
  </div>
  ... (more fields) ...
  <button type="submit" class="btn btn-primary">Save</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,
    GEBURTSTAG: this.GEBURTSTAG.value
  };

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

🟩 Final Thoughts

The Harbourino Style is not a language – it's a clean, structured way to think Clipper and produce maintainable web code.

You focus on logic – the patcher handles structure and delivery.

🔗 More:

Why Now Is the Perfect Time for HARBOURINO