Example: Vanilla JS frontend co-working with Yii3 backend (fetch + JSON API)

[Ai-TOS-789]

Example: Vanilla JS frontend co-working with Yii3 backend (fetch + JSON API)

Hi team, I built a small, working example showing Vanilla JS (no framework) co-working with a Yii3 backend and would like your input on whether this is the recommended pattern before I rely on it.

What it does

• A Yii3 API action GET /api/health returns JSON {status, framework, frontend, time} via ResponseFactoryInterface.
• A plain assets/main/app.js (IIFE + DOMContentLoaded + fetch) calls the API and updates the DOM; a button re-fetches.
• The JS is registered through MainAsset (public array $js = ['app.js'];) and Yii3 publishes it to public/assets/main/<hash>/app.js; the layout emits <script src="/assets/main/<hash>/app.js"> automatically.
• CSS lives in assets/main/site.css, same bundle.

Verified working

• GET /api/health → 200 JSON
• Homepage 200, renders #yii3-vanilla-box
• Built asset served at /assets/main/<hash>/app.js (200)
• phpstan analyse src config --level=5 → no errors

Questions for maintainer guidance

1. Is using ResponseFactoryInterface (from config/web/di/psr17.php) the blessed way to return JSON from an action? Any pitfall vs a small response helper?
2. For serving Vanilla JS, is registering it via AssetBundle::$js the recommended approach, or is there a lighter/preferred mechanism?
3. Would you accept a docs/example PR adding this Vanilla JS + Yii3 co-work sample to the template? (See linked PR.)

Files (verified)

• assets/main/app.js
• src/Web/Api/HealthAction.php
• config/common/routes.php (added /api/health)
• src/Web/Shared/Layout/Main/MainAsset.php (added $js)
• src/Web/HomePage/template.php (added demo box)
• assets/main/site.css (added styles)