Overview
This document outlines a Behavior-Driven Development (BDD) frontend production system that treats architecture as a contract-driven factory. It details a four-layer model—Specification, Generation, Verification, and Orchestration—to ensure software behavior matches stakeholder intent through automated governance and verification.
Hypothesis
Frontend development can be transformed from optimistic coding into a contract-driven production system by enforcing a strict causal chain: Behavior → Structure → Verification → Enforcement. This “behavior-first frontend factory” optimizes for truth, repeatability, and auditability rather than developer speed alone.
Approach
Specification Layer (Gherkin): Human-readable executable specifications serve as the single source of truth and living contract between stakeholders and developers. Because feature files are executed as specifications, they prevent requirement drift.
Generation Layer (PlopJS + Yellicode): Code generation treated as architectural governance, not mere convenience. PlopJS handles tactical DX (boilerplate, standards), while Yellicode handles strategic generation (complex modular structures from data models). Together they ensure the application shape is deterministic.
Verification Layer (Robot Framework): Black-box behavioral arbitration verifying that built reality matches original intent. Uses Python glue code to bridge Gherkin steps with browser interactions. Requires disciplined step-hygiene strategy to avoid brittle tests.
Orchestration Layer (CI/CD): Pipeline enforces reality over optimism in strict causal order: Promise (Gherkin) → Shape (Generation) → Proof (Robot Framework) → Permission to Ship. No manual QA gates. Framework-agnostic architecture currently targeting Angular.
Key Findings
- Treating code generation as governance (not convenience) reduces technical debt by making the correct approach the only available approach.
- The specification-as-truth model eliminates requirement drift by coupling documentation to executable behavior.
- Robot Framework’s glue code layer is the primary fragility point — step hygiene is essential.
- The architecture is framework-agnostic despite current Angular targeting.
Next Steps
- Implement the three-tier keyword structure for Robot Framework test organization.
- Explore state verification (API contract checks, DOM assertions) to extend verification beyond interaction testing.
Related
- behavior-locked-pipeline — the companion CI/CD enforcement architecture
- alp-automated-delivery — the ALP compiler that feeds this frontend factory
- procedural-generation-workflows — the multi-tier generation patterns underlying the factory