Act as an expert Full Stack Web Developer. I need you to build a web application architecture that heavily optimizes network usage by separating the UI layout from the dynamic data.
Please generate the frontend and backend code based on the following specifications:
**Core Architecture:**
1. The browser should initially load a blank shell container.
2. The frontend must query the server for a "layout version" identifier.
3. If the local layout version matches the server's layout version, the frontend must retrieve the HTML layout from the browser's `Cache Storage` API (not LocalStorage, use the actual Cache API for the HTML payload).
4. If the versions do not match (or it's the first visit), the frontend must fetch the raw HTML layout from the server, store it in the `Cache Storage`, and update the version string in `localStorage`.
5. Once the layout is injected into the DOM, the frontend must make a separate fetch request to get the dynamic variable data (JSON) and inject it into specific DOM nodes inside the layout.
**Required Endpoints:**
Design the backend to expose these three endpoints:
- `/api/layout-version`: Returns a JSON object with a simple version string (e.g., {"version": "v2.1"}).
- `/api/layout`: Returns pure HTML markup without any data populated. It should include elements with specific IDs or data-attributes for binding data later.
- `/api/data`: Returns a JSON object containing the dynamic data to populate the layout.
**Deliverables:**
1. `index.html`: The entry point with the app container.
2. `app.js`: The frontend vanilla JavaScript handling the Cache Storage, LocalStorage versioning, layout injection, and data hydration. Include proper error handling and cache fallbacks.
3. Backend Code: Provide a clear implementation of the three required endpoints using PHP (preferably using standard routing or a framework like Laravel).
4. A brief explanation of how the data binding logic maps the JSON keys to the HTML DOM IDs.
Please generate the frontend and backend code based on the following specifications:
**Core Architecture:**
1. The browser should initially load a blank shell container.
2. The frontend must query the server for a "layout version" identifier.
3. If the local layout version matches the server's layout version, the frontend must retrieve the HTML layout from the browser's `Cache Storage` API (not LocalStorage, use the actual Cache API for the HTML payload).
4. If the versions do not match (or it's the first visit), the frontend must fetch the raw HTML layout from the server, store it in the `Cache Storage`, and update the version string in `localStorage`.
5. Once the layout is injected into the DOM, the frontend must make a separate fetch request to get the dynamic variable data (JSON) and inject it into specific DOM nodes inside the layout.
**Required Endpoints:**
Design the backend to expose these three endpoints:
- `/api/layout-version`: Returns a JSON object with a simple version string (e.g., {"version": "v2.1"}).
- `/api/layout`: Returns pure HTML markup without any data populated. It should include elements with specific IDs or data-attributes for binding data later.
- `/api/data`: Returns a JSON object containing the dynamic data to populate the layout.
**Deliverables:**
1. `index.html`: The entry point with the app container.
2. `app.js`: The frontend vanilla JavaScript handling the Cache Storage, LocalStorage versioning, layout injection, and data hydration. Include proper error handling and cache fallbacks.
3. Backend Code: Provide a clear implementation of the three required endpoints using PHP (preferably using standard routing or a framework like Laravel).
4. A brief explanation of how the data binding logic maps the JSON keys to the HTML DOM IDs.
