Twigx Bundle Laravel Package

Product Decisions This Supports

• Component-Based UI Development: Accelerates adoption of a design system (e.g., Spirit) by enabling JSX-like syntax in Twig, reducing context-switching between frontend and backend teams. Aligns with modular frontend architecture (e.g., micro-frontends, component libraries).
• Build vs. Buy: Buy for teams already using Symfony/Twig and needing a React-like DX without adopting JavaScript frameworks. Avoids reinventing Twig extensions or migrating to JS-based templating.
• Roadmap Priorities:
  • Unified Component Library: Standardize UI components across Symfony apps (e.g., buttons, forms, alerts) with self-documenting templates.
  • Developer Experience (DX): Reduce cognitive load for backend devs familiar with JSX (e.g., React/Vue) by leveraging familiar syntax in Twig.
  • Performance: Inline SVG support (via Svg extension) reduces HTTP requests for icons/assets.
• Use Cases:
  • Admin Panels/Dashboards: Rapidly build complex UIs with reusable components (e.g., data tables, modals).
  • Multi-Tenant SaaS: Share component logic across tenant-specific templates while maintaining consistency.
  • Legacy Modernization: Gradually introduce component-driven design to monolithic Twig apps without full frontend refactors.

When to Consider This Package

• Adopt if:

  • Your team uses Symfony + Twig and wants JSX-like syntax for components (e.g., migrating from PHP templates to a design system).
  • You’re building a component library (e.g., Spirit) and need server-side rendering with Twig.
  • Your frontend/backend teams collaborate closely, and shared syntax (JSX/Twig) reduces friction.
  • You prioritize type safety and IDE support (e.g., autocompletion for props) without adopting TypeScript.
  • Your project requires PHP 8.1+ and Symfony 5.4+/6.4+/7.2+.

• Look elsewhere if:

  • You’re all-in on JavaScript frameworks (React, Vue, Svelte) and prefer client-side rendering.
  • Your team lacks Twig expertise or needs advanced reactivity (e.g., Alpine.js, Stimulus).
  • You require hot reloading or interactive development (this is a compile-time extension).
  • Your project uses Symfony <5.4 or PHP <8.1 (check compatibility).
  • You need serverless/edge rendering (e.g., PHP in Lambda) where Twig’s overhead is prohibitive.

How to Pitch It (Stakeholders)

For Executives:

*"This bundle lets our backend team build UI components faster and more consistently by using a JSX-like syntax in Twig—similar to React but without leaving PHP. For example, a button component can be written as <Button onClick={handleSubmit}>Submit</Button> instead of nested Twig tags. This reduces:

• Developer onboarding time (familiar syntax for frontend devs).
• UI inconsistencies (enforces a single source of truth for components).
• Tech debt (reuses existing Twig templates while modernizing the DX). It’s a low-risk way to adopt component-driven design without a full frontend rewrite, and it integrates seamlessly with our existing Symfony stack."*

ROI:

• Short-term: 20–30% faster UI development for backend teams.
• Long-term: Easier maintenance of design systems (e.g., Spirit) and reduced merge conflicts between frontend/backend changes.

For Engineering Teams:

*"This bundle extends Twig with JSX-like syntax, enabling:

1. Component Reusability: Define components once (e.g., <Card>, <Alert>) and reuse them across templates.
2. Prop Validation: Pass data to components with strict typing (e.g., { isOpen: true }).
3. Design System Alignment: Works natively with Spirit or custom component libraries.
4. Performance: Inline SVG support reduces HTTP requests for icons.

Key Trade-offs:

• No client-side reactivity: This is a server-rendered solution (use Alpine.js/Stimulus for interactivity).
• Twig dependency: Requires PHP 8.1+ and Symfony 5.4+.

Migration Path:

1. Start with simple components (e.g., buttons, alerts).
2. Gradually replace Twig {% include %} with <Component> tags.
3. Leverage the paths config to organize components in templates/components/.

Example:

<!-- Before (Twig) -->
{% include '@spirit/Button.twig' with {
    label: 'Submit',
    onClick: 'handleSubmit()'
} %}

<!-- After (TwigX) -->
<Button onClick={handleSubmit()}>Submit</Button>

Next Steps:

• Evaluate compatibility with your Symfony version (PHP 8.1+ required).
• Pilot with a non-critical feature (e.g., admin panel).
• Pair with a design system (Spirit or custom) for maximum impact."*

Call to Action: "Let’s prototype this for [X feature] and measure dev velocity improvements in 2 sprints."